Collapsible Wrapper Custom Component

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.

Just for prosperity and other users that may need this,

UI-Only fields have an option to have a Default value, but that’s only for new records! so in a lot of cases not really useful…

But today I realized i could accomplish the Same with the TFG Collapsible wrapper

Was able to add actions to give default values to all the UI-fields and other SF fields I needed that functionality for.

So another Thank you Barry!

This component is getting more awesome, almost every day I found new ways to use it lol!

Very creative use case Dave, glad your finding the component so useful!

Hi Barry,

Me again. I seem to have encounter a new Bug in the CW component

If in a CW i use a page include with a table and make wrapper initially collapsed,

The table row will not show up. it load properly as the ‘Table count’ shows properly

Here’s 2 sample pages for you to test/visualize what I explained

1-

<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 id="CreatedDate"/>
            <field id="Fax"/>
            <field id="Phone"/>
            <field id="Rating"/>
            <field id="AnnualRevenue"/>
            <field id="NewField" uionly="true" displaytype="FORMULA" precision="9" scale="2" readonly="true" returntype="DOUBLE">
               <formula>1</formula>
            </field>
         </fields>
         <conditions/>
         <actions/>
      </model>
   </models>
   <components>
      <tfg__collapsiblewrapper title="New Wrapper" showheader="yes" collapsible="collapsed" uniqueid="pageLoaderWrapper" cssclass="pageLoaderWrapper">
         <components>
            <includepanel type="skuid" uniqueid="sk-3fDC3n-113" pagename="contacts_test_list" module=""/>
         </components>
         <styles>
            <styleitem type="background"/>
            <styleitem type="border"/>
            <styleitem type="size"/>
         </styles>
         <onbeforefirstopenactions>
            <action type="blockUI" message="Loading&#46;&#46;&#46;" timeout="1000"/>
         </onbeforefirstopenactions>
         <onafterfirstopenactions/>
         <onbeforeopenactions/>
         <onafteropenactions/>
         <onbeforecloseactions/>
         <onaftercloseactions/>
         <renderconditions logictype="and"/>
      </tfg__collapsiblewrapper>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript/>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>

