On Hover Popup

Questions
,
21

For those wishing to get more sophisticated with the WhatId, here’s a code segment that identifies the object type from a polymorphic field within a Field Snippet. This uses Skuid’s API to match the field’s lookup value from the available objects within the lookup field. That makes it dynamic and agnostic to the object selected within the lookup field. That way you don’t have to specify the object structure in the javascript. This also works for other polymorphic field like owner and File lookup references.

    skuid.$.each(field.metadata.referenceTo,function(){
        if (this.keyPrefix == fieldprefix){
            objectname = this.label.replace(/s+/g, '_').replace('&','and');
        }
    });

We use this to dynamically render include pages in hover and popup displays, similar to Salesforce Classic native hover content. With consistent naming conventions, you can leverage a generalized utility to work across Salesforce’s object structure. Here’s an example of generating a popup utility based on dynamically determining the object type and passing it as a variable to another snippet:

    skuid.snippet.getSnippet('PopupPageInclude')({
        row: field.row,
        model: field.model,
        name:  fielddisplay,
        fieldId: value,
        objname: objectname,
        template: objectname+'Detail',
    });

Here’s the generalized popup utility (PopupPageInclude Snippet), which will work for any Salesforce object where there’s a matching page defined:

var context = arguments[0];
var popupXMLString =
‘’

  • ‘’
    +‘’
    +‘’
    +‘’;
    var popupXML = skuid.utils.makeXMLDoc(popupXMLString);
    popup = skuid.utils.createPopupFromPopupXML(popupXML);

To get this to work, you would also need pages defined that can receive an Id parameter and be titled accordingly:

SF_OpportunityDetail
SF_CampaignDetail
SF_UserDetail
etc.

22

 One callout is that the replace functions convert the objectname to a more usable string by replacing spaces with underscores and swapping out the “&” character (i.e. D&B company), which will cause an XML error.

23

thanks John. That is on the menu for this week :slight_smile:

24

Same concept can work for hover content:

var showInsightPage = function(event){
if (cellElem[0].childNodes[0].classList[0] !== “InsightText”){
cellElem[0].childNodes[0].setAttribute(“class”, “InsightText”);
var tooltip = document.createElement(‘div’);
tooltip.setAttribute(“class”, “InsightText-tooltip”);

    skuid.$.each(field.metadata.referenceTo,function(){
        fieldprefix = value.substring(0,3);
        if (this.keyPrefix == fieldprefix){
            objectname = this.label.replace(/s+/g, '_').replace('&','and');

    var hoverTemplate = 'SF_Hover_'+objectname;
    var hoverContent = 
        '<includepanel type="skuid" uniqueid="" pagename="'+hoverTemplate+'" module="" querystring="Id='+value+'" showloading="false"/>';
    var includeXML = skuid.utils.makeXMLDoc(hoverContent);
    var include = skuid.component.factory({ definition: includeXML});
    include.element.appendTo(tooltip);        

        }
    });
cellElem[0].childNodes[0].appendChild(tooltip);


}

};

Here’s the CSS along with some Skuid specific tweaks:

.InsightText{
color:#000;
display:inline;
position:relative
}
.InsightText-tooltip{
display:block;
visibility:hidden;
overflow-y:auto;
overflow-x:visible;
box-sizing:border-box;
height:0;
cursor:help;
background:#D6E0E1;
color:#000;
font-size:14px;
z-index:9999;
position:absolute;
width:300px;
border-radius:5px;
box-shadow: 0 2px 2px 0 #6D6E70;
left: 120px;
bottom: 35px;
}
:hover+.InsightText-tooltip{
margin-bottom:0;
height:auto;
visibility:visible;
padding:3px 3px;
z-index:9999;
display: block;
}
.InsightText-tooltip .nx-page{
background:transparent;
}
.InsightText-tooltip .nx-page-content{
background:transparent;
}
.InsightText:hover .InsightText-tooltip{
display: block;
}
.InsightText-tooltip:hover{
display:block;
}
.InsightText-tooltip .nx-basicfieldeditor-section{
margin:0;

}
.InsightText-tooltip .nx-basicfieldeditor-item{
padding:0;
}
.InsightText-tooltip .nx-basicfieldeditor-item-label{
padding: 1px 0 1px 0;
}

25

Also - add this to the snippet:

field.element.on(‘click’,“a”,showPopupPageInclude);

26

Sorry - wrong function. this is the hover one:

field.element.on(‘mouseover’,“a”,showInsightPage);