Link Accordion to Model

John DahlbergJohn Dahlberg ✭✭✭✭
edited April 2, 2019 in Ideas
It would be very helpful to tie an accordion component (in Spark) to a Skuid model.  An example use case would be an FAQ page that interacts with knowledge.  It looks like that's the desired capability given the fact that the context tab is in the page builder.
1
1 votes

Awaiting Review · Last Updated

Comments

  • Luzie BaumgartLuzie Baumgart 🛠️ 
    edited March 29, 2019
    Hi John, thanks for the suggestion, can you share some more details about the idea? Then I can bring this to our product team :-)
  • John DahlbergJohn Dahlberg ✭✭✭✭
    edited March 29, 2019
    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}}

  • Jer CarpenterJer Carpenter ✭✭
    edited July 31, 2019
    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">
    <models>
    <model id="Accounts" limit="5" query="true" createrowifnonefound="false" datasource="salesforce"
    sobject="Account">
    <fields>
    <field id="RecordTypeId"/>
    <field id="Name"/>
    <field id="Type"/>
    </fields>
    <conditions/>
    <actions/>
    </model>
    <model id="Opportunities" query="true" createrowifnonefound="false" datasource="salesforce"
    sobject="Opportunity">
    <fields>
    <field id="AccountId"/>
    <field id="Account.Name"/>
    <field id="Name"/>
    </fields>
    <conditions/>
    <actions/>
    </model>
    </models>
    <components>
    <skuid__deck columnGutter=".75em" rowGutter=".75em" model="Accounts" showSaveCancel="false" verticalAlign="top"
    minWidth="350px" uniqueid="sk-3UO6-72" pageSize="10" setMaxWidth="auto">
    <components>
    <skuid__accordion uniqueid="sk-3UO9-75">
    <sections>
    <section title="{{Name}}">
    <components>
    <skuid__list model="Opportunities" uniqueid="sk-3UPv-94" pageSize="Infinity"
    showLoadMore="false" showListHeader="false" showListFooter="false">
    <columns>
    <column uniqueid="sk-3UQ8-107">
    <items>
    <item fieldId="Name" uniqueid="sk-3UQ8-106"/>
    </items>
    </column>
    </columns>
    <rowActions/>
    <massActions/>
    <filtering enableSearch="false" instantSearch="false"/>
    <conditions>
    <condition type="contextrow" field="AccountId" mergefield="Id" operator="="
    fieldtargetobjects="Account"/>
    </conditions>
    <interactions/>
    </skuid__list>
    </components>
    </section>
    </sections>
    <styles>
    <spacing/>
    </styles>
    <renderConditions logictype="and"/>
    </skuid__accordion>
    </components>
    <filtering enableSearch="false" instantSearch="false"/>
    <styles>
    <spacing top="5" bottom="5" left="5" right="5"/>
    </styles>
    </skuid__deck>
    </components>
    <resources>
    <labels/>
    <javascript/>
    <css/>
    <actionsequences uniqueid="sk-3UO2-69"/>
    </resources>
    <styles>
    <styleitem type="background" bgtype="none"/>
    </styles>
    </skuid__page>
  • John DahlbergJohn Dahlberg ✭✭✭✭
    edited April 2, 2019
    That's pretty creative.  I think this will work for us.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!