2-

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false" theme="CL_david">   <models>
      <model id="contacts" limit="200" query="true" createrowifnonefound="false" adapter="" type="" sobject="Contact">
         <fields>
            <field id="Name"/>
         </fields>
         <conditions/>
         <actions/>
      </model>
   </models>
   <components>
      <grid uniqueid="sk-1uX48m-743">
         <divisions>
            <division behavior="flex" minwidth="100px" ratio="1" verticalalign="top">
               <components>
                  <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="false" showexportbuttons="false" pagesize="5" createrecords="false" model="contacts" buttonposition="left" mode="readonly" uniqueid="sk-2jgsK5-97" emptysearchbehavior="query" allowscrollbars="true" floatheader="true" instantfilters="true" cssclass="hidetablefooter">
                     <fields/>
                     <rowactions/>
                     <massactions usefirstitemasdefault="true"/>
                     <views/>
                     <filters>
                        <filter type="select" filteroffoptionlabel="All Funding Type" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" conditionsource="auto" labelmode="no" conditionfield="Type__c"/>
                     </filters>
                     <searchfields/>
                     <renderconditions logictype="and"/>
                  </skootable>
               </components>
            </division>
         </divisions>
         <styles>
            <styleitem type="background" bgtype="none"/>
         </styles>
      </grid>
      <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="false" showexportbuttons="true" pagesize="100" createrecords="false" model="contacts" buttonposition="left" mode="read" uniqueid="sk-2jgsK5-98" emptysearchbehavior="query" allowscrollbars="true" floatheader="true">
         <fields>
            <field id="Name" valuehalign="" type=""/>
         </fields>
         <rowactions>
            <action type="delete"/>
            <action type="drawer" label="Commissions" icon="sk-icon-dollar" openicon="fa-folder-open-o">
               <drawer title="Drawer Area" width="90%" closehandle="true">
                  <components>
                     <tabset rememberlastusertab="true" defertabrendering="true" uniqueid="sk-2usEwS-972" renderas="">
                        <tabs>
                           <tab name="Commissions">
                              <components>
                                 <grid uniqueid="sk-3gkYWT-653">
                                    <divisions>
                                       <division behavior="flex" minwidth="100px" ratio="1">
                                          <components/>
                                       </division>
                                    </divisions>
                                    <styles>
                                       <styleitem type="background" bgtype="none"/>
                                    </styles>
                                    <renderconditions logictype="and">
                                       <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="Funding" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="Type__c" value="New Business"/>
                                    </renderconditions>
                                 </grid>
                                 <grid uniqueid="sk-3gkaBn-662">
                                    <divisions>
                                       <division behavior="flex" minwidth="100px" ratio="1">
                                          <components/>
                                       </division>
                                    </divisions>
                                    <styles>
                                       <styleitem type="background" bgtype="none"/>
                                    </styles>
                                    <renderconditions logictype="and">
                                       <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="Funding" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="Type__c" value="Existing Business"/>
                                    </renderconditions>
                                 </grid>
                              </components>
                              <renderconditions logictype="and"/>
                           </tab>
                           <tab name="Compensation" loadlazypanels="true">
                              <components>
                                 <grid uniqueid="sk-2vUpu9-487">
                                    <divisions>
                                       <division behavior="flex" minwidth="100px" ratio="1">
                                          <components>
                                             <grid uniqueid="sk-2usOck-990">
                                                <divisions>
                                                   <division behavior="flex" minwidth="100px" ratio="1">
                                                      <components/>
                                                   </division>
                                                </divisions>
                                                <styles>
                                                   <styleitem type="background" bgtype="none"/>
                                                </styles>
                                                <renderconditions logictype="and">
                                                   <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="Funding" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="Type__c" value="New Business"/>
                                                </renderconditions>
                                             </grid>
                                          </components>
                                       </division>
                                    </divisions>
                                    <styles>
                                       <styleitem type="background" bgtype="none"/>
                                    </styles>
                                 </grid>
                                 <grid uniqueid="sk-2usP9s-995">
                                    <divisions>
                                       <division behavior="flex" minwidth="100px" ratio="1">
                                          <components/>
                                       </division>
                                    </divisions>
                                    <styles>
                                       <styleitem type="background" bgtype="none"/>
                                    </styles>
                                    <renderconditions logictype="and">
                                       <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="Funding" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="Type__c" value="Existing Business"/>
                                    </renderconditions>
                                 </grid>
                              </components>
                              <renderconditions logictype="and">
                                 <rendercondition type="fieldvalue" operator="!=" enclosevalueinquotes="true" fieldmodel="Funding" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="Type_of_Sales_Partner_skuid__c" value="External Agent"/>
                              </renderconditions>
                           </tab>
                           <tab name="Compensation" loadlazypanels="true">
                              <components/>
                              <renderconditions logictype="or">
                                 <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="Funding" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="Type_of_Sales_Partner_skuid__c" value="External Agent"/>
                              </renderconditions>
                           </tab>
                        </tabs>
                     </tabset>
                  </components>
               </drawer>
            </action>
            <action type="multi" label="View record details" icon="sk-icon-popup">
               <actions>
                  <action type="showPopup">
                     <popup width="80%" title="Viewing {{Model&#46;label}}: {{Name}}">
                        <components>
                           <includepanel type="skuid" uniqueid="sk-1IytD5-495" querystring="id={{Id}}" pagename="Funding_Detail" module=""/>
                        </components>
                     </popup>
                  </action>
               </actions>
            </action>
         </rowactions>
         <massactions usefirstitemasdefault="true">
            <action type="multi" label="Mark As Paid" icon="sk-icon-money">
               <actions>
                  <action type="custom" snippet="DatePaidToday"/>
               </actions>
            </action>
            <action type="massdelete"/>
         </massactions>
         <views>
            <view type="standard"/>
         </views>
         <filters/>
         <exportproperties usetablecolumns="true"/>
         <searchfields/>
         <renderconditions logictype="and"/>
      </skootable>
   </components>
   <resources>
      <labels/>
      <javascript>
         <jsitem location="inlinesnippet" name="GreenifPositive" cachelocation="false">var field = arguments[0],    value = arguments[1],
   $ = skuid&#46;$;
if(field&#46;metadata&#46;accessible){
    if(value &amp;gt; 0){
&#47;&#47; do CSS stuff here&#46;&#46;&#46;
        field&#46;element&#46;css({'color':'green','min-height':'10px'});
    }
    skuid&#46;ui&#46;fieldRenderers[field&#46;metadata&#46;displaytype][field&#46;mode](field,value);
}</jsitem>
      </javascript>
      <css>
         <cssitem location="inline" name="highlighted-row-green" cachelocation="false">table&#46;nx-skootable-data tbody tr&#46;Funding_highlighted-row-green td {    
   background-color: #e6ffe6;
}</cssitem>
         <cssitem location="inline" name="row-red" cachelocation="false">table&#46;nx-skootable-data tbody tr&#46;Funding_row-red td {    
   background-color: #ffcccc;
}</cssitem>
         <cssitem location="inline" name="HidetableFooter" cachelocation="false">
/* hide footer in table */ &#46;hidetablefooter &#46;nx-list-footer { display:none; }</cssitem>
      </css>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>
            <action type="edit"/>

Thx

Hi Dave -

Thanks as always for bringing this to my attention and a huge thank you for providing the sample pages!    Using your samples I was able to easily reproduce the behavior you are describing.

I dug in to this a little bit so far and once the CW is expanded, if anything moves on the screen (e.g. resize window, move scrollbar, etc.) the rows in the table appear.  This tells me that it’s a “painting” issue possibly coupled with a container size.

I remember not too long ago someone had posted to the community where a table would render and no rows would show up even though the “count” of rows in the footer had rows and the model had rows.  I can’t seem to find that post right now.

I’m going to continue to dig in to this and will keep you posted.

In the meantime, if anyone else remembers seeing that post about the table rows not showing up and can link to it here, I’d appreciate it.

Thanks again!

Hi Dave -

