Trigger popup from javascript?

Zach … should this work for Task.Subject that I mentioned in my comment? I gave it a quick try and in my test so far it just renders the standard link.

hi guys…
can i get another page url in

Pavan, can you explain in more detail what you are trying to do?

How can I do this same thing but for a Field within a Field Editor?

I have a a couple different reference fields on my Account that are used to associate a specific related contact or other object and I don’t have my fields for this within a table.

I really like the built in mini page layout hovers in SF but a click with a pop up would be very nice too.

This still works great for me, too.

You should be able to create a very similar custom rendererer on the field editor field.  The snippets will be very much the same. 

hi

I was able to use the above piece of code but facing an issue related to layout of popup. i need to display a rich text field (though it is not causing any issue). when i click on button, popup has 7 blank lines above actual text. has anyone else faced such issue?
Code:
var params = arguments[0],

            $ = skuid.$,
        
        
            list = params.list,
        
        
            model = params.model,
        
        
            $xml = skuid.utils.makeXMLDoc,
        
        
            HomepageTileModel = skuid.model.getModel('HomepageTile');
        
        var contextModel;
        var varURLPath = document.referrer;
        var varURL;
        if(varURLPath.indexOf("?") !== -1)
        varURL = varURLPath.substring(varURLPath.lastIndexOf(".com/")+4,varURLPath.indexOf("?"));
        else 
        varURL = varURLPath.substring(varURLPath.lastIndexOf(".com/")+4);
        
        $.each(HomepageTileModel.data, function(i, row){
           console.log(row.Id + '-' + row.Is_Active__c + '-'  + row.URL__c);
        var varRowURL = row.URL__c;
        if(varRowURL.indexOf(varURL) !== -1 && row.Is_Active__c === true) {
        contextModel = row;
        console.log('contextModel' + contextModel.Id);
        }
        });
        if(contextModel !== undefined) {
        var popupXMLString = '<popup title="" width="90%">';
            popupXMLString+='<components>';
               popupXMLString+='<basicfieldeditor showheader="false" showsavecancel="false" model="HomepageTile" buttonposition="" mode="readonly" layout="above">';
                  popupXMLString+='<columns>';
                     popupXMLString+='<column width="100%">';
                        popupXMLString+='<sections>';
                           popupXMLString+='<section title="New Section" collapsible="no" showheader="false">';
                              popupXMLString+='<fields>';
                                 popupXMLString+='<field id="Description__c" valuehalign="" type="">';
                                    popupXMLString+='<label> </label>';
                                 popupXMLString+='</field>';
                              popupXMLString+='</fields>';
                           popupXMLString+='</section>';
                        popupXMLString+='</sections>';
                     popupXMLString+='</column>';
                  popupXMLString+='</columns>';
               popupXMLString+='</basicfieldeditor>';
            popupXMLString+='</components>';
         popupXMLString+='</popup>';

var popupXML = skuid.utils.makeXMLDoc(popupXMLString);

        var context = {
        
        row: contextModel
        
        };
        
        console.log(contextModel);
        
        // Launch a Popup asking the user to provide an Escalation reason
        
        
        var popup = skuid.utils.createPopupFromPopupXML(popupXML,context);
        }

I am doing similar thing and want to make the row action icon invisible while implementing this solution? Is there a way to do this?

You can add custom CSS that targets the row action icon you are interested and sets to be hidden. Getting your selectors just right to target the icon may be a challenge,  but just inspect the rendered page and root around until you find the classes and divs. 

I’d like to do this from an href in a template component, any ideas? 

Like this:

new javascript in-line (NOT snippet)

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&#46;utils&#46;makeXMLDoc(popupXMLString); popup = skuid&#46;utils&#46;createPopupFromPopupXML(popupXML); }

Then a template component that looks like this:

<a target="popup" onclick="return popupWindow('')" title="Create a New Entity Search"  > Some text or img src here </a>

Note that lack of an href on that tag, so you’re link doesn’t go anywhere but popup.

Also, I didn’t need a context, because my popup is a page include of a create new record page. But if you wanted context you can add that by referencing a model like is shown in the examples above.

