Collapsible wrappers similar to field editor sections

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!

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… 

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!

Could you post the source code for the custom component?

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.skuid.com/t/collapsible-wrapper-custom-component?rfm=1&topic_sub… for more information.

will this also work in the mobile composer?

Hi Jaime - I have not tested it in the mobile composer so I can’t say for sure. I know there are differences between mobile and desktop custom components but haven’t worked on the mobile side much so don’t know specifically where/how the differences apply.  If you try it, let me know how it goes, I’d be interested to see if it works there :slight_smile:

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

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.

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!

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.

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/t/collapsible-wrapper-custom-component?topic-reply-list%5Bset… for more information and to download the latest version.

I spent some time faking the collapsible wrapper using a UI only model and conditional rendering. Turned out not bad…














BlankModel




row.updated


























































































































Wrapper name
























Very slick Susan!!

@Rob - Since this post is older than a couple of years, has a real component been released?

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.