Collapsible Wrapper Custom Component

  • 17
  • Idea
  • Updated 5 hours ago
  • (Edited)
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 :)
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




Photo of Barry Schnell

Barry Schnell, Champion

  • 18,086 Points 10k badge 2x thumb

Posted 3 years ago

  • 17
Photo of Emily Davis

Emily Davis, Employee

  • 3,502 Points 3k badge 2x thumb
Barry,
This is pretty cool! With actions and everything! Thanks for sharing this. Your contributions to the community are incredible.
Emily
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Thanks Emily :)
Photo of John Freese

John Freese

  • 542 Points 500 badge 2x thumb
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. :)

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

Thanks! 
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
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!
Photo of John Freese

John Freese

  • 542 Points 500 badge 2x thumb
Cool! Thanks for writing this component. :) I'll keep you updated if I find anything else in the future.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
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!
(Edited)
Photo of Thimo

Thimo

  • 1,280 Points 1k badge 2x thumb
Awesome work!
Can save a lot of additional work with that custom component.
Thank you.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
You're welcome, enjoy!
(Edited)
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Great Job Barry and thank you for sharing!

I can already see how this will be useful to us


Thank you!
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Sure no problem

https://codeshare.io/hTgn4

thx
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
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!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
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!
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
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 :)
(Edited)
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
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.
Photo of mB Roman Melnik

mB Roman Melnik

  • 2,802 Points 2k badge 2x thumb
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,
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Great to hear that you are finding it useful, your welcome!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,086 Points 10k badge 2x thumb
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!
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
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
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
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 :)

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>
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
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

Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Awesome, glad it worked and thanks for the Skuid! :)
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
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.
(Edited)
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
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!
Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb
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
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
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.
Photo of Griffin Brown

Griffin Brown

  • 2,766 Points 2k badge 2x thumb
#barryforpresident
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
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


Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Good deal :)
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
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
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
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!
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Thank you!

test below, please ignore

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

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
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.
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
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!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Very creative use case Dave, glad your finding the component so useful!
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
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..." 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.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.$;
if(field.metadata.accessible){
    if(value &gt; 0){
// do CSS stuff here...
        field.element.css({'color':'green','min-height':'10px'});
    }
    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
}</jsitem>
      </javascript>
      <css>
         <cssitem location="inline" name="highlighted-row-green" cachelocation="false">table.nx-skootable-data tbody tr.Funding_highlighted-row-green td {    
   background-color: #e6ffe6;
}</cssitem>
         <cssitem location="inline" name="row-red" cachelocation="false">table.nx-skootable-data tbody tr.Funding_row-red td {    
   background-color: #ffcccc;
}</cssitem>
         <cssitem location="inline" name="HidetableFooter" cachelocation="false">
/* hide footer in table */ .hidetablefooter .nx-list-footer { display:none; }</cssitem>
      </css>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>
            <action type="edit"/>


Thx
(Edited)
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Correct Barry, it did fix the issue with 1.4, thx
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Good deal, thanks for letting me know Dave.

Matt - Not sure if it's possible in your scenario/use case but if you can use a CW and have it initially collapsed (the user would have to open it to see the table), then there might be a workaround for you.  If this is something you can do given your use case, you can set the CW to have a header, initially collapsed and deferred rendering.  Should likely workaround the problem with Skuid Tables on page includes while waiting for a permanent fix to that problem.  Again, not sure if this is even possible for you given your use case though.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Matt - One other possibility for you...If you are able to use the CW but must have it open initially is to use the CW's API to open the wrapper on pageload.  You'd set the CW to have a header, be collapsible, use deferred rendering and mark it initially closed - this will defer the rendering of the contents of the CW when the CW is initially drawn.  Then, in a pageload event, you'd use the API to 'open' the CW.  This would give the appearance to the user that the CW was open to start with (albeit with a very minor delay).  It's far from ideal and a complete workaround to the Skuid table/Page include issue but if it's a visable UI/UX for your use case, it might work.