I did some more digging on this. In short, with the way that you’re sample pages are configured, the reason that the table is not showing any rows is because the ‘div’ element that contains the rows has an inline style height equal to zero (0). If you run the test and then use the DOM Inspector, you’ll see the rows in the table are in the DOM, but since the nx-editor-contents div element has a height of zero, they don’t appear visible. When the window changes in some way, the height gets recalculated and the data gets displayed.

The div element I’m referring to is:

<div class="nx-editor-contents" style="position: relative;overflow: auto;height: 0px;"> 

What I’m not sure of yet is why the height is set to zero. In reviewing the Skuid code for the table component, it appears that the code itself is specifying the height so what I’m trying to figure out now is why it’s either 1) Not recalculating at all; or 2) Not calculating correctly; or 3) what the CW might be doing that is causing it to calculate incorrectly.

In your sample, you have “Allow Scroll Bars” enabled as well as “Keep Header Visible”. If you disabled “Keep Header Visible” the problem still occurs, however if you also disable “Allow Scroll Bars” the problem no longer occurs.

The problem lies somewhere in the way things get handled with the Skuid table when Allow Scroll Bars is enabled. This has some similarities to the problem you reported at https://community.skuid.com/t/bug-with-sticky-headers.

I’m going to keep digging but wanted to provide an update. It’s unclear if I can do anything about this in the CW but I’ll see what I can come up with.

That other post was me. Looks like it doesn’t have anything to do with your collapsible wrapper, since I’m not using one. https://community.skuid.com/t/table-hidden-on-pageload 

Barry thanks for your good digging. I’m going to pass this question off to the Devs and see if we can shed some light on the situation and solve Matt’s issue at the same time (He’s nudged us a few time on that one… )

Hi Barry,

Thank you very much that at least provides me a temporary fix.

I thing I was thinking was to add an action to CW to requery the model(as that fixes the issue as well, tried it with a filter), but as it’s in a page include , not really sure if even possible

Thx

Matt - Thanks for seeing this and pointing us to that issue you posted!  I updated that post with some insight in to what I was seeing in the Skuid table code. 

Rob - Appreciate you passing this on to the devs, thank you!

Dave - You could fire an event from the main page that the page include listens for and in that event handler, requery the model.  That said, the extra requery shouldn’t really be necessary but could be a viable workaround if you have to have scroll bars turned on.  I did some more digging after my last post last night and think I might have a workaround within the CW itself (stay tuned, still working on it) but especially given Matt’s situation, I think this is really a Skuid table thing more than a CW thing.

Thanks, Barry, this is a great addition.  Would like to suggest a minor enhancement to your collapsible wrapper component: Make the title bar (or title text) clickable to expand and collapse the wrapper.

Thanks for the feedback and suggestion Jared.

For the collapsibility, I followed the behavior that Skuid Field Editor Sections have where the triangle is the only “active” portion.  That said, I can see where your suggestion of including the text in the “active” portion would be useful.  I’ll add this to my list of enhancements for a future release.

Thanks again!

No, thank you!  I just found your youtube overviews of the component, so I am now getting better educated on all of its features.

I’m with Jared on this idea. Should work the same way for skuid field editors, too!

Thanks guys.

I think what I’m going to do for this in a future release is provide a config property on the CW that “includes text in active portion” if set to true with the default value being false.  This will provide the flexibility that you guys are after while still staying consistent with the way Skuid handles Field Editor Sections.  I think having CW work one way (text is clickable) and Field Editor Sections work a different way (text is not clickable) would confuse users.  The setting will provide the option for it to be different though.

In most apps that I’ve come across the “plus” sign (or in our case arrow) is the only “active” element that expands a list (e.g. windows explorer plus sign for a directory, various web apps that have treelists, etc.).  

My guess is that this was an intentional decision by Skuid to have just the arrow be “active”.  That said, from a UI/UX perspective, would be interested in what Shannon Hale thinks about this one - best practice for the text to be clickable on things that are collapsible or just the arrow?

Shannon?

I personally +1 the idea to ‘include text in active portion’.

There is cases where I center the the CW title and it would make it more intuitive to be able to do it right from the Text, instead of paying attention to the little triangle far to the left

Thank you for adding this option in future release :slight_smile:

Hello All -

Thank you to everyone for their great feedback and help on the CW, greatly appreciated!

Based on user feedback, I’ve made some improvements to the CW and have just released version 1.4.

Version 1.4 Release notes:

  • Enhancement to allow entire header to be clickable for expand/collapse (see ‘Header is Clickable’ property) ** Credit to Jared Jones for this idea!
  • Enhancement to support deferred rendering of wrapper contents (see ‘Defer rendering of wrapper contents’ property) ** Credit to Dave for finding an issue with Skuid Tables (see https://community.skuid.com/t/table-hidden-on-pageload) that prompted this enhancement!
  • Enhancement to support ‘Before First Open’ and ‘After First Open’ actions when no header is displayed or when header is not collapsible ** Credit to Dave for this idea!
The latest version is always available here.
Full release notes are available in the readme.

As always, feedback appreciated, keep it coming!

Thank you!