Conditionally show popup on page load?

  • 1
  • Question
  • Updated 3 years ago
  • Answered
I'm working on trying to conditionally show some alerts to users and have run into a snag. My goal is to check for related records for an account on page load and if there are any records, show a popup immediately that contains the records. There does not seem to be...
  • A way to initialize a popup on page load (without javascript)
  • A way to conditionally show a popup only if there are records (even within the action framework)
Am I overlooking some built-in features (especially with the banzai release) that would let me do this? Or do I need to use javascript to accomplish this.
Photo of Jonathan Gillespie

Jonathan Gillespie

  • 870 Points 500 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Jonathan, I think a combination of Model Actions, Conditional Rendering, and Ui-Only Fields will get you where you'd like to be here.

I would start by creating a "Ui Only Model" on your page, basically just create a Model called something like "UiOnly" on the Account object, set to "Create Default Row if Model has None" and NOT Load records when page is first loaded. Then add a Ui-Only field to this Model called "PopupTrigger" or something like that, type of Picklist. Add a single Picklist Entry to this Ui-Only picklist field, with value "yes". Now add a Model Action to your "Ui Only" Model. Initiating Events should be "Row in Model Updated", Fields should be "PopupTrigger" only. Then for Actions, add a single Action: Show Popup. Here, show your table(s) of related records.

So now basically you've got a Popup that you can show on demand --- all you have to do is to make any change the "PopupTrigger" field on your Ui Only Model's one row.

At this point you need to cause an update to this field on page load --- to do this, I would add a very small bit of Inline JavaScript that checks for records in your Related Record Models, and if so calls updateRow() to cause the update. I have experimented with other approaches that don't involve JavaScript (using Conditional Rendering on a Field Editor on the Ui-Only Model with the PopupTrigger field in it, marked as Required), but I'm recommending not to go this route.