Here's a sample page demonstrating this.  Checkout the inline resource that calls 'open' method on the CW on page load.  

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" tabtooverride="Account">   <models>
      <model id="Account" limit="1" query="true" createrowifnonefound="false" sobject="Account" adapter="" type="">
         <fields>
            <field id="Name"/>
            <field id="CreatedDate"/>
         </fields>
         <conditions>
            <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
         </conditions>
         <actions/>
      </model>
   </models>
   <components>
      <pagetitle model="Account" uniqueid="sk-ALamj-68">
         <maintitle>
            <template>{{Name}}</template>
         </maintitle>
         <subtitle>
            <template>{{Model.label}}</template>
         </subtitle>
         <actions>
            <action type="savecancel" window="self"/>
         </actions>
      </pagetitle>
      <tfg__collapsiblewrapper title="New Wrapper" showheader="yes" collapsible="collapsed" deferrenderingcontents="true" uniqueid="myCW">
         <components>
            <basicfieldeditor showsavecancel="false" showheader="true" model="Account" mode="read" uniqueid="sk-ALamj-69" buttonposition="">
               <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>
         <styles>
            <styleitem type="background"/>
            <styleitem type="border"/>
            <styleitem type="size"/>
         </styles>
      </tfg__collapsiblewrapper>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript>
         <jsitem location="inline" name="newInlineJS" cachelocation="false" url="">(function(skuid){
var $ = skuid.$;
$(document.body).one('pageload',function(){
   $('#myCW').tfg__collapsiblewrapper('open')
});
})(skuid);</jsitem>
      </javascript>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>
(Edited)
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Matt - Thought of one more idea that's even simpler (not sure why I didn't think of this earlier).  In a pageload event handler, you could force a re-render of the table that's having the problem.  Again, far from ideal but might workaround the issue until a permanent fix is made.

skuid.$C('myTable').render();
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Thanks, Barry. I tried to use .render() on pageload before without success. Here's hoping that opening/rendering the CW on pageload will work!
Photo of Jared Jones

Jared Jones

  • 2,214 Points 2k badge 2x thumb
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.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
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!
Photo of Jared Jones

Jared Jones

  • 2,214 Points 2k badge 2x thumb
No, thank you!  I just found your youtube overviews of the component, so I am now getting better educated on all of its features.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
I'm with Jared on this idea. Should work the same way for skuid field editors, too!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
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?
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
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 :)

(Edited)
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,086 Points 10k badge 2x thumb
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/skuid/topics/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!
(Edited)
Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb
where do i find the default static resource for step 

2) Upload the zip file from here to replace the default Static Resource created by Skuid for the pack
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb
Bill,

1. Go to the Static Resources within SF. Setup--> Develop-->Static Resource
2. Find the Static Resource: tfgComponents (Skuid will make one by default)
3. Replace the file with the file from the zip file.
Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb
Thank you Tami
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb
No problem!
Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb
Is there a method to not show the "X" in the upper right corner of a reference popup like you have done with the popup?
 
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hey Bill -

Unfortunately, there is no way to target a specific reference popup because there isn't an event or action to hook in to when the reference popup opens.

Depending on your use case and requirements, you can 'hide' the 'x' on all reference popups using the following css class
.sk-dialog-autocomplete.ui-dialog .ui-dialog-titlebar .ui-button.ui-dialog-titlebar-close {
   display: none;
}

Keep in mind that this does not disable the 'escape' button so users could still press escape to close the dialog.
Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb
Thanks.  Worked great.
Photo of Jared Jones

Jared Jones

  • 2,214 Points 2k badge 2x thumb
Barry - Thanks again for making such useful components available to the community.  It would be cool if we could have different header titles for when the wrapper is collapsed or expanded.  

For example, a section containing fields for providing a "latest update" on a record would have a header titled "Latest Update" when expanded.  When collapsed, the wrapper header could be "Latest Update - 8/2/2016 - Text snippet from the latest update field..."
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hi Jared -

Thanks for the feedback and idea, glad you are finding the wrapper useful.

I'll add this to the features list for a future version.  If others would like to see this as well, please let me know.

In the meantime, what you could do is something along the lines of the following:

