Collapsible Wrapper Custom Component

  • 17
  • Idea
  • Updated 3 months ago
  • (Edited)
There has been ongoing discussion recently to enhance the features currently available in the Field Editor "Section Header" as well as provide the same type of capability (section headers) for other components in the form of a collapsible wrapper.

In dire need of this type of functionality, I wrote a custom component that solves for most (hopefully all) of the use cases I've seen posted and decided to share it for anyone that might find it useful.

Disclaimer:
1) This component is not built by nor supported by Skuid so please don't ask them to fix anything that might be wrong with it :)
2) This component uses publicly exposed Skuid APIs, however a lot of them are not documented nor officially supported.  This means that in a future release, this component might break.  While it's unlikely that this would occur, it is possible so please be aware.
3) This component was just finished and has not gone through a full test cycle.  I did my best to use the Skuid APIs properly, however since they are not official nor documented, it's possible that there are use cases/scenarios that I have not accounted for.  If you find any issues please do let me know and I'll try to resolve as quickly as possible.
4) This is written for Skuid 7.x

Ok, enough with the formalities, let's dig in...

The Collapsible Wrapper Custom Component is the same thing as a Skuid Wrapper component except it also has a "Header" that has lots of customization options.  You can show a header, not show a header, conditionally show a header, show it open, show it closed, etc.  You can also use the action framework when wrapper opens, closes, etc.   You can also interact with the wrapper via it's API.

For a full introduction and details, please see the following videos:
Part 1 - https://youtu.be/szwOuDAQLsk
Part 2 - https://youtu.be/lYMTLg3Week

To install the TFG Custom Component pack:
1) Create a new Component pack with a prefix of "tfg" and Component Pack Label of "TFG Custom Components"
2) Upload the zip file from here to replace the default Static Resource created by Skuid for the pack

To Test out the collapsible wrapper (same demo page from the video)
1) Create a new page called "TFG Component Demo" using the Page XML from here
2) Preview the page

Feedback, issues, etc. appreciated.  Enjoy!

Screen Shots




Photo of Barry Schnell

Barry Schnell, Champion

  • 18,376 Points 10k badge 2x thumb

Posted 4 years ago

  • 17
Photo of Matt Davis

Matt Davis, Employee

  • 1,268 Points 1k badge 2x thumb
If anyone is on a version of Skuid that has wrappers with interactions (I believe 11.2 or later), you can accomplish somewhat similar with wrappers, actions, and a UI only model. It's basically just a wrapper with the title that toggles a checkbox that determines whether the table (or whatever else) is shown. Here's an example:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="UI_Rendering" limit="20" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">
            <fields>
                <field id="ShowAccountsList" displaytype="BOOLEAN" label="ShowAccountsList" ogdisplaytype="TEXT" defaultvaluetype="fieldvalue" defaultValue="false"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
        <model id="Account" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Account">
            <fields>
                <field id="Name"/>
                <field id="Id"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <wrapper uniqueid="sk-3eQE-247">
            <components>
                <wrapper uniqueid="sk-3eQH-263">
                    <components>
                        <grid uniqueid="sk-3eri-596">
                            <divisions>
                                <division behavior="fit" verticalalign="center">
                                    <components>
                                        <template multiple="false" uniqueid="sk-3erl-619" allowhtml="true">
                                            <contents>&lt;span class="ui-button-icon-primary ui-icon fa-caret-right sk-icon inline" style="font-size:24px"&gt;&lt;/span&gt;</contents>
                                            <renderconditions logictype="and">
                                                <rendercondition type="fieldvalue" operator="!=" enclosevalueinquotes="false" fieldmodel="UI_Rendering" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="ShowAccountsList" value="true"/>
                                            </renderconditions>
                                        </template>
                                        <template multiple="false" uniqueid="sk-3esN-830" allowhtml="true">
                                            <contents>&lt;span class="ui-button-icon-primary ui-icon fa-caret-down sk-icon inline" style="font-size:24px"&gt;&lt;/span&gt;</contents>
                                            <renderconditions logictype="and">
                                                <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="UI_Rendering" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="ShowAccountsList" value="true"/>
                                            </renderconditions>
                                        </template>
                                    </components>
                                </division>
                                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                                    <components>
                                        <pagetitle model="Account" uniqueid="sk-3eQF-258">
                                            <maintitle>Accounts List</maintitle>
                                            <actions/>
                                        </pagetitle>
                                    </components>
                                </division>
                            </divisions>
                            <styles>
                                <styleitem type="background" bgtype="none"/>
                            </styles>
                        </grid>
                    </components>
                    <styles>
                        <styleitem type="background" bgtype="none"/>
                        <styleitem type="border"/>
                        <styleitem type="size"/>
                        <styleitem property="cursor" value="pointer"/>
                    </styles>
                    <interactions>
                        <interaction type="tap">
                            <action type="branch" whenfinished="stop">
                                <formula>{{$Model.UI_Rendering.data.0.ShowAccountsList}}</formula>
                                <iftrueactions>
                                    <action type="updateRow" fieldmodel="UI_Rendering" affectedrows="context" field="ShowAccountsList" enclosevalueinquotes="true" value="false"/>
                                </iftrueactions>
                            </action>
                            <action type="updateRow" fieldmodel="UI_Rendering" affectedrows="context" field="ShowAccountsList" enclosevalueinquotes="true" value="true"/>
                        </interaction>
                    </interactions>
                </wrapper>
                <wrapper uniqueid="sk-3eQJ-276">
                    <components>
                        <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" hideheader="false" hidefooter="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="Account" buttonposition="" mode="read" allowcolumnreordering="true" responsive="true" uniqueid="sk-3eQd-394">
                            <fields>
                                <field id="Name" uniqueid="fi-3eQd-395"/>
                                <field id="Id" uniqueid="fi-3eQd-396"/>
                            </fields>
                            <rowactions>
                                <action type="edit"/>
                                <action type="delete"/>
                            </rowactions>
                            <massactions usefirstitemasdefault="true">
                                <action type="massupdate"/>
                                <action type="massdelete"/>
                            </massactions>
                            <views>
                                <view type="standard"/>
                            </views>
                        </skootable>
                    </components>
                    <styles>
                        <styleitem type="background"/>
                        <styleitem type="border"/>
                        <styleitem type="size"/>
                    </styles>
                    <renderconditions logictype="and">
                        <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="UI_Rendering" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="ShowAccountsList" value="true"/>
                    </renderconditions>
                </wrapper>
            </components>
            <styles>
                <styleitem type="background" bgtype="color">
                    <styles>
                        <styleitem property="background-color" value="#d8d8d8"/>
                    </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"/>
            </styles>
        </wrapper>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
        <actionsequences uniqueid="sk-3eQ5-221"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>