Here's a sample page XML (note: this is assuming you are using Banzai):

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" tabtooverride="Event">   
  <models>
      <model id="UiOnly" limit="" query="false" createrowifnonefound="true" adapter="" type="" sobject="Account" doclone="" unloadwarningifunsavedchanges="false" processonclient="true">
         <fields>
            <field id="PopupTrigger" uionly="true" displaytype="PICKLIST" label="Popup Trigger" defaultValue="">
               <picklistentries>
                  <entry value="yes" label="Yes"/>
               </picklistentries>
            </field>
         </fields>
         <conditions/>
         <actions>
            <action>
               <actions>
                  <action type="showPopup">
                     <popup title="Related Records review" width="90%">
                        <components>
                           <tabset rememberlastusertab="true" defertabrendering="true" uniqueid="sk-1095s0-1031" renderas="">
                              <tabs>
                                 <tab name="Related Contacts ({{$Model.Contacts.data.length}})" icon="sk-icon-contact">
                                    <components>
                                       <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Contacts" buttonposition="" mode="read" uniqueid="sk-109Bpb-1049">
                                          <fields>
                                             <field id="FirstName"/>
                                             <field id="LastName"/>
                                             <field id="AccountId"/>
                                          </fields>
                                          <rowactions>
                                             <action type="edit"/>
                                             <action type="delete"/>
                                          </rowactions>
                                          <massactions usefirstitemasdefault="true">
                                             <action type="massupdate"/>
                                             <action type="massdelete"/>
                                          </massactions>
                                          <views>
                                             <view type="standard"/>
                                          </views>
                                       </skootable>
                                    </components>
                                 </tab>
                                 <tab name="Related Cases ({{$Model.Cases.data.length}})" loadlazypanels="true" icon="sk-icon-case">
                                    <components>
                                       <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Cases" buttonposition="" mode="read" uniqueid="sk-109EH1-1072">
                                          <fields>
                                             <field id="CaseNumber"/>
                                             <field id="Subject"/>
                                             <field id="Description"/>
                                          </fields>
                                          <rowactions>
                                             <action type="edit"/>
                                             <action type="delete"/>
                                          </rowactions>
                                          <massactions usefirstitemasdefault="true">
                                             <action type="massupdate"/>
                                             <action type="massdelete"/>
                                          </massactions>
                                          <views>
                                             <view type="standard"/>
                                          </views>
                                       </skootable>
                                    </components>
                                 </tab>
                              </tabs>
                           </tabset>
                        </components>
                     </popup>
                  </action>
                  <action type="emptyModelData">
                     <models>
                        <model>UiOnly</model>
                     </models>
                  </action>
               </actions>
               <events>
                  <event>row.updated</event>
               </events>
               <fields>
                  <field>PopupTrigger</field>
               </fields>
            </action>
         </actions>
      </model>
      <model id="Account" limit="1" query="true" createrowifnonefound="false" adapter="" type="" sobject="Account">
         <fields>
            <field id="Name"/>
            <field id="Industry"/>
         </fields>
         <conditions>
            <condition type="param" value="id" field="Id" operator="=" enclosevalueinquotes="true" novaluebehavior="noquery"/>
         </conditions>
         <actions/>
      </model>
      <model id="Contacts" limit="20" query="true" createrowifnonefound="false" adapter="" type="" sobject="Contact">
         <fields>
            <field id="FirstName"/>
            <field id="LastName"/>
            <field id="AccountId"/>
            <field id="Account.Name"/>
         </fields>
         <conditions>
            <condition type="modelmerge" value="" field="AccountId" operator="=" model="Account" enclosevalueinquotes="true" mergefield="Id" novaluebehavior="noquery"/>
         </conditions>
         <actions/>
      </model>
      <model id="Cases" limit="20" query="true" createrowifnonefound="false" adapter="" type="" sobject="Case">
         <fields>
            <field id="Subject"/>
            <field id="Description"/>
            <field id="CaseNumber"/>
         </fields>
         <conditions>
            <condition type="modelmerge" value="" field="AccountId" operator="=" model="Account" enclosevalueinquotes="true" mergefield="Id" novaluebehavior="noquery"/>
         </conditions>
         <actions/>
      </model>
   </models>
   <components>
      <pagetitle model="Account" uniqueid="sk-103ZtM-67">
         <maintitle>{{Name}}: Popup should show on page load if there are related Contact or Case records</maintitle>
         <subtitle>Account</subtitle>
         <actions>
            <action type="savecancel">
               <models>
                  <model>Contacts</model>
                  <model>Cases</model>
               </models>
            </action>
         </actions>
      </pagetitle>
      <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Account" buttonposition="" uniqueid="sk-109KPy-1099" mode="read">
         <columns>
            <column width="50%">
               <sections>
                  <section title="Account details" collapsible="no">
                     <fields>
                        <field id="Name"/>
                        <field id="Industry"/>
                     </fields>
                  </section>
               </sections>
            </column>
            <column width="50%">
               <sections>
                  <section title="Section B">
                     <fields/>
                  </section>
               </sections>
            </column>
         </columns>
      </basicfieldeditor>
      <tabset rememberlastusertab="true" defertabrendering="true" uniqueid="sk-109cJY-1131" renderas="">
         <tabs>
            <tab name="Contacts">
               <components>
                  <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Contacts" buttonposition="" mode="read" uniqueid="sk-109eE8-1142">
                     <fields>
                        <field id="FirstName"/>
                        <field id="LastName"/>
                        <field id="AccountId"/>
                     </fields>
                     <rowactions>
                        <action type="edit"/>
                        <action type="delete"/>
                     </rowactions>
                     <massactions usefirstitemasdefault="true">
                        <action type="massupdate"/>
                        <action type="massdelete"/>
                     </massactions>
                     <views>
                        <view type="standard"/>
                     </views>
                  </skootable>
               </components>
            </tab>
            <tab name="Cases" loadlazypanels="true">
               <components>
                  <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Cases" buttonposition="" mode="read" uniqueid="sk-109if3-1167">
                     <fields>
                        <field id="CaseNumber"/>
                        <field id="Subject" valuehalign="" type=""/>
                        <field id="Description"/>
                     </fields>
                     <rowactions>
                        <action type="edit"/>
                        <action type="delete"/>
                     </rowactions>
                     <massactions usefirstitemasdefault="true">
                        <action type="massupdate"/>
                        <action type="massdelete"/>
                     </massactions>
                     <views>
                        <view type="standard"/>
                     </views>
                  </skootable>
               </components>
            </tab>
         </tabs>
      </tabset>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript>
         <jsitem location="inline" name="show popup if related records have rows" cachelocation="false" url="">(function(skuid){
var $ = skuid.$;

$(document.body).one('pageload',function(){

// CHANGE THESE MODEL IDS ONLY
var MODEL_IDS_TO_CHECK = [
   'Contacts',
   'Cases'
];

var showPopup = false;

$.each(MODEL_IDS_TO_CHECK,function(i,modelId){
   var model = skuid.$M(modelId);
   if (model &amp;&amp; model.getRows().length) {
      showPopup = true;
      return false;
   }
});

if (showPopup) {
   // Update our Ui-only model, this will cause our popup to be shown
   skuid.$M('UiOnly').updateRow(skuid.$M('UiOnly').getFirstRow(),"PopupTrigger","yes");
}
});

})(skuid);</jsitem>
      </javascript>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>
Photo of Jonathan Gillespie

Jonathan Gillespie

  • 870 Points 500 badge 2x thumb
Zach, I finally had a chance to play around a bit with your example and it seems to do the trick! I'll definitely use this to handle my current situation. Thanks for the help!