Create parent record and associated child(ren) record on the same page

  • 1
  • Question
  • Updated 3 years ago
I need to create a parent record (for example, account) and one or more child records (for example, contacts) all on one page.  The page has a field editor for the parent and a table for the contacts.  I want to be able to click the save button and the parent will be created and then the contacts will be created and associated with the newly created account record.

How can I accomplish this?
Photo of ksumner

ksumner

  • 120 Points 100 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Do you have a specific number of child records? If so you should be able to use an action sequence. You would disable/remove standard save buttons. You would add either a page title component or a navigation component and use it as your "button". You would create a set of actions that first saves the parent record model, then creates new rows on your child record model (use separate models for each child and parent). The new row action allows you to populate fields on the rows being created. You can make the parent field of your new child row equal to the ID field of the parent.
Photo of ksumner

ksumner

  • 120 Points 100 badge 2x thumb
No specific number of child records.  Can be zero, one or many.
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
You can't attach a child to a parent until that parent has been saved. Saving the parent creates the Salsesforce ID that is used to associate the child, so you will have to save the parent first. You could try to do everything with one button, but I think you would have better luck with a button that saves the parent record and then, once saved, allows you to create children. On your child model, you would add a condition that the parent ID is equal to the ID of the record in your parent model. Make sure your parent model is set to only have one row. Your newly created parent should become row 0 and be used as the row for your child model condition. Then, when you create a new child row, it should auto populate the parent field with the ID of the parent record.
Photo of ksumner

ksumner

  • 120 Points 100 badge 2x thumb
Thank you Raymond.  Would it be possible to use multiple actions to get the results?  

In the page title component set the button action type to "run multiple actions".  Then in the actions tabs create multiple actions to  "Save Changes in Model: Account", query the record to get the new account id, then "Save changes in model: Contact".
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
I'm not sure if that will put the Account number into each of the contacts, but it is worth a try. If it doesn't work, you could try putting a model action on your child model that updates field on rows when the model is requeried. You would set it to update the parent ID. Then in your actions on your button you would save the child model, requery the child model, then save the child model again. The difference here is that the model action will effect all rows in the model simultaneously.
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
ksumner,

When you add your Contact model, set the AccountId field on this model to be the Id of the Account model.  Skuid assigns a temporary 'Id' number for each record created (i.e. 1, 2, 3, 4, 5...).  Your Save button needs to save both models.  Skuid handles updating the 1, 2, 3, 4, 5 with the correct Salesforce Id (in this case the AccountId will be set for each Contact)

Here is a screenshot of the condition.



Here is my sample page:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" tabtooverride="Account">   <models>
      <model id="Account" limit="1" query="false" createrowifnonefound="true" sobject="Account" adapter="" type="">
         <fields>
            <field id="Name"/>
            <field id="CreatedDate"/>
            <field id="Phone"/>
            <field id="ParentId"/>
            <field id="Parent.Name"/>
            <field id="Description"/>
         </fields>
         <conditions/>
         <actions/>
      </model>
      <model id="Contacts" limit="20" query="false" createrowifnonefound="false" adapter="" type="" sobject="Contact">
         <fields>
            <field id="FirstName"/>
            <field id="LastName"/>
            <field id="Phone"/>
         </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-2FOd1P-76">
         <maintitle>
            <template>{{Name}}</template>
         </maintitle>
         <subtitle>
            <template>{{Model.label}}</template>
         </subtitle>
         <actions>
            <action type="multi" window="self" label="Save" icon="sk-icon-save">
               <actions>
                  <action type="save">
                     <models>
                        <model>Account</model>
                        <model>Contacts</model>
                     </models>
                  </action>
                  <action type="redirect" window="self" url="/{{$Model.Account.data.0.Id}}"/>
               </actions>
            </action>
            <action type="multi" label="Cancel" icon="sk-icon-cancel">
               <actions>
                  <action type="cancel">
                     <models>
                        <model>Account</model>
                        <model>Contacts</model>
                     </models>
                  </action>
                  <action type="redirect" window="self" url="/001"/>
               </actions>
            </action>
         </actions>
      </pagetitle>
      <basicfieldeditor showsavecancel="false" showheader="true" model="Account" mode="edit" uniqueid="sk-2FOd1P-77" buttonposition="">
         <columns>
            <column width="50%">
               <sections>
                  <section title="Basics" collapsible="no">
                     <fields>
                        <field id="Name" valuehalign="" type=""/>
                     </fields>
                  </section>
               </sections>
            </column>
            <column width="50%">
               <sections>
                  <section title="Phone" collapsible="no">
                     <fields>
                        <field id="Phone" valuehalign="" type=""/>
                     </fields>
                  </section>
               </sections>
            </column>
         </columns>
      </basicfieldeditor>
      <template multiple="false" uniqueid="sk-2FPbHS-157" allowhtml="true">
         <contents>&lt;div class="nx-basicfieldeditor-section-header"&gt;Contacts&lt;/div&gt;</contents>
      </template>
      <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Contacts" buttonposition="" mode="read" uniqueid="sk-VB5Gs-199">
         <fields>
            <field id="FirstName" valuehalign="" type=""/>
            <field id="LastName" valuehalign="" type=""/>
            <field id="Phone"/>
         </fields>
         <rowactions>
            <action type="edit"/>
            <action type="delete"/>
         </rowactions>
         <massactions usefirstitemasdefault="true">
            <action type="massupdate"/>
            <action type="massdelete"/>
         </massactions>
         <views>
            <view type="standard"/>
         </views>
         <actions defaultlabel="Global Actions" defaulticon="sk-icon-magic" usefirstitemasdefault="true">
            <action type="createrow" appendorprepend="prepend"/>
         </actions>
      </skootable>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript/>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>
Thanks,

Bill
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
I didn't know Skuid did that! Thanks, Bill!
Photo of ksumner

ksumner

  • 120 Points 100 badge 2x thumb
This is awesome!   Thank you Bill.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Here is a tutorial that explains all this:   http://help.skuid.com/m/components/l/102570-the-wizard-component-create-new-contact-wizard

The tutorial talks about a wizard,  but the same concepts can be applied in a single page.