Custom Popup Opened from Table Cell

  • 3
  • Question
  • Updated 1 year ago
  • Answered
  • (Edited)
Is it possible to open a popup using HTML, JS or CSS?  I'd like to have an icon in my table open a popup when clicked, but I don't want it as a row action...  Any thoughts?
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb

Posted 4 years ago

  • 3
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
Similarly, I want to show a field's value (template or read-only currency field) with an icon next to it that allows a Skuid popup to appear by clicking on a table cell. I got the Trigger popup from javascript solution working (thanks Zach!), but I'm not sure how to modify that code to make it also render an icon in-line so that "click on me to do x" is more obvious then just a hyperlink.
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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 = 
'<popup title="Contact Details: {{FirstName}} {{LastName}}" width="80%">'
   + '<components>'
      + '<pagetitle model="Contact">'
          + '<maintitle>{{FirstName}} {{LastName}}</maintitle>'
          + '<conditions>'
                + '<condition type="contextrow" field="Id" mergefield="Id"/>'
          + '</conditions>'
       + '</pagetitle>'
       + '<basicfieldeditor showheader="true" showsavecancel="false" model="Contact" buttonposition="" mode="edit" layout="">'
       +   '<columns>'
             + '<column width="50%">'
                + '<sections>'
                   + '<section title="Contact Details" collapsible="no">'
                      + '<fields>'
                        + '<field id="FirstName"/>'
                         + '<field id="LastName"/>'
                      + '</fields>'
                   + '</section>'
                + '</sections>'
             + '</column>'
             + '<column width="50%">'
                + '<sections>'
                   + '<section title="Section B">'
                      + '<fields/>'
                   + '</section>'
                + '</sections>'
             + '</column>'
          + '</columns>'
          + '<conditions>'
             + '<condition type="contextrow" field="Id" mergefield="Id"/>'
          + '</conditions>'
       +  '</basicfieldeditor>'
   + '</components>'
+ '</popup>';
var popupXML = skuid.utils.makeXMLDoc(popupXMLString);
var popup = skuid.utils.createPopupFromPopupXML(popupXML,context);

It looks like this:



Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
skuid.utils.createPopupFromPopupXML

Is this documented somewhere? I could not find it.

Also, is there any reason this method would not work with a popup with a page include within it?
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Hi, Would it be possible to use a Page Include for the popup content?

That way I would not have to build the XML for popup and can use an existing page?

Thx
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
Yup. 
function popupWindow() {var popupXMLString = 
'<popup title=" " width="70%">'
+ '<components>'
+'<includepanel type="skuid" uniqueid="sk-VyQ_Q-161" pagename="UCCNew" module=""/>'
+'</components>'
+'</popup>';
var popupXML = skuid.utils.makeXMLDoc(popupXMLString);
popup = skuid.utils.createPopupFromPopupXML(popupXML);
}
Photo of Ralph Sr

Ralph Sr

  • 172 Points 100 badge 2x thumb
This is a great example and is close to something that I am working on implementing.  However what I want to do is a little simpler.  Goals for modifications are:

1) I want to create a button with specific wording (not just an icon as in the example) that opens a popup just like this code example does.  
2)Text in button would be underlined like a normal HTML reference.
3) Location for the button would be in a Field Editor component using a Template in a section.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Ralph: 

To attach the onclick action to the text in the field, and to make that text underlined,  adjust Zach's first snippet by removing the whole second half (After the "If not in edit mode" comment with code that looks like this: 

// If not in edit mode, add an icon that will trigger a popupif (field.mode !== 'edit'){
    field.element.on('click',showContactInfoPopup);
    field.element.addClass("UnderlineLink");
}


You also need to add a CSS resource with this code:  

.UnderlineLink {text-decoration: underline;}   

If you want you can add that class to another CSS resource. 

That should get you running. 
Photo of Ralph Sr

Ralph Sr

  • 172 Points 100 badge 2x thumb
Close but not there yet.  This works great if staying with a table component.  I want to do this from a Template component.  Essentially all I am trying to do is to provide a help message popup.  I have a template that opens page, but I trying to get it to open as a popup...

<form> 
<input TYPE="button" VALUE="Click to Learn more" 
onclick="window.location.href='/apex/c__GA_LearnMore'">
</form>

I can't figure out how to modify this to open as a popup...  I know it's something simple but haven't found the example that shows how...
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Ok then.  I think there is a far more straightforward way to do this.  Though it is unexpected......

1. Add a field editor to your page.  It should only have one column,  hide save and cancel,  and remove the header from the single section.  Probably make the label above the field.

2.  In this field editor add a template.   Give it a lable (or add a single space if you don't want a lable).   Add merge syntax if you want to show data. 

3.  The "Edit Mode Behavior"  should be a custom Popup.   This popup can be configured with any components you want.  In your case I'd just put a template with your HTML for your Help Content. 

There you go. 100% declarative.  Nice. ...


Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
There are some really cool suggestions here, but thought I'd add a very simple one

Create a new Snippet of type In-Line, NOT In-Line (snippet), just In-Line. Add the code:

function popitup(url) {
	newwindow=window.open(url,'name','screenX=400,screenY=200');
	if (window.focus) {newwindow.focus()}
	return false;
}

Then create a Template field on your table, and an <a href> link similar to the following:
 <a href="/{{{Id}}}" target="popup" onclick="return popitup('/{{{Id}}}')">{{Name}}</a>

This works like a charm for our specific situation where we just wanted to popup a detail page from a table on tab page and not have it open in a new tab. But because it's simple, it has lots of limitations, which the more awesome solutions above solve.

h/t to http://www.quirksmode.org/js/popup.html which also also a list of parameters you could use in addition to or as replacements for screenX and screenY, I just found that that setting had a decent result on different size screens. 

At first I thought I skip creating a snippet and just use onclick="window.open('URL'), but that opens the popup in a new tab in most browsers. 
(Edited)
Photo of anwaozo

anwaozo

  • 436 Points 250 badge 2x thumb
I was able to get the pop up to run but I dont have any data in the pop up. Can anyone help?

See me Code:
var context = arguments[0];
var popupXMLString = 
'<popup title="Product Details: {{{Name}}}" width="80%">'
   + '<components>'
      + '<pagetitle model="SummaryProducts">'
          + '<maintitle>{{Name}}</maintitle>'
          + '<conditions>'
                + '<condition type="contextrow" field="Id" mergefield="Id"/>'
          + '</conditions>'
       + '</pagetitle>'
       + '<basicfieldeditor showheader="true" showsavecancel="false" model="SummaryProducts" buttonposition="" mode="edit" layout="">'
       +   '<columns>'
             + '<column width="50%">'
                + '<sections>'
                   + '<section title="Product Details" collapsible="no">'
                      + '<fields>'
                        + '<field id="Name"/>'
                      + '</fields>'
                   + '</section>'
                + '</sections>'
             + '</column>'
             + '<column width="50%">'
                + '<sections>'
                   + '<section title="Section B">'
                      + '<fields/>'
                   + '</section>'
                + '</sections>'
             + '</column>'
          + '</columns>'
          + '<conditions>'
             + '<condition type="contextrow" field="Id" mergefield="Id"/>'
          + '</conditions>'
       +  '</basicfieldeditor>'
   + '</components>'
+ '</popup>';

var popupXML = skuid.utils.makeXMLDoc(popupXMLString);
var popup = skuid.utils.createPopupFromPopupXML(popupXML,context);