Josef,
Can you share a screen shot of what you mean by accordion component? I think my answer is ‘No’, but I am not sure I know what you are asking.
Thanks,
Bill
Hi Joe. Here is some XML demonstrating a simple way to make a declarative collapsible wrapper.
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
<models/>
<components>
<grid uniqueid="sk-3Osk-929">
<divisions>
<division behavior="flex" minwidth="100px" ratio="1">
<components/>
</division>
<division behavior="fit" verticalalign="top">
<components>
<wrapper uniqueid="sk-3Or0-249">
<components>
<wrapper uniqueid="sk-3OsA-744">
<components>
<template multiple="false" uniqueid="sk-3Or2-263">
<contents>Click here!</contents>
</template>
</components>
<styles>
<styleitem type="background" bgtype="color">
<styles>
<styleitem property="background-color" value="#fdeada"/>
</styles>
</styleitem>
<styleitem type="border" borders="all" padding="all">
<styles>
<styleitem property="border" value="2px solid black"/>
<styleitem property="padding" value="8px"/>
<styleitem property="box-sizing" value="border-box"/>
</styles>
</styleitem>
<styleitem type="size" width="custom">
<styles>
<styleitem property="min-width" value="8px"/>
</styles>
</styleitem>
<styleitem property="border-radius" value="4px"/>
</styles>
</wrapper>
</components>
<styles>
<styleitem type="background" bgtype="color">
<styles>
<styleitem property="background-color" value="#4f81bd"/>
</styles>
</styleitem>
<styleitem type="border" padding="all">
<styles>
<styleitem property="padding" value="16px"/>
<styleitem property="box-sizing" value="border-box"/>
</styles>
</styleitem>
<styleitem type="size" width="collapse">
<styles>
<styleitem property="width" value="-webkit-fit-content"/>
<styleitem property="width" value="-moz-fit-content"/>
<styleitem property="-ms-grid-columns" value="min-content"/>
<styleitem property="display" value="table"/>
</styles>
</styleitem>
<styleitem property="border-radius" value="8px"/>
</styles>
<interactions>
<interaction type="tap">
<action type="toggleRenderComponent" behavior="toggle" componentid="sk-3Or2-263"/>
</interaction>
</interactions>
</wrapper>
</components>
</division>
<division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
<components/>
</division>
</divisions>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</grid>
</components>
<resources>
<labels/>
<javascript/>
<css/>
<actionsequences uniqueid="sk-3OrW-490"/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>
Also, here’s a slightly fancier version of the above, with a model on Accounts, to show how some branching logic and a UI-only checkbox could be used for further UI fine-tuning:
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
<models>
<model id="Acc" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Account">
<fields>
<field id="RecordTypeId"/>
<field id="Name"/>
</fields>
<conditions/>
<actions/>
</model>
<model id="UI" limit="20" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">
<fields>
<field id="ShowAccounts" displaytype="BOOLEAN" label="ShowAccounts" ogdisplaytype="TEXT" defaultvaluetype="fieldvalue" defaultValue="true"/>
</fields>
<conditions/>
<actions/>
</model>
</models>
<components>
<grid uniqueid="sk-3Osk-929">
<divisions>
<division behavior="flex" minwidth="100px" ratio="1">
<components/>
</division>
<division behavior="fit" verticalalign="top">
<components>
<wrapper uniqueid="sk-3Or0-249">
<components>
<template multiple="false" uniqueid="sk-3Or2-263" model="UI">
<contents>{{#ShowAccounts}}Hide {{/ShowAccounts}}{{^ShowAccounts}}Show {{/ShowAccounts}}Accounts</contents>
<renderconditions logictype="and"/>
</template>
<wrapper uniqueid="sk-3OsA-744">
<components>
<queue model="Acc" tagrendertype="template" searchbox="true" tokenizesearch="true" showsearchbydefault="false" hideheader="true" hidefooter="true" uniqueid="sk-3Ou5-325">
<rendertemplate>{{Name}}</rendertemplate>
<interactions/>
<searchfields/>
</queue>
</components>
<styles>
<styleitem type="background" bgtype="color">
<styles>
<styleitem property="background-color" value="#fdeada"/>
</styles>
</styleitem>
<styleitem type="border" borders="all" padding="all">
<styles>
<styleitem property="border" value="2px solid black"/>
<styleitem property="padding" value="8px"/>
<styleitem property="box-sizing" value="border-box"/>
</styles>
</styleitem>
<styleitem type="size" width="custom">
<styles>
<styleitem property="min-width" value="8px"/>
</styles>
</styleitem>
<styleitem property="border-radius" value="4px"/>
</styles>
</wrapper>
</components>
<styles>
<styleitem type="background" bgtype="color">
<styles>
<styleitem property="background-color" value="#4f81bd"/>
</styles>
</styleitem>
<styleitem type="border" padding="all">
<styles>
<styleitem property="padding" value="16px"/>
<styleitem property="box-sizing" value="border-box"/>
</styles>
</styleitem>
<styleitem type="size" width="collapse">
<styles>
<styleitem property="width" value="-webkit-fit-content"/>
<styleitem property="width" value="-moz-fit-content"/>
<styleitem property="-ms-grid-columns" value="min-content"/>
<styleitem property="display" value="table"/>
</styles>
</styleitem>
<styleitem property="border-radius" value="8px"/>
</styles>
<interactions>
<interaction type="tap">
<action type="toggleRenderComponent" behavior="toggle" componentid="sk-3OsA-744"/>
<action type="branch" whenfinished="stop" model="UI">
<iftrueactions>
<action type="updateRow" fieldmodel="UI" affectedrows="context" field="ShowAccounts" enclosevalueinquotes="false" value="false"/>
</iftrueactions>
<formula>{{ShowAccounts}}</formula>
</action>
<action type="branch" whenfinished="stop" model="UI">
<formula>{{ShowAccounts}} != true</formula>
<iftrueactions>
<action type="updateRow" fieldmodel="UI" affectedrows="context" field="ShowAccounts" enclosevalueinquotes="false" value="true"/>
</iftrueactions>
</action>
</interaction>
</interactions>
</wrapper>
</components>
</division>
<division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
<components/>
</division>
</divisions>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</grid>
</components>
<resources>
<labels/>
<javascript/>
<css/>
<actionsequences uniqueid="sk-3OrW-490"/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>
Josef,
Mark’s solution keeps things declarative. You can have each Wrapper interaction close the other sections to achieve the same opening/closing effect that you see in the link you reference.
Barry Schnell has built a ‘Collapsible Wrapper Component’. It has the show/hide feature built in and links into the Action Framework. You can find it here:
https://community.skuid.com/t/collapsible-wrapper-custom-component
Thanks,
Bill