How could I create a tab for each record in a model?

  • 1
  • Question
  • Updated 2 years ago
I have a parent model with a child model that has one or several (up to about five) records. I want a page that shows some parent info at the top, a set of fields and UI-only fields on each child, and actions that execute making changes to any/all of the parent and child model records. I'd love to show a field editor with the parent model, then tab set below that with a tab for each record in the child model, each with an identical content for that record. I guess what I'd ideally want seems to be a cross between a tab set and a queue, where I can show model records across multiple tabs and save them all with a single button at the top of the page.

  • I thought about using a table with drawers, but the necessary field editor for the child model is too impractical to render as a table drawer, and the table will look silly with only the "name" column or only one record.
  • A queue would get me the dynamic navigation list, though it is only on the side (right?) and would require using a page include such that users would have to save each record/tab separately (right?), which becomes very clumsy for the functionality I want.
  • I considered just making a field editor that repeatedly renders for each child record (vertically on the page) instead of tabs. I'd say that normally would be a fine compromise. However, I actually need a panel set with some columns and rich text fields for each child record, and there doesn't seem to be a way to make such a component repeat for each child record.
Is there a way to create a dynamically generated tab set (or it's equivalent) as a UI for my child model?
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb

Posted 2 years ago

  • 1
Photo of susan.nordquist

susan.nordquist

  • 354 Points 250 badge 2x thumb
I also was looking to implement a design that needed to create a tab for each record.  I instead used a field editor combined with a queue to make this happen, similar to your middle bullet but without the user having to remember to save:

(you would still be stuck with the vertical list that queues offer, but it gives you all the functionality needed)

For example, say you want to load an account page and have access to each account contact:

Create three models:
Account - loads single account record
Contacts - loads all contacts related to account
ActiveContact - create a condition where ID= specified value with nothing listed, then set to filterable default off.
Add a queue to the page using the contacts model. For the actions, have it save the ActiveContact model(this is important!), set the condition so the ActiveContact ID = ID (from queue), and then re-query the ActiveContact model.
Then add a field editor or whatever else you would have put on the tabs as referencing the ActiveContact. 

Here's the XML for a simple page:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">    <models>
        <model id="Account" limit="20" query="true" createrowifnonefound="false" adapter="salesforce" type="" sobject="Account">
            <fields>
                <field id="Id"/>
                <field id="Name"/>
            </fields>
            <conditions>
                <condition type="param" value="Id" field="Id" operator="=" enclosevalueinquotes="true" novaluebehavior="noquery"/>
            </conditions>
            <actions/>
        </model>
        <model id="Contacts" limit="" query="true" createrowifnonefound="false" adapter="salesforce" type="" sobject="Contact">
            <fields>
                <field id="Id"/>
                <field id="AccountId"/>
                <field id="Account.Name"/>
                <field id="Name"/>
            </fields>
            <conditions>
                <condition type="modelmerge" value="" field="AccountId" operator="=" model="Account" enclosevalueinquotes="true" mergefield="Id" novaluebehavior="noquery"/>
            </conditions>
            <actions/>
        </model>
        <model id="ActiveContact" limit="1" query="false" createrowifnonefound="false" adapter="salesforce" type="" sobject="Contact">
            <fields>
                <field id="Id"/>
                <field id="Birthdate"/>
                <field id="Phone"/>
                <field id="Description"/>
                <field id="Department"/>
                <field id="HasOptedOutOfEmail"/>
                <field id="FirstName"/>
                <field id="LastName"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="Id" operator="=" state="filterableoff" inactive="true" name="Id"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="Account" uniqueid="sk-575jP-238">
            <maintitle>
                <template>{{Name}}</template>
            </maintitle>
            <subtitle>
                <template>{{Model.label}}</template>
            </subtitle>
            <actions/>
        </pagetitle>
        <panelset type="standard" uniqueid="sk-57AI3-242" scroll="">
            <panels>
                <panel type="left" width="225px">
                    <components>
                        <queue tagrendertype="template" querystring="id={{Id}}" defaultitemparameter="id" clickactiontype="multi" searchbox="false" tokenizesearch="true" model="Contacts" uniqueid="sk-57BcQ-248" searchmethod="server" title="Contacts">
                            <rendertemplate>{{{Name}}}</rendertemplate>
                            <searchfields/>
                            <actions>
                                <action type="save">
                                    <models>
                                        <model>ActiveContact</model>
                                    </models>
                                </action>
                                <action type="setCondition" model="ActiveContact" condition="Id" value="{{Id}}"/>
                                <action type="requeryModel" model="ActiveContact" behavior="standard"/>
                            </actions>
                        </queue>
                    </components>
                </panel>
                <panel>
                    <components>
                        <basicfieldeditor showheader="true" showsavecancel="true" showerrorsinline="true" model="ActiveContact" buttonposition="" uniqueid="sk-57CZp-251" mode="read">
                            <columns>
                                <column width="50%">
                                    <sections>
                                        <section title="Section A" collapsible="no" showheader="false">
                                            <fields>
                                                <field id="FirstName" valuehalign="" type=""/>
                                                <field id="LastName" valuehalign="" type=""/>
                                                <field id="Phone"/>
                                                <field id="Description"/>
                                            </fields>
                                        </section>
                                    </sections>
                                </column>
                                <column width="50%">
                                    <sections>
                                        <section title="Section B" collapsible="no" showheader="false">
                                            <fields>
                                                <field id="Birthdate" valuehalign="" type=""/>
                                                <field id="Department" valuehalign="" type=""/>
                                                <field id="HasOptedOutOfEmail" valuehalign="" type=""/>
                                            </fields>
                                        </section>
                                    </sections>
                                </column>
                            </columns>
                        </basicfieldeditor>
                    </components>
                </panel>
            </panels>
        </panelset>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of Bill McCullough

Bill McCullough, Champion

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

How about a custom table view?  You can create your own 'card' with the fields you want and a single save button would handle committing changes to Salesforce (plus you'd get the other table 'goodies' such as filtering, searching; etc.).

https://docs.skuid.com/latest/en/skuid/javascript/snippets/table-custom-views.html

Thanks,

Bill