Has anyone built an accordion component?

edited February 4, 2020 in Questions

Comments

  • Bill McCulloughBill McCullough 💎💎
    edited July 27, 2018
    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
  • edited July 26, 2018
    Hey Bill,

    An according like this: https://jqueryui.com/accordion/
  • Mark DeSimoneMark DeSimone 🛠️ 
    edited February 4, 2020
    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>
  • Mark DeSimoneMark DeSimone 🛠️ 
    edited February 4, 2020
    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>
  • Bill McCulloughBill McCullough 💎💎
    edited July 27, 2018
    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/skuid/topics/collapsible-wrapper-custom-component

    Thanks,

    Bill
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!