Recreate 'New Related List Record' button in skuid with dynamic display of records

  • 1
  • Question
  • Updated 2 years ago
  • Answered
Hello All! 

I am trying to recreate the below New Record button functionality:

Basically I have a custom meeting record object where I have created a junction object that stores an existing contact on the meeting record, thus allowing me to build a contact list of attendees. In salesforce classic this works great, simply his New CS Meeting Attendee, search the contact name and add them in. 

Now I am trying to recreate this function in skuid, that is, the ability to add attendees (junction object records) and display them in a list in real time as they are added and saved. 

So far I have tried a table and a search bar where the search will locate contact records and with a select action sequence that creates a new row (details pre filled in the action step), then the record is saved, then the model re queried. This did not work so well as it was unreliable and not working consistently. 

I have tried to use the search component again but with a list like:
<ul style="margin: 0; padding: 0;">

But nothing shows up, even where there are records in the model.

Does anyone have any tips on how I can accomplish this? Please ask questions if I need to clarify more.

Photo of Michael Schniepp

Michael Schniepp

  • 1,908 Points 1k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Bill McCullough

Bill McCullough, Champion

  • 13,722 Points 10k badge 2x thumb

I think this matches what you want,  This sample uses a Search component to add EventRelation records to a new Event.  Each attendee is displayed in the table as you add them.



<skuidpage unsavedchangeswarning="yes" personalizationmode="server" useviewportmeta="true" showsidebar="true" showheader="true" tabtooverride="Event">
        <model id="Event" limit="1" query="false" createrowifnonefound="true" datasourcetype="salesforce" datasource="salesforce" sobject="Event">
                <field id="Subject"/>
                <field id="StartDateTime"/>
                <field id="EndDateTime"/>
        <model id="EventRelations" limit="20" query="false" createrowifnonefound="false" datasource="salesforce" sobject="EventRelation">
                <field id="EventId"/>
                <field id="Event.Subject"/>
                <field id="RelationId"/>
                <field id="Relation.Name"/>
                <field id="IsInvitee"/>
                <condition type="fieldvalue" value="true" enclosevalueinquotes="false" field="IsInvitee"/>
                <condition type="modelmerge" value="" field="EventId" fieldtargetobjects="Event" operator="=" model="Event" enclosevalueinquotes="true" mergefield="Id" novaluebehavior="noquery"/>
        <pagetitle model="Event" uniqueid="sk-2_8-201">
                <template>New {{Model.label}}</template>
                <action type="savecancel" afterCancel="/{{Model.KeyPrefix}}/o" afterSave="/{{Id}}" rollbackonanyerror="true" uniqueid="sk-2_8-199">
        <grid uniqueid="sk-2_B-249">
                <division behavior="flex" minwidth="100px" ratio="1">
                        <basicfieldeditor showsavecancel="false" showheader="true" model="Event" mode="edit" uniqueid="sk-2_8-214">
                                <column width="100%">
                                        <section title="Basics" collapsible="no">
                                                <field id="Subject" uniqueid="sk-2_8-209"/>
                                                <field uniqueid="sk-2_H-304" id="StartDateTime"/>
                                                <field uniqueid="sk-2_H-305" id="EndDateTime"/>
                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                        <search uniqueid="sk-2_J-318" soslfields="Name Fields" placeholdertext="Search for attendee to add">
                                <object datasource="salesforce" id="Contact" icon="sk-icon-contact" headername="Contacts" fields="Id">
                                        <field id="Name"/>
                                <action type="createRow" model="EventRelations" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context">
                                        <default type="fieldvalue" field="RelationId" fieldtargetobjects="Account,Asset,Campaign,Case,Contact" enclosevalueinquotes="true" value="{{Id}}"/>
                                        <default type="fieldvalue" field="Relation.Name" fieldtargetobjects="Contact" enclosevalueinquotes="true" value="{{Name}}"/>
                        <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="false" showexportbuttons="false" hideheader="true" hidefooter="true" pagesize="5" alwaysresetpagination="false" createrecords="false" model="EventRelations" buttonposition="" mode="edit" allowcolumnreordering="true" responsive="true" uniqueid="sk-2_v-588" emptysearchbehavior="query">
                                <field id="RelationId" hideable="true" uniqueid="fi-2-0-672"/>
                                <field id="IsInvitee" hideable="true" uniqueid="fi-2-0-673"/>
                                <action type="edit"/>
                                <action type="delete"/>
                            <massactions usefirstitemasdefault="true">
                                <action type="massupdate"/>
                                <action type="massdelete"/>
                                <view type="standard"/>
                <styleitem type="background" bgtype="none"/>
        <actionsequences uniqueid="sk-2_H-298"/>
        <styleitem type="background" bgtype="none"/>
Photo of Michael Schniepp

Michael Schniepp

  • 1,908 Points 1k badge 2x thumb
Thanks Bill! I got it all squared away.