Hi, I’m wondering if anyone was ever able to accomplish this request i just got:
Model has usually max 1-4 records being returned and want to be able to see the details of each record in separate tabs.
Would be the exact same fields/layout…
But instead of a table and a popup/drawer to show the record details, on tab component, to show 1 record per tab.
Let me know
Thx 
Page 1 / 2
What’s the max number of records? 4 records?
Correct. So a max of 4 tabs
Easy to do with a snippet and 4 models.
By any chance would you have more details or a sample of the snippet?
Easier to just GTM. Tomorrow evening?
You can reference the fields from a certain row in a model using this format. Replace Model Name in, your Row Number and your field name in the merge variable below, then put it in a template component or rich text component and put that in your tab. If you need to perform actions on the data, put the rich text or template component in a deck and use deck actions. Row models start a zero so your first tab would use row zero, your second tab would use row one, your third tab row 2, and your fourth tab row 3.
{{$Model.YourModelNameHere.data.YourModelRowNumberHere.YourFieldNameHere}}
How do you need to interact with the records? Edit? Read only? Also, do you want the tabs to condionally render?
Hey Pat,
Yes it needs to be editable and preferably render the tabs, as some could have 1 record and others up to 4.
Then a GTM is best. Tonight after 9?
ok I’ll do my best, I promised the wife to take her out 
But will do my best to make it around that time and go on skype, i think i have you there already.
Thx a lot!
I wouldn’t use a tabset, I would just use some decks since they are the best component for showing X components when you have X records. In this case, have 1 deck that acts like the tabs on top (show 1 actionable ‘tab’ for each record in the model). Have another deck based on a UI-Only model that shows the ‘tab contents’ using context based on which tab is selected. This is using Millauu and SFDC as DST.
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" useviewportmeta="true" showheader="false">
<models>
<model id="Oppty" limit="5" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Opportunity">
<fields>
<field id="Id"/>
<field id="Name"/>
<field id="StageName"/>
<field id="CloseDate"/>
<field id="Amount"/>
<field id="isSelected" uionly="true" displaytype="BOOLEAN" label="isSelected" ogdisplaytype="TEXT" defaultvaluetype="fieldvalue" defaultValue="false"/>
<field id="index" uionly="true" displaytype="FORMULA" label="index" ogdisplaytype="TEXT" readonly="true" returntype="DOUBLE" precision="9" scale="0">
<formula>{{index}}</formula>
</field>
<field id="selectfirst" uionly="true" displaytype="BOOLEAN" label="selectfirst" ogdisplaytype="TEXT"/>
</fields>
<conditions/>
<actions>
<action>
<actions>
<action type="branch" whenfinished="stop">
<formula>{{index}}==1</formula>
<iftrueactions>
<action type="updateRow" fieldmodel="Oppty" affectedrows="context" field="isSelected" enclosevalueinquotes="true" value="true"/>
</iftrueactions>
</action>
</actions>
<events>
<event>row.updated</event>
</events>
<fields>
<field>selectfirst</field>
</fields>
</action>
</actions>
</model>
<model id="uiSelectedTab" limit="20" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">
<fields>
<field id="oppid" displaytype="TEXT" label="oppid" defaultvaluetype="fieldvalue" defaultValue="0061D000003s0OaQAI"/>
</fields>
<conditions/>
<actions/>
</model>
</models>
<components>
<deck searchmethod="server" searchbox="true" columngutter=".75em" rowgutter=".75em" model="uiSelectedTab" filtersposition="top" filterswidth="150px" showsavecancel="false" behavior="flex" verticalalign="top" ratio="1" minwidth="100%" hideheader="true" hidefooter="true" uniqueid="tabdeck" pagesize="10">
<components>
<wrapper uniqueid="sk-73D-999">
<components>
<deck searchmethod="server" searchbox="true" columngutter="0.25em" rowgutter="0.25em" model="Oppty" filtersposition="top" filterswidth="150px" showsavecancel="false" behavior="flex" verticalalign="top" ratio="1" minwidth="20%" hideheader="true" hidefooter="true" uniqueid="sk-72P-611" pagesize="10" setmaxwidth="manual" maxwidth="20%">
<components>
<wrapper uniqueid="sk-7A8-2542">
<components>
<template multiple="false" uniqueid="sk-72v-761" allowhtml="true">
<contents>&lt;span style="color:white"&gt;{{{Name}}}&lt;/span&gt;</contents>
<conditions>
<condition type="contextrow" field="Id" mergefield="Id"/>
</conditions>
</template>
</components>
<styles>
<styleitem type="background" bgtype="color">
<styles>
<styleitem property="background-color" value="#8e949e"/>
</styles>
</styleitem>
<styleitem type="border" padding="all" borders="all">
<styles>
<styleitem property="border" value="1px solid black"/>
<styleitem property="padding" value="8px"/>
<styleitem property="box-sizing" value="border-box"/>
</styles>
</styleitem>
<styleitem type="size"/>
</styles>
<renderconditions logictype="and">
<rendercondition type="fieldvalue" operator="!=" enclosevalueinquotes="false" fieldmodel="Oppty" sourcetype="fieldvalue" field="isSelected" fieldtargetobjects="Opportunity" value="true"/>
</renderconditions>
</wrapper>
<wrapper uniqueid="sk-7AN-2701">
<components>
<template multiple="false" uniqueid="sk-7AN-2702" allowhtml="true">
<contents>&lt;span style="color:white"&gt;{{{Name}}}&lt;/span&gt;</contents>
<conditions>
<condition type="contextrow" field="Id" mergefield="Id"/>
</conditions>
</template>
</components>
<styles>
<styleitem type="background" bgtype="color">
<styles>
<styleitem property="background-color" value="black"/>
</styles>
</styleitem>
<styleitem type="border" padding="all" borders="all">
<styles>
<styleitem property="border" value="1px solid black"/>
<styleitem property="padding" value="8px"/>
<styleitem property="box-sizing" value="border-box"/>
</styles>
</styleitem>
<styleitem type="size"/>
</styles>
<renderconditions logictype="and">
<rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="Oppty" sourcetype="fieldvalue" field="isSelected" fieldtargetobjects="Opportunity" value="true"/>
</renderconditions>
</wrapper>
</components>
<massactions/>
<interactions>
<interaction type="tap" direction="either">
<action type="blockUI"/>
<action type="updateRow" fieldmodel="Oppty" affectedrows="all" field="isSelected" enclosevalueinquotes="true" value="false"/>
<action type="updateRow" fieldmodel="Oppty" affectedrows="context" field="isSelected" enclosevalueinquotes="true" value="true"/>
<action type="updateRow" fieldmodel="uiSelectedTab" affectedrows="context" field="oppid" enclosevalueinquotes="true" value="{{Id}}">
<models/>
<popup title="{{Model.label}}: {{Name}}" width="80%">
<components/>
</popup>
</action>
<action type="custom" snippet="renderDeckContents"/>
<action type="unblockUI"/>
</interaction>
</interactions>
<actions/>
<styles>
<styleitem type="border" borders="all" padding="all" margin="all">
<styles>
<styleitem property="border" value="0px solid transparent"/>
<styleitem property="padding" value="0px"/>
<styleitem property="margin" value="0px"/>
<styleitem property="box-sizing" value="border-box"/>
</styles>
</styleitem>
<styleitem property="border-radius" value="0px"/>
</styles>
<searchfields/>
<renderconditions logictype="and"/>
<conditions/>
</deck>
<pagetitle model="Oppty" uniqueid="sk-72B-496">
<maintitle>
<template>{{Name}}</template>
</maintitle>
<actions/>
<conditions>
<condition type="contextrow" field="Id" mergefield="oppid" operator="="/>
</conditions>
</pagetitle>
<basicfieldeditor showheader="true" showsavecancel="true" showerrorsinline="true" model="Oppty" uniqueid="sk-72E-546" mode="read">
<columns>
<column width="50%" uniqueid="sk-72E-542">
<sections>
 Isn’t this like the old Use Queue to show Rows, and Action to filter the other Model from the same Object to show the Data example?
This basically come’s down to:
- Use something to display the the Name of each row horizontally
- Action which updates the a second Model on the Tab selected
- Below the list is how you want your Tab Page to look like, use whatever components you want just make sure it's second model
Simply said: Just do exactly what you would do to show the popup, just don’t show the selected Entry/Tab/… in the Popup but on the same page.
Hey Dave,
You’ve got a whole load of viable solutions to choose from. It basically comes down to which provides the best user experience if it is of paramount importance. Does it need to look exactly like your other tabs on other pages? Does it need to have instant display of the record on tab click? If the answer to both is no then Matt Davis’ solution works fine. Especially since he provided the solution. 
Hey Pat,
sorry tried my best to make it last night but was not able.
But thank you all for all those diverse solutions, I will try them and update here my results!.
I appreciate the help!
How’d you make out with this?
Hey Pat, I tried Matt Davis’ solution and it seems to work well for me, just couple details I’m trying to figure out, a page include that uses a different parameter than the record id, so that may be an issue for now, and the other thing i’ll ask Matt is : is there a way to have the 1st record selected by default (without having to click on it)
Except for that, works like a charm!
Hey Matt, thank you very much for that detailed example, works very well!
1 quick thing, do you know if there would be a way to have the first record/tab/deck selected by default?
Thx!
Dunno about that question other than javascript almost can do what’s needed.
When you say have the first record selected, do you mean having the first “tab” show as selected for the first row?
Hey Matt,
yes sorry, I meant the first tab to show the first row by default.
Thx
I think that should be working for the demo page I threw in there. What I do is a bit funky but the general logic is…
- For the model, create a ui-only formula field (I’ll call it index) to track the row #. In the formula that’s just {{index}}
- For the model, create a ui-only checkbox field called selectFirstRow
- For the model, create a model action when selectFirstRow is updated that has a branch for “If index is 1, then check the isSelected box”
- On page load, create an action to update every selectFirstRow field to value = true
There’s probably a good JavaScript solution too since .getFirstRow() exists and makes things easier, but I tried to stick to declarative.
Hi Matt, unless I’m mistaken, all those steps are already on the demo page, and even on Demo page it does not load the first tab automatically, I still have to click it.
The part that I think is the problem i’m not able to solve, is to mimic the deck “Click” Action on page load
Let me know if missed anything
Thx
What version of Skuid are you on? At least in the latest version of Millauu, that page loads the first tab automatically for me.
on prod I’m not yet on milau, but tried the same test page above on my Sandbox which is on latest (12.1.6) and same issue. See screenshot below, the first tab is in 'Black" (which usually shows the selected tab) but unless I click on it physically, the data does not appear.
Can you add the xml from your page in here? I’m curious to see if there’s a difference between the two. Thanks!
Reply
View our Community Site Map
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.