Collapsible wrappers similar to field editor sections

  • 7
  • Idea
  • Updated 1 year ago
  • Planned
Would like to a way to create "collapsible" areas of the screen similar to the way that Field Editor Sections work.  For example, allow a "Wrapper" component to have a title and collapsible property (no, yes - open, yes - closed).

I've had this come up a lot lately as users like the way that field editors can be collapsed to save screen real-estate especially on more complex page.  Allowing things like tables, etc. to be placed in a collapsible section would be pretty slick.

I can see ways to accomplish this with code, possibly there is a way in the current release to accomplish declaratively?  If not, would love to see this added.

Thank you!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb

Posted 3 years ago

  • 7
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
This has certainly been discussed.  We've done this in javascript as a custom component, but we should probably wrap it up and release it as a real component... 
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
I like the way you think Rob!

Would be great to have an option to hide/show the "section header" as well similar to Field Editor sections.

Thanks!
Photo of Michael Tubbs

Michael Tubbs

  • 154 Points 100 badge 2x thumb
Could you post the source code for the custom component?
Photo of Ashwat

Ashwat

  • 768 Points 500 badge 2x thumb
@Rob - Since this post is older than a couple of years, has a real component been released?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
The component Barry has released below is most "feature rich" one currently available.  There are a few others out there too.   We have not put this component in our standard offering yet. 
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
I've written a collapsible wrapper custom component.  Would still like to see this functionality added to native functionality but in the meantime, see https://community.skuidify.com/skuid/topics/collapsible-wrapper-custom-component?rfm=1&topic_sub... for more information.
Photo of Jaime

Jaime

  • 1,220 Points 1k badge 2x thumb
will this also work in the mobile composer?
Photo of Jaime

Jaime

  • 1,220 Points 1k badge 2x thumb
Hey Barry...just fyi.  If this component is enabled for desktop and mobile it breaks the mobile composer.  By breaking I mean that in the mobile composer you can't configure any of the existing components.

This video shows you what I'm talking about.

http://screencast.com/t/IjwOdKqIHr
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hi Jaime - Thanks for testing in mobile. I feared it wouldn't work since I didn't code specifically to handle mobile but was interested to know for sure.  To be honest, I haven't done any work on mobile but I'll try to take a look to see what it would take to make CW work in mobile as well.  For now, as you found, best to only enable the tfg components for desktop pages.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Just a quick update - I took a look at why the tfg components "break" the mobile builder.  I have this part fixed already but unfortunately, there are other things that I need to adjust in order to have CW fully supported in mobile.  As of right now, the "official" word is tfgComponents will only work in desktop.  I hope when I have some time I can expand their support to include mobile.  Apologize for any inconvenience!
Photo of Jaime

Jaime

  • 1,220 Points 1k badge 2x thumb
Thanks for looking into this. We definitely have a need for this so as soon as you have something we can play with we would appreciate it if we can take an early look that would be great.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hi Jaime -

Definitely will let you know when/if I have something available.  

In the meantime, while the tfgComponents don't currently support mobile, I did just release a fix to correct the issue where the pack was breaking the mobile builder.  The pack should still be enabled for Desktop only but at least if it's enabled for mobile, it won't break the builder even though the components themselves won't work on a page.  Check out https://community.skuid.com/skuid/topics/collapsible-wrapper-custom-component?topic-reply-list%5Bset... for more information and to download the latest version.
Photo of susan.nordquist

susan.nordquist

  • 354 Points 250 badge 2x thumb
