Collapsible Wrapper Custom Component

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">
         <fields>
            <field id="Name"/>
            <field id="CreatedDate"/>
         </fields>
         <conditions>
            <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
         </conditions>
         <actions/>
      </model>
   </models>
   <components>
      <tfg__collapsiblewrapper title="New Wrapper" showheader="yes" collapsible="open" uniqueid="pageLoaderWrapper" cssclass="pageLoaderWrapper">
         <components/>
         <styles>
            <styleitem type="background"/>
            <styleitem type="border"/>
            <styleitem type="size"/>
         </styles>
         <onbeforefirstopenactions>
            <action type="blockUI" message="Loading..." timeout="1000"/>
         </onbeforefirstopenactions>
         <onafterfirstopenactions/>
         <onbeforeopenactions/>
         <onafteropenactions/>
         <onbeforecloseactions/>
         <onaftercloseactions/>
         <renderconditions logictype="and"/>
      </tfg__collapsiblewrapper>
      <pagetitle model="Account" uniqueid="sk-lx3g8-68">
         <maintitle>
            <template>{{Name}}</template>
         </maintitle>
         <subtitle>
            <template>{{Model.label}}</template>
         </subtitle>
         <actions>
            <action type="delete"/>
            <action type="clone"/>
            <action type="share"/>
            <action type="savecancel" window="self"/>
         </actions>
      </pagetitle>
      <basicfieldeditor showsavecancel="false" showheader="true" model="Account" mode="read" uniqueid="sk-lx3g8-69">
         <columns>
            <column width="50%">
               <sections>
                  <section title="Basics">
                     <fields>
                        <field id="Name"/>
                     </fields>
                  </section>
               </sections>
            </column>
            <column width="50%">
               <sections>
                  <section title="System Info">
                     <fields>
                        <field id="CreatedDate"/>
                     </fields>
                  </section>
               </sections>
            </column>
         </columns>
      </basicfieldeditor>
   </components>
   <resources>
      <labels/>
      <css>
         <cssitem location="inline" name="newcss" cachelocation="false">.pageLoaderWrapper {
    display: none;
}</cssitem>
      </css>
      <javascript/>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>

Barry,

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:

Barry,

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!

Barry,
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.

#barryforpresident

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.

Thanks!

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)











1







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


































</tfg__collapsiblewrapper>








test

sum

























Thx

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="">
     <fields>
        <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">
           <formula>1</formula>
        </field>
     </fields>
     <conditions></conditions>
     <actions></actions>
  </model>
  <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">
     <fields>
        <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="">
           <label>test</label>
           <summaries>
              <summary>sum</summary>
           </summaries>
        </field>
     </fields>
     <rowactions>
        <action type="edit"></action>
        <action type="delete"></action>
     </rowactions>
     <massactions usefirstitemasdefault="true">
        <action type="massupdate"></action>
        <action type="massdelete"></action>
     </massactions>
     <views>
        <view type="standard"></view>
     </views>
     <searchfields></searchfields>
  </skootable>

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:

Barry,

Noob question here, but curious, how do u post the xml/code in the type of box as u did in post above?

Thx


Hey Dave - 

When you are posting a comment, below the comment area you’ll see a toolbar (bold, italics, underline, etc.).  In the toolbar, you’ll want to use the ‘pre’ option.  Select the text in your post that you want to format “pre” style, and then click the pre button (just like you would if you wanted to make something bold).

This will apply the HTML pre element to the content (http://www.w3schools.com/tags/tag_pre.asp).

Hope this helps!

Thank you!

test below, please ignore


 <resources>
      <css/>
      <javascript/>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>
      <labels/>

FYI - The community editor is finicky when it comes to applying style to selections.  As you’ll note above, it rearranged some stuff.  Sometimes I find that I have to edit my post a couple of times until everything sits the way I want it to.