Custom Popup Opened from Table Cell

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.

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:

It looks like this:

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?

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.

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'){<br>&nbsp; &nbsp; field.element.on('click',showContactInfoPopup);<br>&nbsp; &nbsp; field.element.addClass("UnderlineLink");<br>}

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. 

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…

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…

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. …

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 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.

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

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);
}

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 =
‘’

• ‘’
  • ‘’
    • ‘{{Name}}’
    • ‘’
      + ‘’
    • ‘’
  • ‘’
  • ‘’
  • ‘’
    • ‘’
      • ‘’
        • ‘’
          • ‘’
            • ‘’
          • ‘’
        • ‘’
      • ‘’
    • ‘’
    • ‘’
      • ‘’
        • ‘’
          • ‘’
        • ‘’
      • ‘’
    • ‘’

   + '</columns>'
   + '<conditions>'
      + '<condition type="contextrow" field="Id" mergefield="Id"/>'
   + '</conditions>'
  

  • ‘’
• ‘’
• ‘’;

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