Collapsible Wrapper Custom Component

Good Morning Barry,

Thank you for quick fix. I just updated the resource and tried it, and works perfectly !

Yesterday I put those CW to good use and it makes some process so much easier and my pages now  look much cleaner!

So thank you again for the awesome work :slight_smile:

Awesome news, thanks for the confirmation!  Glad to hear the CW is getting put to good use.  Let me know if you run in to anything else.

Hello All -

It’s great seeing the CW gaining traction, glad so many have found it useful!

Thanks to everyone for their feedback/input and especially to those that have helped uncover some shortcomings in the CW.  Given all the latest feedback, here’s a current snapshot of where things are at:

1) tfgComponents only support Desktop - Please make sure to mark the component pack as Desktop Only
2) I just released version 1.3.  Here’s the release notes:

  • Version 1 - Initial Version
  • Version 1.1 - Fix to support resource loading on child components within the wrapper component (e.g. chart would not display at all in some cases)
  • Version 1.2 - Fix to ensure that child components are properly “drawn” within the CW container when CW was initially collapsed (e.g. chart would extend beyond the CW container on initial display if CW was collapsed to start)
  • Version 1.3 - Fix to ensure that when tfgComponentPack is enabled for Mobile (which it should not be given #1 above), it won’t entirely break the builder
The latest version is always available at component pack.

As always, feedback appreciated, keep it coming!

Thank you!

Hi Barry,

1 of the feature i love about your cw component is that it allows me to basically create ‘before load actions’ on any skuid page without having to write any JS or find creative ways

But 1 thing i’m not sure why, the action(s) will not work if the ‘show wrapper header’ is set to no, and/or ‘collapsible’ is set to no.

I can technically understand the reason, but it would be nice if I could ‘completely hide’ the component for this use case , and only use it as a before load action

I was able to do it as close as possible, but it’s showing a little section with arrow to collapse. if i choose to hide it with rendering options, ofc the actions will not apply…

Basically my goal: if possible, to be able to use actions of cw component, without showing the cw on page

Hope it’s clear

Thank you

Dave -

Love your creativity here! Using the CW to workaround the fact that Skuid doesn’t currently provide a way to define a onPageLoad sequence declaratively - brilliant!!

Skuid Team - Another indirect vote for adding onBeforePageLoad & onAfterPageLoad action sequences to Skuid Pages :slight_smile:

As you’ve discovered, the CW was written so that the open/close events only fire when there is a header and when it’s collapsible. I do tend to agree that it might make more sense to fire open events regardless of collapsibility. Let me knoodle on that one a bit but I can see that change making sense.

In the meantime, I think you can achieve what you are after. The key is hiding the entire CW using a CSS rule. If you apply a CSS class to the CW (e.g. pageLoadWrapper) and then create a css class setting display: none, it should hide the wrapper and still fire the events.

Here’s a sample page. Let me know if this works for you and thanks again for your feedback and ideas - love seeing the ingenuity!

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" tabtooverride="Account">   <models>
      <model id="Account" limit="1" query="true" createrowifnonefound="false" sobject="Account">
            <field id="Name"/>
            <field id="CreatedDate"/>
            <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
      <tfg__collapsiblewrapper title="New Wrapper" showheader="yes" collapsible="open" uniqueid="pageLoaderWrapper" cssclass="pageLoaderWrapper">
            <styleitem type="background"/>
            <styleitem type="border"/>
            <styleitem type="size"/>
            <action type="blockUI" message="Loading..." timeout="1000"/>
         <renderconditions logictype="and"/>
      <pagetitle model="Account" uniqueid="sk-lx3g8-68">
            <action type="delete"/>
            <action type="clone"/>
            <action type="share"/>
            <action type="savecancel" window="self"/>
      <basicfieldeditor showsavecancel="false" showheader="true" model="Account" mode="read" uniqueid="sk-lx3g8-69">
            <column width="50%">
                  <section title="Basics">
                        <field id="Name"/>
            <column width="50%">
                  <section title="System Info">
                        <field id="CreatedDate"/>
         <cssitem location="inline" name="newcss" cachelocation="false">.pageLoaderWrapper {
    display: none;
      <styleitem type="background" bgtype="none"/>


It’s exactly what i needed , thank you

Skuid should add your component as part of their standard product and pay you 1 free squid for every client that uses it!

here’s 1 from me

Awesome, glad it worked and thanks for the Skuid! :slight_smile:


Any tips on adding an action framework and/or conditional rendering to a custom component?

I tried to dig through your code, but the uglification made it difficult to find the conditional rendering section. I found the action framework stuff, but if you have any pointers beyond what I can reverse engineer, that would be awesome.

I’d love to be able to help Matt but unfortunately the guidance I can provide is limited on this one Matt, sorry.  The best advice I can provide is to continue to push Skuid on adding official support and documentation for these features.  Sorry I can’t be of more help!

This is awesome.  Yes, Skuid should incorporate this into its product.  One questions, will there be any issues having this work in a public Site

Thanks Bill.  While I have not tested this on a public site, I see no reason why it wouldn’t work.  If you try it and have any issues, just let me know.


Hi Barry ,

I thing I just noticed, but not sure you can do anything about, is that the Collapsible wrapper does not play nice with table sticky headers which are outside of wrapper(keep header visible option)

To reproduce:

Add a custom wrapper
Open warapper if closed
Under the wrapper section add a table with enough row that u need to scroll down
Scroll down
Close wrapper
Now all column summaries show twice

Hey Dave -

Thanks for letting me know about this.  To be honest, at first glance I’m not sure if this is a CW thing or a table thing.  Either way, I’m more than willing to take a closer look.

Would it be possible for you to create a sample page using just stock objects to repro the issue?  I can take that and load in my DE org and should be able to isolate pretty quickly.


Hi Barry,

Here it is.

As well I just noticed today , that when it happens, if i try to scroll again , it fixes itself
But just in case u want to see it

on page below, with wrapper open, scroll down the page, then scroll back up and close wrapper, u will see issue. (make sure to have at least 10+ accounts in your DE org)


<tfg__collapsiblewrapper title=“New Wrapper” showheader=“yes” collapsible=“open” uniqueid=“pageLoaderWrapper” cssclass=“pageLoaderWrapper”>





Hey Dave -

Thanks for this, greatly appreciated!

I spent some time with it and I’m fairly certain this isn’t a CW thing. Instead, I think it’s an issue with the Skuid table and its properly “repainting” itself when it’s position changes.

I’ve created a repro without the use of the CW. You can use the XML below and do the following:

  1. Preview page
  2. Scroll down to bottom
  3. Scroll up to top
  4. Change “Show Top” field from True to False

You should see the same behavior you were experiencing.

If we take a closer look at what is going on, you’ll notice that then the page first displays, the “text” sum cell is actually at the bottom of the screen, not the bottom of the table:

It appears that Skuid is treating colum summaries just like a column header when “Keep Header Visible” is enabled. If you disable “Keep Header Visible”, the problem goes away on all fronts.

To be honest, I’m not sure if the column summaries being “kept visible” is expected or not but I’m guessing it’s not. Either way, when the position changes on the screen, the table isn’t re-painting itself properly and therefore you are getting two column summary cells. The next time anything moves on the page (including scrolling) a repaint event is going to the table and it “corrects” itself.

In short, I think there are two issues:

  1. Determine if the “column summary” cell should be treated as “kept visible” or if it should always remain at the bottom. I’m thinking that it should always remain at the bottom but it’s possible that floating this to keep it always visible was intended behavior by Skuid.

  2. When table repaints, it must ensure that the column summary cell gets redrawn properly and the “floating” one eliminated.

To me, these are both Skuid issues and I think they should be filed with them in a separate post as I would consider #2 a bug for sure and likely #1 as well.

Let me know your thoughts after reading this through and testing with the page below:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" tabtooverride="Account">   <models>      <model id="Account" limit="100" query="true" createrowifnonefound="false" sobject="Account" adapter="" type="">
        <field id="Name"></field>
        <field id="CreatedDate"></field>
        <field id="Fax"></field>
        <field id="Phone"></field>
        <field id="Rating"></field>
        <field id="AnnualRevenue"></field>
        <field id="NewField" uionly="true" displaytype="FORMULA" precision="9" scale="2" readonly returntype="DOUBLE">
  <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Account" buttonposition="" mode="read" uniqueid="sk-30Cud3-107" allowscrollbars="true" floatheader="true">
        <field id="Fax"></field>
        <field id="Name"></field>
        <field id="Phone"></field>
        <field id="Rating" valuehalign="" type=""></field>
        <field id="AnnualRevenue"></field>
        <field id="NewField" decimalplaces="" valuehalign="" type="">
        <action type="edit"></action>
        <action type="delete"></action>
     <massactions usefirstitemasdefault="true">
        <action type="massupdate"></action>
        <action type="massdelete"></action>
        <view type="standard"></view>

Hi and thank you for that

I actually think keeping the footer(or summary) is intended and is useful in some cases.

I just wish, and made a suggestion on it months ago that they should be 2 separate options.

But yes #2 in my opinion is a bug and testing page , i see what you mean

Thank you for confirming that!

I think maybe it’s related to same issue of sticky headers and drawers not interacting properly

No worries, happy to take a look and help.

Agreed with you that if the floating summary cell is intended behavior, it should be two options.

Were you going to submit a bug on #2?

sure will do in a bit

Good deal :slight_smile: