Link Accordion to Model

Hi John, thanks for the suggestion, can you share some more details about the idea? Then I can bring this to our product team 🙂

I suspect this is already on the radar for the product team based on a couple indications in the page builder.  There’s a field picker for the section header and when you add a component to the body context configuration shows up.  I suspect it’s just functionality that isn’t ready yet.  

The basic idea is that the accordion should operation like a deck, queue or list, where the section headings and bodies are built from a model and using merge syntax to drive the content.  In the body, you’d have options to drop different components into the body to configure the display options.  

As a side note, you can workaround this with the existing component using global merge syntax like:

{{$Model.Account.data.0.Name}}
{{$Model.Account.data.1.Name}}
{{$Model.Account.data.2.Name}}

John,

I think if I’m understanding your question correctly, this should already be possible in Spark by placing the Accordion inside a Deck. The Accordion inherits the model context row for the purposes of merge, render conditions, etc. Take a look at the following page XML. Note that the “Section Heading” property contains merge syntax from the Accounts model on the Deck. This was tested with Skuid version 12.0.9 on Salesforce.

<skuid__page unsavedchangeswarning=“yes” personalizationmode=“server” showsidebar=“false” showheader=“false”>

 <model id=“Accounts” limit=“5” query=“true” createrowifnonefound=“false” datasource=“salesforce”
 sobject=“Account”>








 <model id=“Opportunities” query=“true” createrowifnonefound=“false” datasource=“salesforce”
 sobject=“Opportunity”>










 <skuid__deck columnGutter=“.75em” rowGutter=“.75em” model=“Accounts” showSaveCancel=“false” verticalAlign=“top”
 minWidth=“350px” uniqueid=“sk-3UO6-72” pageSize=“10” setMaxWidth=“auto”>

 <skuid__accordion uniqueid=“sk-3UO9-75”>



 <skuid__list model=“Opportunities” uniqueid=“sk-3UPv-94” pageSize=“Infinity”
 showLoadMore=“false” showListHeader=“false” showListFooter=“false”>











 <condition type=“contextrow” field=“AccountId” mergefield=“Id” operator=“=”
 fieldtargetobjects=“Account”/>


 </skuid__list>







 </skuid__accordion>





 </skuid__deck>

 

</skuid__page>

That’s pretty creative.  I think this will work for us.