I spent some time faking the collapsible wrapper using a UI only model and conditional rendering.  Turned out not bad..

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true" theme="IceAgeFunctionalityTest">    <models>
        <model id="BlankModel" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true" unloadwarningifunsavedchanges="false">
            <fields>
                <field id="showBlue" displaytype="BOOLEAN" ogdisplaytype="TEXT" required="false" label="show blue" defaultvaluetype="fieldvalue" defaultValue="true"/>
                <field id="showGreen" displaytype="BOOLEAN" label="showGreen" ogdisplaytype="TEXT" defaultvaluetype="fieldvalue" defaultValue="true"/>
                <field id="showOrange" displaytype="BOOLEAN" label="showOrange" ogdisplaytype="TEXT" defaultvaluetype="fieldvalue" defaultValue="true"/>
            </fields>
            <conditions/>
            <actions>
                <action>
                    <actions>
                        <action type="save" sourcemodel="BlankModel" targetmodel="BlankModel" affectedrows="context">
                            <models>
                                <model>BlankModel</model>
                            </models>
                        </action>
                    </actions>
                    <events>
                        <event>row.updated</event>
                    </events>
                </action>
            </actions>
        </model>
    </models>
    <components>
        <panelset type="standard" uniqueid="sk-2XMJ05-434" scroll="">
            <panels>
                <panel type="left" width="225px">
                    <components>
                        <wrapper uniqueid="sk-2XMKY6-440">
                            <components>
                                <navigation uniqueid="sk-2XXoLG-579" type="dropdown" useicon="true">
                                    <navigationitems>
                                        <navigationitem label="Show All">
                                            <actions>
                                                <action type="updateRow" window="self" fieldmodel="BlankModel" affectedrows="context" field="showBlue" enclosevalueinquotes="true" value="true"/>
                                                <action type="updateRow" fieldmodel="BlankModel" affectedrows="context" field="showGreen" enclosevalueinquotes="true" value="true"/>
                                                <action type="updateRow" fieldmodel="BlankModel" affectedrows="context" field="showOrange" enclosevalueinquotes="true" value="true"/>
                                            </actions>
                                        </navigationitem>
                                        <navigationitem label="Hide All">
                                            <actions>
                                                <action type="updateRow" window="self" fieldmodel="BlankModel" affectedrows="context" field="showBlue" enclosevalueinquotes="true" value="false"/>
                                                <action type="updateRow" window="self" fieldmodel="BlankModel" affectedrows="context" field="showGreen" enclosevalueinquotes="true" value="false"/>
                                                <action type="updateRow" window="self" fieldmodel="BlankModel" affectedrows="context" field="showOrange" enclosevalueinquotes="true" value="false"/>
                                            </actions>
                                        </navigationitem>
                                    </navigationitems>
                                    <styles/>
                                    <renderconditions logictype="and"/>
                                </navigation>
                            </components>
                            <styles>
                                <styleitem type="background"/>
                                <styleitem type="border"/>
                                <styleitem type="size"/>
                            </styles>
                        </wrapper>
                    </components>
                </panel>
                <panel>
                    <components>
                        <wrapper uniqueid="sk-2XWTmx-398">
                            <components>
                                <wrapper uniqueid="sk-2XWav_-432">
                                    <components>
                                        <grid uniqueid="sk-2XWgvg-450">
                                            <divisions>
                                                <division behavior="flex" minwidth="100px" ratio="1">
                                                    <components/>
                                                </division>
                                                <division behavior="fit" verticalalign="top">
                                                    <components>
                                                        <navigation uniqueid="sk-2XWjvy-457" icon="" overflowtomenu="false">
                                                            <navigationitems>
                                                                <navigationitem icon="fa-chevron-up">
                                                                    <actions>
                                                                        <action type="updateRow" window="self" fieldmodel="BlankModel" affectedrows="context" field="showBlue" enclosevalueinquotes="true" value="true"/>
                                                                    </actions>
                                                                    <renderconditions logictype="and">
                                                                        <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="BlankModel" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="showBlue" value="false"/>
                                                                    </renderconditions>
                                                                </navigationitem>
                                                                <navigationitem icon="fa-chevron-down">
                                                                    <actions>
                                                                        <action type="updateRow" window="self" fieldmodel="BlankModel" affectedrows="context" field="showBlue" enclosevalueinquotes="true" value="false"/>
                                                                    </actions>
                                                                    <renderconditions logictype="and">
                                                                        <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="BlankModel" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="showBlue" value="true"/>
                                                                    </renderconditions>
                                                                </navigationitem>
                                                            </navigationitems>
                                                        </navigation>
                                                    </components>
                                                </division>
                                            </divisions>
                                            <styles>
                                                <styleitem type="background" bgtype="none"/>
                                            </styles>
                                        </grid>
                                    </components>
                                    <styles>
                                        <styleitem type="background" bgtype="color">
                                            <styles>
                                                <styleitem property="background-color" value="#d8d8d8"/>
                                            </styles>
                                        </styleitem>
                                        <styleitem type="border"/>
                                        <styleitem type="size" height="custom">
                                            <styles>
                                                <styleitem property="min-height" value="30px"/>
                                            </styles>
                                        </styleitem>
                                    </styles>
                                </wrapper>
                                <wrapper uniqueid="sk-2XW9r2-363">
                                    <components/>
                                    <styles>
                                        <styleitem type="background" bgtype="color">
                                            <styles>
                                                <styleitem property="background-color" value="#dbeef3"/>
                                            </styles>
                                        </styleitem>
                                        <styleitem type="border"/>
                                        <styleitem type="size" height="custom">
                                            <styles>
                                                <styleitem property="min-height" value="80px"/>
                                            </styles>
                                        </styleitem>
                                    </styles>
                                    <renderconditions logictype="and">
                                        <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="BlankModel" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="showBlue" value="true"/>
                                    </renderconditions>
                                </wrapper>
                                <wrapper uniqueid="sk-2XTybb-139">
                                    <components>
                                        <grid uniqueid="sk-2XVBOw-288">
                                            <divisions>
                                                <division behavior="flex" minwidth="100px" ratio="1">
                                                    <components>
                                                        <pagetitle uniqueid="sk-2XT_GB-148" model="BlankModel">
                                                            <maintitle>Wrapper name</maintitle>
                                                            <actions/>
                                                        </pagetitle>
                                                    </components>
                                                </division>
                                                <division behavior="fit" verticalalign="top">
                                                    <components>
                                                        <navigation uniqueid="sk-2XVEuA-299" icon="" overflowtomenu="false">
                                                            <navigationitems>
                                                                <navigationitem icon="fa-chevron-up">
                                                                    <actions>
                                                                        <action type="updateRow" window="self" fieldmodel="BlankModel" affectedrows="context" field="showGreen" enclosevalueinquotes="true" value="true"/>
                                                                    </actions>
                                                                    <renderconditions logictype="and">
                                                                        <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="BlankModel" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="showGreen" value="false"/>
                                                                    </renderconditions>
                                                                </navigationitem>
                                                                <navigationitem icon="fa-chevron-down">
                                                                    <actions>
                                                                        <action type="updateRow" window="self" fieldmodel="BlankModel" affectedrows="context" field="showGreen" enclosevalueinquotes="true" value="false"/>
                                                                    </actions>
                                                                    <renderconditions logictype="and">
                                                                        <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="BlankModel" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="showGreen" value="true"/>
                                                                    </renderconditions>
                                                                </navigationitem>
                                                            </navigationitems>
                                                        </navigation>
                                                    </components>
                                                </division>
                                            </divisions>
                                            <styles>
                                                <styleitem type="background" bgtype="none"/>
                                            </styles>
                                        </grid>
                                    </components>
                                    <styles>
                                        <styleitem type="background" bgtype="color">
                                            <styles>
                                                <styleitem property="background-color" value="#d8d8d8"/>
                                            </styles>
                                        </styleitem>
                                        <styleitem type="border" padding="none" margin="top,">
                                            <styles>
                                                <styleitem property="margin-top" value="20px"/>
                                                <styleitem property="box-sizing" value="border-box"/>
                                            </styles>
                                        </styleitem>
                                        <styleitem type="size"/>
                                    </styles>
                                </wrapper>
                                <wrapper uniqueid="sk-2XMLfq-454" cssclass="">
                                    <components/>
                                    <styles>
                                        <styleitem type="background" bgtype="color">
                                            <styles>
                                                <styleitem property="background-color" value="#ebf1dd"/>
                                            </styles>
                                        </styleitem>
                                        <styleitem type="border"/>
                                        <styleitem type="size" height="custom">
                                            <styles>
                                                <styleitem property="min-height" value="800px"/>
                                            </styles>
                                        </styleitem>
                                    </styles>
                                    <renderconditions logictype="and">
                                        <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="BlankModel" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="showGreen" value="true"/>
                                    </renderconditions>
                                </wrapper>
                                <wrapper uniqueid="sk-2XTybb-139">
                                    <components>
                                        <grid uniqueid="sk-2XVBOw-288">
                                            <divisions>
                                                <division behavior="flex" minwidth="100px" ratio="1">
                                                    <components>
                                                        <pagetitle uniqueid="sk-2XT_GB-148" model="BlankModel">
                                                            <maintitle>Wrapper name</maintitle>
                                                            <actions/>
                                                        </pagetitle>
                                                    </components>
                                                </division>
                                                <division behavior="fit" verticalalign="top">
                                                    <components>
                                                        <navigation uniqueid="sk-2XVEuA-299" icon="" overflowtomenu="false" cssclass="floatLeft">
                                                            <navigationitems>
                                                                <navigationitem icon="fa-chevron-up">
                                                                    <actions>
                                                                        <action type="updateRow" window="self" fieldmodel="BlankModel" affectedrows="context" field="showOrange" enclosevalueinquotes="false" value="true"/>
                                                                    </actions>
                                                                    <renderconditions logictype="and">
                                                                        <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="BlankModel" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="showOrange" value="false"/>
                                                                    </renderconditions>
                                                                </navigationitem>
                                                                <navigationitem icon="fa-chevron-down">
                                                                    <actions>
                                                                        <action type="updateRow" window="self" fieldmodel="BlankModel" affectedrows="context" field="showOrange" enclosevalueinquotes="false" value="false"/>
                                                                    </actions>
                                                                    <renderconditions logictype="and">
                                                                        <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="BlankModel" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="showOrange" value="true"/>
                                                                    </renderconditions>
                                                                </navigationitem>
                                                            </navigationitems>
                                                            <styles/>
                                                        </navigation>
                                                    </components>
                                                </division>
                                            </divisions>
                                            <styles>
                                                <styleitem type="background" bgtype="none"/>
                                            </styles>
                                        </grid>
                                    </components>
                                    <styles>
                                        <styleitem type="background" bgtype="color">
                                            <styles>
                                                <styleitem property="background-color" value="#d8d8d8"/>
                                            </styles>
                                        </styleitem>
                                        <styleitem type="border" padding="none" margin="top,">
                                            <styles>
                                                <styleitem property="margin-top" value="20px"/>
                                                <styleitem property="box-sizing" value="border-box"/>
                                            </styles>
                                        </styleitem>
                                        <styleitem type="size"/>
                                    </styles>
                                </wrapper>
                                <wrapper uniqueid="sk-2XMLD_-447" cssclass="">
                                    <components/>
                                    <styles>
                                        <styleitem type="background" bgtype="color">
                                            <styles>
                                                <styleitem property="background-color" value="#fdeada"/>
                                            </styles>
                                        </styleitem>
                                        <styleitem type="border"/>
                                        <styleitem type="size" height="custom">
                                            <styles>
                                                <styleitem property="min-height" value="80px"/>
                                            </styles>
                                        </styleitem>
                                    </styles>
                                    <renderconditions logictype="and">
                                        <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="BlankModel" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="showOrange" value="true"/>
                                    </renderconditions>
                                </wrapper>
                            </components>
                            <styles>
                                <styleitem type="background"/>
                                <styleitem type="border" padding="all">
                                    <styles>
                                        <styleitem property="padding" value="20px"/>
                                        <styleitem property="box-sizing" value="border-box"/>
                                    </styles>
                                </styleitem>
                                <styleitem type="size"/>
                            </styles>
                        </wrapper>
                    </components>
                </panel>
            </panels>
        </panelset>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
    <interactions/>
    <pageregioncontents>
        <pageregioncontent uniqueid="__header">
            <components>
                <skuidheader sticky="true">
                    <components>
                        <navigation uniqueid="sk-2XMB0u-420">
                            <navigationitems>
                                <navigationitem label="In header">
                                    <actions>
                                        <action type="redirect" window="self"/>
                                    </actions>
                                </navigationitem>
                            </navigationitems>
                        </navigation>
                    </components>
                </skuidheader>
            </components>
        </pageregioncontent>
    </pageregioncontents>
</skuidpage>
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Very slick Susan!!