1) Create a UI Only checkbox field called "IsOpen"
2) Add an action to beforeopen to set the field to True
3) Add an action to afterclose to set the field to False
4) Use merge syntax in the title text to condition on the UI Only field
{{#IsOpen}}Latest Update{{/IsOpen}}{{^IsOpen}}Latest Update - 8/2/2016{{/IsOpen}}

Hope that gives you what you are looking for short of having the component natively support it.  If you try it, let me know how it goes!
Photo of Jared Jones

Jared Jones

  • 2,214 Points 2k badge 2x thumb
Above and beyond as usual, Barry.  Thanks for the work-around example!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Glad it worked!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,086 Points 10k badge 2x thumb
Hello All -

Today I am publishing version 1.5 of TFG Components.  This release includes a workaround for a bug inside of Chrome that was introduced in Chrome Version 53.  

This workaround should eliminate the intermittent issues that some users are seeing with "e.createConditionsFromXml" exception.  Please note that this does NOT fix the Chrome bug itself.  Instead, it is just a workaround to avoid the known code path inside of jQuery that exposes the bug that is inside of Chrome.

I have also filed a bug against Chrome which you can track at https://bugs.chromium.org/p/chromium/issues/detail?id=647887.

Version 1.5 Release notes:
The latest version is always available here.
Full release notes are available in the readme.

As always, feedback appreciated, keep it coming!

Thank you!
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Thank you Barry, some of my users where experiencing this issue and i could not figure it out.
The new version helped as the error is now gone

Like usual, great job!

Thx
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,086 Points 10k badge 2x thumb
Glad the new version helped Dave, thanks for the update!

FYI - It looks like Chrome team has already made a fix for the Chrome bug and indicated they will backport it to 53. See updated details at https://bugs.chromium.org/p/chromium/....
Photo of mB Andréas K.LeF

mB Andréas K.LeF

  • 1,244 Points 1k badge 2x thumb
wow. Bravo! That was ninja-freaking fast. So awesome to see them backporting this aswell
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,086 Points 10k badge 2x thumb
All - The Chrome fix is now available in Chrome Version 53.0.2785.143 m.  I believe it made it to the 54 & 55 branches as well, just not sure which specific version.
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Amazing work, Barry. I've asked my team to take a look at this as I think it could be really useful.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Thanks Glen, hope you guys find it useful. Enjoy!
Photo of David Forder

David Forder

  • 2,154 Points 2k badge 2x thumb
It's an awesome component Barry .. great work. Is there a piece of javascript that will trigger it to close - I have menus in a collapsible wrapper and would love it to close when a button pressed?
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Thanks David, glad you find it helpful.

Yes, you can trigger wrappers to open and close - there are two options depending on your use case:

1) Publish tfg.openwrappers or tfg.closewrappers events - Using the stock Skuid action framework, you can publish these events and all wrappers on the page will either open or close

2) Use the javascript API - You can open/close all wrappers or open/close specific wrappers.

The information on both approaches is detailed in Video #2 starting at the 2:30 min mark.
Photo of mB Roman Melnik

mB Roman Melnik

  • 2,802 Points 2k badge 2x thumb

Huh, that's funny.. I use this component all the time, but I think I skipped over your explanation of the API when you first released this (out of my technical comfort-zone at the time).

And here I am, only now discovering that you can use the API as a trigger for collapsible wrappers.

Learn something new every day. Thanks Barry!
(Edited)
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
You're welcome :)  Also forgot to mention that you can do things via the API beyond just open/close such as inspect state (isOpen, isClosed, etc.).  The video has all the details.
Photo of Matt Small

Matt Small

  • 1,182 Points 1k badge 2x thumb
Hi all, 

Is it possible to add this on the Skuid platform?
Photo of mB Roman Melnik

mB Roman Melnik

  • 2,802 Points 2k badge 2x thumb
Hi Matt, this should definitely be possible. Rather than uploading a Static Resource, with the Skuid Platform you can upload 'Files'. See this post:
https://community.skuid.com/skuid/topics/skuid-native-platform-uploading-static-resources?topic-repl...

Although admittedly, I haven't tried uploading/using Barry's custom component on the Skuid Platform myself - so perhaps he can confirm that for you ;)
(Edited)
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hi Matt - Roman is correct, the TFG Component pack should work on Skuid Platform.  When Skuid Platform was first launched, I tested and confirmed everything worked although I haven't tested recently.  If you encounter any issues, please let me know and I'll do my best to investigate.
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Hi Barry,

Quick question regarding small visual issue i'm having with the TFG Collapsible wrapper and wondering if you have any suggestion

On my page I have a table showing the aggregate results of an object, and under that table I have a collapsible wrapper with a table to go see the details of those aggregated data if needed. By default it's collapsed

