Collapsible Wrapper Custom Component

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 :slight_smile:
  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

Barry,
This is pretty cool! With actions and everything! Thanks for sharing this. Your contributions to the community are incredible.
Emily

Thanks Emily :slight_smile:

Hi Barry,

I was looking to use your custom component with a chart. However, when I open the collapsible section the chart doesn’t show up; other components do show up, though. I wish I could give you more information beyond that, I checked the JavaScript console and there weren’t any errors.

That said, this is a really cool custom component that you made. I’m sure the community will get a lot of use from it. :slight_smile:

If there’s any other information you need, just ask.

Thanks! 

Hi John -

Sorry about the issue you are having with the Chart component.  I know exactly what the root cause is (thanks to some help from Zach).  I’ve had it on my list to get fixed but haven’t had the cycles to do it yet.  I’ll get it fixed and upload a new version as soon as possible.

Glad you are finding good use for the component!

Cool! Thanks for writing this component. :slight_smile: I’ll keep you updated if I find anything else in the future.

Hey John -

I tried to reproduce the issue you are having with the CW and the Chart component but unfortunately, I wasn’t able to reproduce the behavior your experiencing.  That said, I did fix the issue that I was aware of with the CW Component and have uploaded a new version.  I’m hopeful that it will resolve your issue as the symptoms that you are describing would present the same as the issue that I knew existed.

Can you download the latest version of the component pack and let me know if it resolves your issue?

If it does not, if there is a way that you can create a repro of the issue you are having using standard objects, etc. I can set it up in my DE Org to isolate and resolve.  

Let me know.  Thanks!

Awesome work!
Can save a lot of additional work with that custom component.
Thank you.

You’re welcome, enjoy!

Great Job Barry and thank you for sharing!

I can already see how this will be useful to us


Thank you!

You’re welcome - glad to hear you’ll find this useful!

Hey Barry - simply wanted to add my Thank You as well!

This custom component is seriously awesome, and will help me solve some long-outstanding issues I’ve come across.

Cheers,

Great to hear that you are finding it useful, your welcome!

Hi Barry,

Thought i would make you aware of 1 potential issue I just noticed.

If i have a chart inside a CW which  is initially collapsed, the chart come out pretty zoomed in…

If i add an action to query model after open, it fixes it.

No big deal, but would be useful not to have to run an unnecessary action

Thx

Hey Dave - Thanks for the feedback.  I’ve seen a scenario where when the CW is initially collapsed, when you open the chart expands beyond the containing ‘div’ element of the CW itself.  I think this is due to an issue with the chart itself but it definitely could be something in the CW.  Is this what you are describing by “zoomed in”?  If you can share a small repro of this using standard objects I’d be happy to work to isolate the issue and see if I can resolve it.  If it’s something in the chart component itself (which I fear it is), there might not be anything I can do but if it’s in the CW, I can definitely address.

Btw, are you using the latest version of the CW.  I fixed an issue a couple of weeks ago where the chart itself wouldn’t even display when the CW was initially collapsed.

Thanks!

Thank you for quick answer

1- I did update the static ressource before posting

2- here’s xml using opp sample page














































Closed Lost





LAST_N_QUARTERS:2
NEXT_N_QUARTERS:2
THIS_QUARTER










TotalOppAggWon
TotalOppAggOpen




models.saved





































































{{Quantity}}{{UnitPrice}}((100-{{Discount}})/100)


{{UnitPrice}}*2




{{PricebookEntry.UnitPrice}}











row.updated


SalesPriceFormula









row.updated


Quantity






Opportunities





models.saved











































































































{{{sumAmount}}}





Closed Won
Invoice











{{{sumAmount}}}





Closed Won
Closed Lost
Invoice











&n

Hey Dave - Thanks for the answers and providing the sample.  Unfortunately, it looks like the entire page didn’t paste properly or possibly there might be a limit to the number of characters in a post.  Can you post the page XML to a dropbox URL or equivalent?

Sure no problem

https://codeshare.io/hTgn4

thx

Awesome, thank you!  I’m able to reproduce the overflow of the chart when opening the CW.  I’ll dig in and see what I can come up with.  Keep you posted!

Dave - Thank you again for putting together the sample, made reproducing the issue very easy.  Happy to report that your sample led me to the source of the issue and I have implemented a fix and updated the component pack.

Can you download the latest version of the component pack and let me know if it resolves your issue?

Thanks again for your help!