Custom Popup Opened from Table Cell

edited June 25, 2020 in Questions
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?

Comments

  • edited June 18, 2019
    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.
  • edited June 25, 2020
    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:

    image

    image
  • Pat VachonPat Vachon 💎💎💎
    edited January 5, 2016
    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?
  • edited March 16, 2015
    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.
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    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. 
  • edited March 17, 2015
    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...
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    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. ...


    image

  • Jack SanfordJack Sanford San Antonio, TX 💎💎
    edited January 12, 2018
    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. 
  • DaveDave 💎
    edited December 14, 2016
    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
  • Jack SanfordJack Sanford San Antonio, TX 💎💎
    edited May 25, 2016
    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);
    }
  • edited June 22, 2017
    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);



Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!