Peter, here is an example of a Custom Field Renderer Snippet that shows a Popup icon. This Field Renderer makes it so that a click on the popup icon will run a separate Snippet that creates and shows a popup, using the strategy documented in “Trigger popup from javascript”.
Field Renderer snippet:
var field = arguments[0],
value = skuid.utils.decodeHTML(arguments[1]),
$ = skuid.$;
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
var showContactInfoPopup = function(){
skuid.snippet.getSnippet('showContactInfoPopup')({
row: field.row,
model: field.model
});
};
// If not in edit mode, add an icon that will trigger a popup
if (field.mode !== 'edit'){
field.element.children().css('display','inline-block');
field.element.append(
$('<div>').css({
'display':'inline-block',
'float':'right',
'padding-top':'5px'
}).append(
$('<div>').addClass('sk-icon sk-icon-popup inline')
.css('cursor','pointer')
.on('click',showContactInfoPopup)
)
);
}
Snippet that shows a popup:
``` var context = arguments[0]; var popupXMLString = '' + '' + '' + '{{FirstName}} {{LastName}}' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + ''; var popupXML = skuid.utils.makeXMLDoc(popupXMLString); var popup = skuid.utils.createPopupFromPopupXML(popupXML,context); ```It looks like this:
