skuid.utils.createPopupFromPopupXML not diplaying the message in a formatted way

Questions
1

I’m calling the Apex method from JS snippet and using skuid.utils.createPopupFromPopupXML
to display the returned message in popup. I’m passing the returned message in a formatted way using
in the Apex and in the JS snippet using
tag while forming the xml string. But while displaying in the popup, it’s not showing the formatted message in the popup (formatting comes properly in console. Please assist.

2

Snippet used -

result = sforce.apex.execute(‘ApplicationDeptChangeCtrl’,‘updateApplicationDept’,
{
appId : appRow.Id
});
console.log(result);
console.log(result[0]);

        var popupXMLString = 
        
        '<popup title="Submit to next Stage " width="80%">'
            + '<components>'
                + '<pagetitle model="Application_stage">'
                    + '<maintitle><p>Moving to next stage..

‘+result+’

’
+ ‘’
+ ‘’
+ ‘’;

        var popupXML = skuid.utils.makeXMLDoc(popupXMLString);
        console.log( popupXML);
        var newXmlString = skuid.utils.getXML(popupXML[0]);
        console.log(newXmlString);
        //console.log( skuid.utils.decodeXML(popupXML));
        var context = {
            
        };
        
        var popup = skuid.utils.createPopupFromPopupXML(popupXML,context);
3

Hi Sridhar, I hope you’re safe and well with all that’s going on in the world.

It looks like you’re using a page title in your popup, but I don’t believe that component supports HTML formatting. We suggest using the template component instead. Here’s a sample page using a version of your snippet to show a formatted message via the template component. Let us know if this works for you or if you have any questions.

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true"><models/><components><buttonset uniqueid="sk-2iTH-557"> <buttons> <button type="multi" label="Show Popup" uniqueid="sk-2iTH-564"> <actions> <action type="custom" snippet="ShowStuffInPopup"/> </actions> </button> </buttons></buttonset><template multiple="false" uniqueid="sk-2iTR-599" allowhtml="true"> <contents>&amp;lt;b&amp;gt;Declarative testing here:&amp;lt;/b&amp;gt;&amp;lt;br/&amp;gt;&amp;lt;p&amp;gt;Moving to next stage.. &amp;lt;br/&amp;gt;&amp;lt;br/&amp;gt;&amp;lt;br/&amp;gt;Here is some text!&amp;lt;/p&amp;gt;</contents></template></components><resources> <labels/> <javascript><jsitem location="inlinesnippet" name="ShowStuffInPopup" cachelocation="false">var result = 'Here is some text!';​// Can do:var htmlContent = '&amp;lt;p&amp;gt;Moving to next stage.. &amp;lt;br/&amp;gt;&amp;lt;br/&amp;gt;&amp;lt;br/&amp;gt;'+result+'&amp;lt;/p&amp;gt;';var encodedHTMLContent = skuid.utils.encodeHTML(htmlContent);​var popupXMLString = '&amp;lt;popup title="Submit to next Stage " width="80%"&amp;gt;' + '&amp;lt;components&amp;gt;' + '&amp;lt;template multiple="false" allowhtml="true"&amp;gt;' + '&amp;lt;contents&amp;gt;' + encodedHTMLContent + '&amp;lt;/contents&amp;gt;' + '&amp;lt;/template&amp;gt;' + '&amp;lt;/components&amp;gt;'+ '&amp;lt;/popup&amp;gt;';​var popupXML = skuid.utils.makeXMLDoc(popupXMLString);console.log( popupXML);var newXmlString = skuid.utils.getXML(popupXML[0]);console.log(newXmlString);var context = {};​var popup = skuid.utils.createPopupFromPopupXML(popupXML,context);</jsitem></javascript> <css/> <actionsequences/></resources><styles> <styleitem type="background" bgtype="none"/></styles><pageregioncontents/></skuidpage>
4

Sridhar,
One more thing you might try is, if you want to not have to rely on the skuid.utils.createPopupFromPopupXML function, you could modify your setup to be a bit more declarative, like so:

  • Create a Ui-only field on one of your models for storing the response value from your Apex call
  • In your snippet, rather than constructing a custom popup via createPopupFromPopupXML, simply update the Ui-only field using the skuid.model.Model.prototype.updateRow method.
  • Run a model action that, when the Ui-only field is updated, you open a popup (via the "Open Popup" action)
  • In the popup, include a Template component containing the HTML that you want to display. On the Template component, make sure you select the "Allow HTML" property! You can use merge syntax to display the value from your Ui-only field.
It's just a thought! If you make the updates Anna is recommending instead, I think your popup should work just fine.

Thanks!
Emily

5

Thank you guys for your inputs!  I was able to achieve this in the way of using Template and Action Sequences without using pop up XML JS snippet.

6

Awesome! Thanks for sharing, Sridhar!