Photo of Bill Fox

Bill Fox

  • 8,870 Points 5k badge 2x thumb
That is a whole lot of steps.  How I use TFG is to trigger actions when a collapsible wrapper renders to show.

I use TFG in well over 100 places.  There must be an easier method?  Why don't you work with TFG to bring the product into the skuid umbrella and support it?  
Photo of Bill Fox

Bill Fox

  • 8,870 Points 5k badge 2x thumb
Hello Barry and Rob,

Any updates on TFG components in V2?
Cheers,
Bill
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,376 Points 10k badge 2x thumb
Hi Bill -

I'm still waiting to hear from Rob regarding some type of migration guide from v1 to v2.  I've read through the docs but there's no clear guidance on the "differences" between v1 & v2 and how to properly migrate a component to v2.

Additionally, based on the information at https://docs.skuid.com/latest/v2/en/skuid/components/original/manage-component-packs.html, component packs are not even supported in v2 so even if there was clear guidance on how to migrate to v2, TFG couldn't provide a component pack that would be able to be installed and used on a v2 page.

Possibly I'm misunderstanding what I'm reading but that is the state of where things are at on my end as far as I can tell.

I'm hopeful that Rob or someone from Skuid can provide some clarity on the following:

1) Is my understanding of component packs in v2 correct?  Assuming yes, when will component packs be supported in v2?

2) Is there a migration guide or at least something that clearly and concisely describes the differences between v1 & v2 (e.g. if you used "XYZ" api in v1, you need to use "ABC" api in v2).  A migration guide would be the ideal scenario here.


Photo of Bill Fox

Bill Fox

  • 8,870 Points 5k badge 2x thumb
the TGF functionality is such a productive game changer. I and others are awaiting the answer from Skuid.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,828 Points 20k badge 2x thumb
Bill and Barry.  Thanks for your continued exploration in the V2 page API.  Good stuff.  We've released the base set of redesigned components,  (and pretty completely new way for those components to interact with the DOM etc.)  but we have lots more work still to be done and pushed out.  One of the remaining deliverables is a custom component framework,  and migration instructions for moving V1 custom components to V2.  We know we need to give you guys that instruction, and we're working hard on it. 

We have also taking the feedback about collapsable panels we got originally and pushed some of it into the core component set.  While the new Accordion component doesn't have all the features that Barry's custom TFG set does - it may be satisfactory in the near term. 

Sorry this isn't the answer you want,  but its what we got right now. 
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,376 Points 10k badge 2x thumb
Hi Rob, thanks for the update.  Great to hear that component pack support and migration guide are on the way!  I'll revisit a TFG v2 once those are available.

In the meantime, one suggestion would be to put some information on the main v2 doc page regarding what v2 currently supports and what's on the roadmap.  Was very difficult to find information on v2 while reviewing the docs.  I actually only stumbled upon the page that indicates no component pack support by doing a google search so having a summary on the main landing page for v2 API would be helpful.
Photo of Bill Fox

Bill Fox

  • 8,870 Points 5k badge 2x thumb
Barry and Rob,
Hope all is well.  Any updates?
Bill 
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,376 Points 10k badge 2x thumb
Hi Bill -

I'm at a standstill on this until Skuid adds the required v2 features and documentation as Rob mentioned in his previous post. Once that is done, I'll be able to evaluate the effort required and let the community know whether or not a v2 compatible TFG Component Pack will be released.   

In the meantime, I'm still hopeful that the docs will be updated with more information about what's currently available and planned to become available so that others have an easier time discerning how to handle v1 component packs.