the problem is table filter treat the wrapper as if it does not exist and we cannot access many of the condition/values as they get hidden by the wrapper (see screenshot below)

Any ideas?



Thx
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hi Dave -

I've seen a problem similar to this before.  When Skuid first released the Nav menu, the drop-down from that menu would behave similar to what you have captured in your screenshot.  Without digging in to this, I'd venture to guess that the problem you're having is more with the drop-down menu from the table than with the CW.

That said, a few questions:

1) What version of Skuid are you running?
2) Can you try putting a collapsible field editor under the table instead of the CW and see if the same problem occurs?
3) If the same problem doesn't occur with #2, can you provide a sample page using stock objects and send over?  I haven't used Skuid in years so I can't promise anything but I'll try to carve out a few cycles to take a closer look

Thanks!
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Hi Barry and thank you for your help

So testing your request with a collapsible field editor under the table I do not experience the same problem

And furthermore discovered a new detail, my problem only happens when this is a Page include

So basically when i preview this page with table and CW under, it works normally and CW does not affect drop down

Now the same page when it's a Page Include , behaves as the screenshot shown above.

Will try to create the page you requested shortly and will have to probable create both pages for you to see the issue.

Thx
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Dave,  this was a bug with nav components and page includes at some point, but is fixed in more recent versions of skuid.

Workaround by adding some css to your page:
.nx-include-panel { z-index: -1; }

See https://community.skuid.com/skuid/topics/search-component-drop-down-suggestions-dont-render-over-pag...
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Ok Test Page done, and 1 more important detail, it only happens when there's another page include under the original page include

Here are both pages with stock objects

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true"> <models> <model id="account" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Account"> <fields> <field id="Name"/> </fields> <conditions> <condition type="fieldvalue" value="TOMORROW" enclosevalueinquotes="false" field="CreatedDate" state="filterableon" inactive="false" name="CreatedDate" operator="="/> </conditions> <actions/> </model> </models> <components> <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="account" buttonposition="left" mode="read" allowcolumnreordering="true" responsive="true" uniqueid="sk-2Jkvt-113" emptysearchbehavior="query"> <fields> <field id="Name" hideable="true" uniqueid="fi-2Jr5--153"/> </fields> <rowactions> <action type="edit"/> <action type="delete"/> </rowactions> <massactions usefirstitemasdefault="true"> <action type="massupdate"/> <action type="massdelete"/> </massactions> <views> <view type="standard"/> </views> <filters> <filter type="select" filteroffoptionlabel="New Filter" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" conditionsource="manual" labelmode="no" condition="CreatedDate"> <sources> <source type="manual" effectsbehavior="justdefault"> <options> <option label="TODAY" type="simple" value="TODAY"/> <option label="TODAY" type="simple" value="TODAY"/> <option label="TODAY" type="simple" value="TODAY"/> <option label="TODAY" type="simple" value="TODAY"/> <option label="TODAY" type="simple" value="TODAY"/> <option label="TODAY" type="simple" value="TODAY"/> <option label="TODAY" type="simple" value="TODAY"/> <option label="TODAY" type="simple" value="TODAY"/> <option label="TODAY" type="simple" value="TODAY"/> </options> </source> </sources> </filter> </filters> <searchfields/> </skootable> <tfg__collapsiblewrapper title="New Wrapper" showheader="yes" collapsible="collapsed" deferrenderingcontents="true" uniqueid="sk-2Jlhz-127"> <components> <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="account" buttonposition="" mode="read" allowcolumnreordering="true" responsive="true" uniqueid="sk-2JmVu-132"> <fields> <field id="Name" hideable="true" uniqueid="fi-2Ju2I-178"/> </fields> <rowactions> <action type="edit"/> <action type="delete"/> </rowactions> <massactions usefirstitemasdefault="true"> <action type="massupdate"/> <action type="massdelete"/> </massactions> <views> <view type="standard"/> </views> </skootable> </components> <styles> <styleitem type="background"/> <styleitem type="border"/> <styleitem type="size"/> </styles> </tfg__collapsiblewrapper> </components> <resources> <labels/> <javascript/> <css/> </resources> <styles> <styleitem type="background" bgtype="none"/> </styles> </skuidpage> 


