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:
- 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 🙂
- 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.
- 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.
- 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:
- Create a new Component pack with a prefix of “tfg” and Component Pack Label of “TFG Custom Components”
- 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)
- Create a new page called “TFG Component Demo” using the Page XML from here
- Preview the page
Feedback, issues, etc. appreciated. Enjoy!
Screen Shots