This is great! Got it working. Is there any way to take it one step further and hide the row actions? Therefore there is just the link to the popup? I assume probably not…

Find the Div for the row actions and add custom css  “Display:none”   You probably want to have your CSS start with the table ID and navigated down to the specific class for the icons so you don’t hide all row actions on your pages… 

Hi Jack, The js worked on 1 button i have on an html page. However, I created 4 buttons and of course, when the 2nd, 3rd or 4th button were selected, they all returned the same popup window. I have 4 page includes that should only render for the assigned button.

What do I need to do with either the js syntax you provided so that each button points to the exact target?

This is my js syntax modified from your suggesition (works perfect with one button):

function popupWindow() { var popupXMLString = '<popup title="triple 6" width="70%">' + '<components>' +'<includepanel type="skuid" uniqueid="sk-4MOStR-047" pagename="Create A Widget" module=""/>' +'</components>' +'</popup>'; var popupXML = skuid&#46;utils&#46;makeXMLDoc(popupXMLString); popup = skuid&#46;utils&#46;createPopupFromPopupXML(popupXML); } 

This is my html/css syntax and it works fine, just need to somehow have each button reference the correct js.

SUBMIT

Thanks!!!

Couple things you could do, either create a new snippet for each button, popupWindow2, popupWindow3, etc. Or depending on your use could pass different variables from each place you have the HTML onclick action to your page include, and have it the end result be different from each variable. Same as if you have a page include component added declaratively, you can pass page parameters to your page include in your xml string in your popupWindow snippet. I’ll post an example later today.

So if you adjust your popupWindow snippet to the following:

function popupWindow() {

var popupXMLString = '<popup title="triple 6" width="70%">' + '<components>' +'<includepanel type="skuid" uniqueid="sk-4MOStR-047" pagename="Create A Widget" module=""/>' +'querystring="type=' +typeVariable+'</components>' +'</popup>'; var popupXML = skuid.utils.makeXMLDoc(popupXMLString); popup = skuid.utils.createPopupFromPopupXML(popupXML); }

Then you can adjust your html to the following

To create a widget of type Jedi:

SUBMIT

To create a widget of type Empire

SUBMIT

You can also pass multiple page parameters to your page include, for example if you have a type and an amount:

function popupWindow() {
var popupXMLString = '<popup title="triple 6" width="70%">' + '<components>' +'<includepanel type="skuid" uniqueid="sk-4MOStR-047" pagename="Create A Widget" module=""/>' +'querystring="type=' +typeVariable++'&amp;amp;amount='+amountVariable '</components>' +'</popup>'; var popupXML = skuid.utils.makeXMLDoc(popupXMLString); popup = skuid.utils.createPopupFromPopupXML(popupXML); }

Then you can have html that looks like:

SUBMIT

Note that you can use Skuid merge syntax to pass in fields from whatever context your html onclick is, or you could even reference any model’s field via {{{$Model.Widgets.data.0.Amount__c}}}

FWIW, another cool trick is moving the onclick code into a custom render snippet, so if you wanted it on several fields in a table, you could just maintain one custom render snippet with your onclick action.

Hope that helps. Let me know if you have any other questions.

Nate, sorry just re-read your post more carefully, you want to change the entire page include for each one:

function popupWindow() {
var popupXMLString = ‘’ + ‘’ +‘’ +‘’ +‘’; var popupXML = skuid.utils.makeXMLDoc(popupXMLString); popup = skuid.utils.createPopupFromPopupXML(popupXML); }

Then your html would be:

For a page called CreateAWidget

SUBMIT

or for a page called CreateAnAccount

SUBMIT

Hi Jack, the last option here did not work. I have created 3 separate js in-line resources and it seems to always choose the last  js in the javascript window. Any ideas?

Jack, The unique Id I referenced was from the old pop up button referencing the page includes. Since I am not using a pop up button, I’m using my custom html button, what other way can I locate the unique Id?

Jack, I got it! 

I referenced the correct page this time, so it was the unique Id and creating a snippet for each button as you mentioned. 

Thank you!