And here is page include sample page

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models/>
    <components>
        <includepanel type="skuid" uniqueid="sk-2K-Nr-98" pagename="test_account_bug" module=""/>
        <includepanel type="skuid" uniqueid="sk-2L5yV-110" pagename="test_account_bug" module=""/>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>

Thank you
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Thank you for suggestion Matt,

Did as suggested and the issue still persist

Even reading through link you sent, I updated my skuid version to 10.0.23 (was on 10.0.4) and still same issue

Just to make sure i did it right

I added the css as In-Line , gave it a name and added this name in css class of each page include

Let me know if any other suggestion or if missed something

Thx
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
I dunno about what sort of pages get most Skuid Eyes - but this little conversation has had my eyes... 

There have been reports of the navigation component dropping behind page includes.  I thought they had been addressed.  I'm not sure we tested with 2 page includes.....  (Who even does that?) 

Will look though... 
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
That's another thing to test, what happens with a Nav component on top of the page with a Page include underneath it.  Might give another lens to view the problem from.

Thanks Rob!
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
I do two page includes! :) 

I think we might actually have a page include with tree layers out there somewhere.
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
I have a page with 8 page Includes, one under the other :D

I tend to create pieces separately and that way have the ability to reuse them in page include wnv the need arise, instead of recreating over and over
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Yep, page includes are still the only way to "componentize" functionality and reuse across pages. 

"Reusable components" was (hopefully still is) on the Skuid Roadmap - it's an idea that dates back at least 3 years - https://community.skuid.com/skuid/topics/improve-re-usability-of-components-action-sequences-etc.  Among the many benefits of "reusable components" would be minimizing the page includes which would yield all types of benefits (e.g. performance, improved component integration, etc.)
Photo of Emma

Emma

  • 174 Points 100 badge 2x thumb
Hi Barry,

I was wondering if there is any way to refresh the content of the title in the collapsible wrappers?

On several pages we have collapsible wrapper headers that contain the skuid merge field {{$Model.ModelName.data.length}} as part of the title, however when a data row is added/removed, this count doesn't update inside the collapsible wrapper header.

We also tried to create an aggregate model to count number of records instead of the merge field, and this also never updated despite re-querying the model unless we refreshed the page.

Any help would be greatly appreciated!

Thank you
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,086 Points 10k badge 2x thumb
Hi Emma -

It's been a long time since I used Skuid but from what I remember, when you use $Model.ModelName.data.length (or really anything $Model.ModelName.data...) Skuid doesn't trigger a change event so there is no way to "refresh".  From what I recall, Skuid parses the merge syntax and in most situations, is able to figure out what you are "listening/looking" for but when it comes to using the "data" property, it's not able to identify as compared to $Modal.FieldName.  

If you apply the same merge syntax on a "stock" Skuid component (e.g. button), you should encounter the same limitation so this isn't a CW issue.

All that said, its very possible that this has changed in recent versions.

Couple of things:

1) Can you try applying the same merge syntax to a button and see if you encounter the same result?

2) As a potential workaround, I believe what I used to do was create another model that had a Formula field that pointed to $Model.ModelName.data.length.  Then, I use the "tracking model" in the CW header (or any other component for that matter).  The key here was making sure to chose the right events so that the tracking model would update on row adds/deletes/etc.  I might have even had to do this in JS, I can't recall exactly, sorry.

Hope this helps and let me know.
Photo of Emma

Emma

  • 174 Points 100 badge 2x thumb
Hi Barry,

Thanks for your reply!

We tried putting the merge field in a few different components, such as a template field, field editor section header and a button which all updated the number of data rows automatically as you added/removed a row, so it seems like Skuid has changed this with recent updates. Although along with CW we have discovered tabsets also don't update with changes.

We hadn't tried using a tracking model, but we had tried using an aggregate model to count the number of Ids for a running total. Unfortunately, even querying the second model on save/deletion of the first didn't update the number in the CW title. After trying the tracking model approach, this also didn't update unfortunately.

We managed to find somewhat of a workaround, by putting actions on close to toggle the wrapper off and on (so force it to hide the CW then show it). This forces it to refresh, although this creates a poor user experience as it jumps around on the page as it hides then reappears.

Is there anything else you can think of that we can try to get it to refresh more smoothly?

Thank you again for your help so far.