How to populate detail section on row click of a Table

  • 1
  • Question
  • Updated 3 years ago
  • Answered
I have a skuid page with two components one is a table and the other one is a field editor section.

Both uses a same object eg: contact : once a contact record selected in the table the detail fields related to the particular contact should be loaded in to detail section.



How could get this done?

Do I need to use custom scripts?

Thanks in advance
Photo of Hasantha Liyanage

Hasantha Liyanage

  • 1,446 Points 1k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
You could use a Row Action that "Runs Multiple Actions" to accomplish this. There's 2 main approaches that I would recommend for accomplishing this. Both involve adding a separate "SelectedContact" Model that has "Load Model data on page load" set to FALSE. This Model should only ever contain one row, the Contact that you want to see in the detail section. Your Table Row Action will be responsible for populating this Model with the desired Contact row. Here are the two approaches to do this:

(a) Have a Condition on your SelectedContact Model on the Contact Id field, which you set to the Id of the selected row, and then Query your SelectedContact Model. This approach makes sense if you want to show a lot of fields in your detail section and you don't want to query for all this field data in your main Contacts Model on initial page load.

(b) Use the "Remove rows from Model" and "Adopt rows into Model" Actions to take the context row from your main Contacts Model and add it to your SelectedContact Model. This approach is the fastest and easiest if you have a limited set of data fields that you want to show in your detail Model.

Here is sample XML for approach (b):



<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" tabtooverride="Contact">   
   <models>
      <model id="Contacts" limit="100" query="true" createrowifnonefound="false" sobject="Contact" adapter="" type="" orderby="LastName, FirstName">
         <fields>
            <field id="FirstName"/>
            <field id="LastName"/>
            <field id="CreatedDate"/>
            <field id="Birthdate"/>
            <field id="MailingCity"/>
            <field id="MailingCountry"/>
            <field id="MailingState"/>
            <field id="MailingStreet"/>
            <field id="MailingPostalCode"/>
            <field id="Email"/>
            <field id="HomePhone"/>
            <field id="Phone"/>
            <field id="AccountId"/>
            <field id="Account.Name"/>
         </fields>
         <conditions/>
         <actions/>
      </model>
      <model id="SelectedContact" limit="" query="false" createrowifnonefound="false" sobject="Contact" adapter="" type="">
         <fields>
            <field id="FirstName"/>
            <field id="LastName"/>
            <field id="CreatedDate"/>
            <field id="Birthdate"/>
            <field id="MailingCity"/>
            <field id="MailingCountry"/>
            <field id="MailingState"/>
            <field id="MailingStreet"/>
            <field id="MailingPostalCode"/>
            <field id="Email"/>
            <field id="HomePhone"/>
            <field id="Phone"/>
            <field id="AccountId"/>
            <field id="Account.Name"/>
         </fields>
         <conditions/>
         <actions/>
      </model>
   </models>
   <components>
      <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="5" createrecords="true" model="Contacts" buttonposition="" mode="read" uniqueid="sk-w6zxW-152">
         <fields>
            <field id="FirstName"/>
            <field id="LastName"/>
            <field id="AccountId"/>
         </fields>
         <rowactions>
            <action type="edit"/>
            <action type="delete"/>
            <action type="multi" label="Show details" icon="sk-icon-contact">
               <actions>
                  <action type="emptyModelData">
                     <models>
                        <model>SelectedContact</model>
                     </models>
                  </action>
                  <action type="adoptRows" sourcemodel="Contacts" targetmodel="SelectedContact"/>
               </actions>
            </action>
         </rowactions>
         <massactions usefirstitemasdefault="true">
            <action type="massupdate"/>
            <action type="massdelete"/>
         </massactions>
         <views>
            <view type="standard"/>
         </views>
      </skootable>
      <pagetitle model="SelectedContact" uniqueid="sk-w7XQb-267">
         <subtitle>
            <template>{{Model.label}}</template>
         </subtitle>
         <actions>
            <action type="savecancel"/>
         </actions>
         <maintitle>{{FirstName}} {{LastName}} - {{AccountId}}</maintitle>
         <renderconditions logictype="and">
            <rendercondition type="fieldvalue" enclosevalueinquotes="true" fieldmodel="SelectedContact" sourcetype="modelproperty" nosourcerowbehavior="deactivate" sourceproperty="hasRows"/>
         </renderconditions>
      </pagetitle>
      <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="SelectedContact" buttonposition="" uniqueid="sk-w6_oC-164" mode="read">
         <columns>
            <column width="50%">
               <sections>
                  <section title="Mailing Address" collapsible="no">
                     <fields>
                        <field id="MailingStreet"/>
                        <field id="MailingCity"/>
                        <field id="MailingState"/>
                        <field id="MailingPostalCode"/>
                        <field id="MailingCountry"/>
                     </fields>
                  </section>
               </sections>
            </column>
            <column width="50%">
               <sections>
                  <section title="Contact" collapsible="no">
                     <fields>
                        <field id="Phone"/>
                        <field id="HomePhone" valuehalign="" type=""/>
                        <field id="Email"/>
                        <field id="Birthdate" showhelp="true" valuehalign="" type=""/>
                     </fields>
                  </section>
               </sections>
            </column>
         </columns>
      </basicfieldeditor>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript/>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>
Photo of Hasantha Liyanage

Hasantha Liyanage

  • 1,446 Points 1k badge 2x thumb
Hi Zach,
Thanks for the reply, My requirement is going to change a little bit. I'm going to use a deferent model for the details section and its not a Look-up or Master-Detail R/S, 


New story is like this;
Lets say we have two objects 'A' and 'B',
1. Object 'A' and 'B' both has a field call xyz__c
2. Table's model would be Object 'A'
3. once a table row is selected object 'B's data should be loaded and displayed in the detail section (if the field values mapped with xyz__c)


My Solution;
1. Load model 'A' on lead
2. Load model 'B' on click of the row action (I have a filterrable condition - default off and activates on row click)
3. Re-query the model 'B'

**at this point I am expecting to reload the data based on the selected row's xyz__c field value 

The strange thing is it does load the data once I click on the table row.

What could go wrong here?

Thanks in advance