Has anyone built an accordion component?

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

Hey Bill,

An according like this: https://jqueryui.com/accordion/

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