Collapsible Wrapper Custom Component

  • 17
  • Idea
  • Updated 6 days 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,216 Points 10k badge 2x thumb

Posted 3 years ago

  • 17
Photo of Emily Davis

Emily Davis, Employee

  • 3,514 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,166 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,216 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,216 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,166 Points 10k badge 2x thumb
You're welcome, enjoy!
(Edited)
Photo of Dave

Dave

  • 5,650 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 Barry Schnell

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
You're welcome - glad to hear you'll find this useful!
Photo of Dave

Dave

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

Thought i would make you aware of 1 potential issue I just noticed.

If i have a chart inside a CW which  is initially collapsed, the chart come out pretty zoomed in..

If i add an action to query model after open, it fixes it.

No big deal, but would be useful not to have to run an unnecessary action

Thx
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
Hey Dave - Thanks for the feedback.  I've seen a scenario where when the CW is initially collapsed, when you open the chart expands beyond the containing 'div' element of the CW itself.  I think this is due to an issue with the chart itself but it definitely could be something in the CW.  Is this what you are describing by "zoomed in"?  If you can share a small repro of this using standard objects I'd be happy to work to isolate the issue and see if I can resolve it.  If it's something in the chart component itself (which I fear it is), there might not be anything I can do but if it's in the CW, I can definitely address.

Btw, are you using the latest version of the CW.  I fixed an issue a couple of weeks ago where the chart itself wouldn't even display when the CW was initially collapsed.

Thanks!
(Edited)
Photo of Dave

Dave

  • 5,650 Points 5k badge 2x thumb
Thank you for quick answer

1- I did update the static ressource before posting

2- here's xml using opp sample page

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" tabtooverride="Opportunities">   <models>
      <model id="FiscalPeriods" limit="20" query="true" createrowifnonefound="false" sobject="Opportunity" doclone="" type="aggregate" adapter="" unloadwarningifunsavedchanges="false">
         <fields/>
         <conditions>
            <condition type="fieldvalue" value="Existing Business - Renewal" enclosevalueinquotes="true" field="Type" operator="!="/>
            <condition type="fieldvalue" value="LAST_YEAR" enclosevalueinquotes="false" field="CloseDate" operator="gt"/>
         </conditions>
         <actions/>
         <groupby method="simple">
            <field id="Fiscal" name="fiscal"/>
         </groupby>
      </model>
      <model id="Opportunities" limit="30" query="true" createrowifnonefound="false" orderby="Amount DESC NULLS LAST" sobject="Opportunity" doclone="" type="" adapter="">
         <fields>
            <field id="AccountId"/>
            <field id="Amount"/>
            <field id="CloseDate"/>
            <field id="Account.Name"/>
            <field id="Name"/>
            <field id="StageName"/>
            <field id="OwnerId"/>
            <field id="Owner.Name"/>
            <field id="LastModifiedDate"/>
            <field id="CreatedDate"/>
            <field id="Probability"/>
            <field id="Account.BillingCountry"/>
            <field id="Description"/>
            <field id="Type"/>
            <field id="OpportunityLineItems" type="childRelationship" limit="1">
               <conditions/>
            </field>
            <field id="Id"/>
            <field id="Owner.Alias"/>
            <field id="Fiscal"/>
            <field id="Account.BillingState"/>
         </fields>
         <conditions logic="">
            <condition type="multiple" field="OwnerId" operator="in" inactive="true" enclosevalueinquotes="true" name="__autofilter__OwnerId" state="filterableoff" value=""/>
            <condition type="multiple" field="StageName" operator="in" inactive="true" enclosevalueinquotes="true" name="__autofilter__StageName" state="filterableoff" value=""/>
            <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="Fiscal" state="filterableoff" inactive="true" name="Fiscal"/>
            <condition type="fieldvalue" value="50000" enclosevalueinquotes="false" field="Amount" operator="gt" state="filterableoff" inactive="true" name="LargeOpp"/>
            <condition type="fieldvalue" field="CloseDate" operator="gte" inactive="true" enclosevalueinquotes="false" name="__autofilter__start__CloseDate" state="filterableoff" value=""/>
            <condition type="fieldvalue" field="CloseDate" operator="lte" inactive="true" enclosevalueinquotes="false" name="__autofilter__end__CloseDate" state="filterableoff" value=""/>
            <condition type="multiple" value="" field="StageName" operator="not in" enclosevalueinquotes="true" state="filterableon" inactive="false" name="HideLost">
               <values>
                  <value>Closed Lost</value>
               </values>
            </condition>
            <condition type="fieldvalue" value="1" enclosevalueinquotes="false" field="Amount" operator="gt" state="filterableon" inactive="false" name="AmountMorethanOne"/>
            <condition type="multiple" value="" field="CloseDate" operator="in" enclosevalueinquotes="false" state="filterableon" inactive="false" name="CurrentOpps">
               <values>
                  <value>LAST_N_QUARTERS:2</value>
                  <value>NEXT_N_QUARTERS:2</value>
                  <value>THIS_QUARTER</value>
               </values>
            </condition>
            <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="Account.BillingCountry" state="filterableoff" inactive="true" name="Account.BillingCountry"/>
            <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="Account.BillingState" state="filterableoff" inactive="true" name="Account.BillingState"/>
         </conditions>
         <actions>
            <action>
               <actions>
                  <action type="requeryModels" behavior="standard">
                     <models>
                        <model>TotalOppAggWon</model>
                        <model>TotalOppAggOpen</model>
                     </models>
                  </action>
               </actions>
               <events>
                  <event>models.saved</event>
               </events>
            </action>
         </actions>
      </model>
      <model id="PricebookEntries" limit="100" query="true" createrowifnonefound="false" orderby="Product2.Family, Product2.Name" sobject="PricebookEntry" doclone="" type="" adapter="" unloadwarningifunsavedchanges="false">
         <fields>
            <field id="Id"/>
            <field id="UnitPrice"/>
            <field id="Product2Id"/>
            <field id="Product2.Name"/>
         </fields>
         <conditions>
            <condition type="fieldvalue" value="true" enclosevalueinquotes="false" field="IsActive"/>
         </conditions>
         <actions/>
      </model>
      <model id="Account" limit="20" query="true" createrowifnonefound="false" sobject="Account" adapter="" type="" doclone="" unloadwarningifunsavedchanges="false">
         <fields>
            <field id="BillingState"/>
         </fields>
         <conditions/>
         <actions/>
      </model>
      <model id="OppDrawerContacts" limit="10" query="false" createrowifnonefound="false" sobject="OpportunityContactRole" doclone="" type="" adapter="">
         <fields>
            <field id="ContactId"/>
            <field id="Contact.Name"/>
            <field id="IsPrimary"/>
            <field id="Role"/>
            <field id="Contact.Title"/>
            <field id="Contact.AccountId"/>
            <field id="Contact.Account.Name"/>
            <field id="OpportunityId"/>
            <field id="Opportunity.Name"/>
            <field id="Contact.Phone"/>
            <field id="Contact.Email"/>
         </fields>
         <conditions>
            <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="OpportunityId" state="filterableoff" inactive="true" name="OpportunityId"/>
         </conditions>
         <actions/>
      </model>
      <model id="EmailToSF" limit="100" query="true" createrowifnonefound="false" orderby="LastModifiedDate DESC" sobject="EmailServicesAddress" adapter="" type="" doclone="" unloadwarningifunsavedchanges="false">
         <fields>
            <field id="LocalPart"/>
            <field id="EmailDomainName"/>
            <field id="ShowHideResetButton" uionly="true" displaytype="BOOLEAN" label="ShowHideResetButton"/>
         </fields>
         <conditions>
            <condition type="fieldvalue" value="EmailToSalesforce" enclosevalueinquotes="true" field="Function.FunctionName"/>
            <condition type="fieldvalue" value="true" enclosevalueinquotes="false" field="IsActive" operator="="/>
            <condition type="userinfo" value="" field="RunAsUserId" operator="=" enclosevalueinquotes="true" userinfotype="userid"/>
         </conditions>
         <actions/>
      </model>
      <model id="OppDrawerLineItems" limit="" query="false" createrowifnonefound="false" sobject="OpportunityLineItem" orderby="SortOrder, PricebookEntry.Product2.Name" adapter="" type="">
         <fields>
            <field id="SortOrder"/>
            <field id="UnitPrice"/>
            <field id="Quantity"/>
            <field id="Description"/>
            <field id="ListPrice"/>
            <field id="ServiceDate"/>
            <field id="PricebookEntry.Product2Id"/>
            <field id="PricebookEntry.Product2.Name"/>
            <field id="PricebookEntryId"/>
            <field id="PricebookEntry.UnitPrice"/>
            <field id="Discount"/>
            <field id="TotalPriceFormula" uionly="true" displaytype="FORMULA" label="Total Price" readonly="true" returntype="CURRENCY" precision="9" scale="2">
               <formula>{{Quantity}}*{{UnitPrice}}*((100-{{Discount}})/100)</formula>
            </field>
            <field id="UnitPrice2" uionly="true" displaytype="FORMULA" label="Unit Price 2 (for hacky work only!)" readonly="true" returntype="CURRENCY" precision="9" scale="2">
               <formula>{{UnitPrice}}*2</formula>
            </field>
            <field id="UnitPriceTemp" uionly="true" displaytype="CURRENCY" label="Unit Price for hacks" precision="9" scale="2"/>
            <field id="TotalPrice"/>
            <field id="SalesPriceFormula" uionly="true" displaytype="FORMULA" label="Sales Price" readonly="true" returntype="CURRENCY" precision="9" scale="2">
               <formula>{{PricebookEntry.UnitPrice}}</formula>
            </field>
         </fields>
         <conditions>
            <condition type="fieldvalue" operator="=" value="" field="OpportunityId" novaluebehavior="" enclosevalueinquotes="true" state="filterableoff" inactive="true" name="OpportunityId"/>
         </conditions>
         <actions>
            <action>
               <actions>
                  <action type="updateRow" fieldmodel="OppDrawerLineItems" field="UnitPrice" enclosevalueinquotes="false" value="{{{SalesPriceFormula}}}"/>
               </actions>
               <events>
                  <event>row.updated</event>
               </events>
               <fields>
                  <field>SalesPriceFormula</field>
               </fields>
            </action>
            <action>
               <actions>
                  <action type="updateRow" fieldmodel="OppDrawerLineItems" field="UnitPriceTemp" enclosevalueinquotes="false" value="{{{UnitPrice}}}"/>
                  <action type="updateRow" fieldmodel="OppDrawerLineItems" field="UnitPrice" enclosevalueinquotes="false" value="{{{UnitPrice2}}}"/>
                  <action type="updateRow" fieldmodel="OppDrawerLineItems" field="UnitPrice" enclosevalueinquotes="false" value="{{{UnitPriceTemp}}}"/>
               </actions>
               <events>
                  <event>row.updated</event>
               </events>
               <fields>
                  <field>Quantity</field>
               </fields>
            </action>
            <action>
               <actions>
                  <action type="save">
                     <models>
                        <model>Opportunities</model>
                     </models>
                  </action>
                  <action type="requeryModel" model="Opportunity" behavior="standard"/>
               </actions>
               <events>
                  <event>models.saved</event>
               </events>
            </action>
         </actions>
      </model>
      <model id="TaskPop" limit="10" query="false" createrowifnonefound="false" adapter="" type="" sobject="Task" doclone="" unloadwarningifunsavedchanges="false" orderby="ActivityDate DESC">
         <fields>
            <field id="Subject"/>
            <field id="Type"/>
            <field id="ActivityDate"/>
            <field id="Description"/>
            <field id="Status"/>
            <field id="OwnerId"/>
            <field id="WhoId"/>
            <field id="Who.Name"/>
            <field id="CreatedDate"/>
            <field id="Owner.Name"/>
            <field id="WhatId"/>
            <field id="What.Name"/>
         </fields>
         <conditions>
            <condition type="fieldvalue" value="" field="WhatId" operator="=" novaluebehavior="" enclosevalueinquotes="true" state="filterableon" inactive="false" name="WhatId"/>
            <condition type="fieldvalue" value="" field="WhoId" operator="=" novaluebehavior="" enclosevalueinquotes="true" state="filterableoff" inactive="true" name="WhoId"/>
            <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="OwnerId" state="filterableoff" inactive="true" name="OwnerId"/>
            <condition type="multiple" field="Type" operator="in" inactive="true" enclosevalueinquotes="true" name="__autofilter__Type" state="filterableoff" value=""/>
            <condition type="multiple" field="Status" operator="in" inactive="true" enclosevalueinquotes="true" name="__autofilter__Status" state="filterableoff" value=""/>
            <condition type="userinfo" value="" field="OwnerId" operator="=" enclosevalueinquotes="true" userinfotype="userid" state="filterableoff" inactive="true" name="mine"/>
         </conditions>
         <actions/>
      </model>
      <model id="user" limit="20" query="true" createrowifnonefound="false" adapter="" type="" sobject="User" orderby="Name">
         <fields>
            <field id="Name"/>
            <field id="Id"/>
            <field id="ShowCharts" uionly="true" displaytype="BOOLEAN" label="Show Charts" defaultValue="true"/>
         </fields>
         <conditions>
            <condition type="modelmerge" value="" field="Id" operator="in" model="TaskPop" enclosevalueinquotes="true" mergefield="OwnerId" novaluebehavior="deactivate"/>
            <condition type="userinfo" value="" field="Id" operator="=" enclosevalueinquotes="true" userinfotype="userid"/>
         </conditions>
         <actions/>
      </model>
      <model id="newtask" limit="20" query="false" createrowifnonefound="false" adapter="" type="" sobject="Task" doclone="" unloadwarningifunsavedchanges="false">
         <fields>
            <field id="Subject"/>
            <field id="Type"/>
            <field id="ActivityDate"/>
            <field id="Description"/>
            <field id="Status"/>
            <field id="OwnerId"/>
            <field id="WhoId"/>
            <field id="Who.Name"/>
            <field id="WhatId"/>
            <field id="What.Name"/>
         </fields>
         <conditions>
            <condition type="fieldvalue" value="" field="WhatId" operator="=" novaluebehavior="" enclosevalueinquotes="true" state="filterableoff" inactive="true" name="WhatId"/>
            <condition type="fieldvalue" value="" field="WhoId" operator="=" novaluebehavior="" enclosevalueinquotes="true" state="filterableoff" inactive="true" name="WhoId"/>
            <condition type="modelmerge" value="" field="OwnerId" operator="=" userinfotype="userid" model="user" enclosevalueinquotes="true" mergefield="Id" novaluebehavior="deactivate"/>
            <condition type="fieldvalue" value="TODAY" field="ActivityDate" operator="=" novaluebehavior="" enclosevalueinquotes="false" state="filterableon" inactive="false" name="ActivityDate"/>
            <condition type="fieldvalue" value="Completed" enclosevalueinquotes="true" field="Status" state="filterableoff" inactive="true" name="Completed"/>
            <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="Type" state="filterableoff" inactive="true" name="Type"/>
         </conditions>
         <actions/>
      </model>
      <model id="Followup" limit="20" query="false" createrowifnonefound="false" adapter="" type="" sobject="Task" doclone="" unloadwarningifunsavedchanges="false">
         <fields>
            <field id="Subject"/>
            <field id="Type"/>
            <field id="Description"/>
            <field id="WhoId"/>
            <field id="Who.Name"/>
            <field id="WhatId"/>
            <field id="What.Name"/>
            <field id="OwnerId"/>
            <field id="Owner.Name"/>
            <field id="Status"/>
            <field id="ActivityDate"/>
            <field id="ReminderDateTime"/>
            <field id="Type"/>
         </fields>
         <conditions>
            <condition type="modelmerge" value="" field="WhoId" operator="=" model="newtask" enclosevalueinquotes="true" mergefield="WhoId" novaluebehavior="deactivate"/>
            <condition type="modelmerge" value="" field="WhatId" operator="=" model="newtask" enclosevalueinquotes="true" mergefield="WhatId" novaluebehavior="deactivate"/>
            <condition type="modelmerge" value="" field="Who.Name" operator="=" model="newtask" enclosevalueinquotes="true" mergefield="Who.Name" novaluebehavior="deactivate"/>
            <condition type="modelmerge" value="" field="OwnerId" operator="=" model="newtask" enclosevalueinquotes="true" mergefield="OwnerId" novaluebehavior="deactivate"/>
            <condition type="fieldvalue" value="Next Step" enclosevalueinquotes="true" field="Type"/>
         </conditions>
         <actions/>
      </model>
      <model id="newcontact" limit="20" query="false" createrowifnonefound="false" adapter="" type="" sobject="Contact" doclone="" unloadwarningifunsavedchanges="false">
         <fields>
            <field id="AccountId"/>
            <field id="Account.Name"/>
            <field id="FirstName"/>
            <field id="LastName"/>
            <field id="Title"/>
         </fields>
         <conditions>
            <condition type="fieldvalue" value="" field="AccountId" operator="=" mergefield="Id" novaluebehavior="" state="filterableon" inactive="false" name="AccountId" enclosevalueinquotes="true"/>
            <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="Account.Name" state="filterableoff" inactive="true" name="Account.Name"/>
         </conditions>
         <actions/>
      </model>
      <model id="TotalOppAggWon" limit="" query="true" createrowifnonefound="false" adapter="" type="aggregate" sobject="Opportunity">
         <fields>
            <field id="Amount" name="sumAmount" function="SUM"/>
            <field id="total" uionly="true" displaytype="FORMULA" label="total" readonly="true" returntype="CURRENCY" precision="9" scale="0">
               <formula>{{{sumAmount}}}</formula>
            </field>
         </fields>
         <conditions>
            <condition type="multiple" value="" field="StageName" operator="in" enclosevalueinquotes="true">
               <values>
                  <value>Closed Won</value>
                  <value>Invoice</value>
               </values>
            </condition>
            <condition type="fieldvalue" value="THIS_YEAR" enclosevalueinquotes="false" field="CloseDate"/>
         </conditions>
         <actions/>
         <groupby method="simple"/>
      </model>
      <model id="TotalOppAggOpen" limit="" query="true" createrowifnonefound="false" adapter="" type="aggregate" sobject="Opportunity">
         <fields>
            <field id="Amount" name="sumAmount" function="SUM"/>
            <field id="total" uionly="true" displaytype="FORMULA" label="total" precision="9" scale="0" readonly="true" returntype="CURRENCY">
               <formula>{{{sumAmount}}}</formula>
            </field>
         </fields>
         <conditions>
            <condition type="multiple" value="" field="StageName" operator="not in" enclosevalueinquotes="true">
               <values>
                  <value>Closed Won</value>
                  <value>Closed Lost</value>
                  <value>Invoice</value>
               </values>
            </condition>
         </conditions>
         <actions/>
         <groupby method="simple"/>
      </model>
      <model id="NOTme" limit="20" query="false" createrowifnonefound="false" adapter="" type="" sobject="User">
         <fields>
            <field id="Id"/>
            <field id="Name"/>
         </fields>
         <conditions>
            <condition type="userinfo" value="" field="Id" operator="!=" enclosevalueinquotes="true" userinfotype="userid"/>
         </conditions>
         <actions/>
      </model>
   </models>
   <components>
      <pagetitle model="Opportunities" uniqueid="sk-1dsNnG-106">
         <maintitle>{{Model.LabelPlural}}</maintitle>
         <actions>
            <action type="savecancel">
               <models>
                  <model>PricebookEntries</model>
                  <model>OppDrawerContacts</model>
                  <model>OppDrawerLineItems</model>
               </models>
               <savehotkeys>
                  <hotkey modifiers="ctrl,meta" key="s"/>
               </savehotkeys>
            </action>
         </actions>
      </pagetitle>
      <skootable showconditions="true" showsavecancel="false" searchbox="true" searchmethod="server" createrecords="false" model="Opportunities" pagesize="all" showexportbuttons="false" mode="read" tablescrollheight="600px" allowscrollbars="false" floatheader="true" freezeleftcolumns="false" columnstofreeze="" buttonposition="left" emptysearchbehavior="query" instantfilters="true" cssclass="leftFooter" uniqueid="sk-1dsNnG-107">
         <fields/>
         <rowactions/>
         <actions defaultlabel="Global Actions" defaulticon="ui-silk-wand" usefirstitemasdefault="true"/>
         <massactions defaultlabel="" defaulticon="" usefirstitemasdefault="true"/>
         <filters>
            <filter type="multiselect" filteroffoptionlabel="All Owners" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" conditionsource="auto" labelmode="manual" conditionfield="OwnerId" conditionoperator="in" label="Owner"/>
            <filter type="daterange" filteroffoptionlabel="New Filter" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" conditionsource="auto" labelmode="auto" conditionfield="CloseDate"/>
            <filter type="select" filteroffoptionlabel="All Quarters" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" conditionsource="manual" labelmode="manual" condition="Fiscal" label="Fiscal Periods">
               <sources>
                  <source type="model" effectsbehavior="justdefault" model="FiscalPeriods">
                     <labeltemplate>{{{fiscal}}}Q</labeltemplate>
                     <valuetemplate>{{fiscal}}</valuetemplate>
                  </source>
               </sources>
            </filter>
            <filter type="multiselect" filteroffoptionlabel="All Opportunity Types" createfilteroffoption="true" affectcookies="true" condition="Type" conditionsource="auto" labelmode="auto" conditionfield="Type" conditionoperator="in"/>
            <filter type="multiselect" filteroffoptionlabel="All Stages" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" conditionsource="auto" labelmode="auto" conditionfield="StageName" conditionoperator="in"/>
            <filter type="select" filteroffoptionlabel="New Filter" createfilteroffoption="false" affectcookies="true" autocompthreshold="25" conditionsource="manual" labelmode="manual" label="Special Filters">
               <sources>
                  <source type="manual" effectsbehavior="justdefault">
                     <options>
                        <option label="Current Pipeline Opps" type="complex">
                           <effects>
                              <effect action="activate" value="" condition="HideLost"/>
                              <effect action="activate" value="" condition="AmountMorethanOne"/>
                              <effect action="activate" value="" condition="CurrentOpps"/>
                              <effect action="deactivate" value="" condition="LargeOpp"/>
                           </effects>
                        </option>
                        <option label="Large Opportunities Only" type="complex">
                           <effects>
                              <effect action="activate" value="" condition="LargeOpp"/>
                           </effects>
                        </option>
                        <option label="All Opportunities" type="complex">
                           <effects>
                              <effect action="deactivate" value="" condition="HideLost"/>
                              <effect action="deactivate" value="" condition="AmountMorethanOne"/>
                              <effect action="deactivate" value="" condition="CurrentOpps"/>
                              <effect action="deactivate" value="" condition="LargeOpp"/>
                           </effects>
                        </option>
                     </options>
                  </source>
               </sources>
            </filter>
         </filters>
         <searchfields>
            <searchfield return="false" field="Name" operator="contains"/>
            <searchfield return="false" field="Type" operator="contains"/>
            <searchfield return="false" field="Account.Name" operator="contains"/>
            <searchfield return="false" field="Account.BillingState" operator="contains"/>
            <searchfield return="false" field="Account.BillingCountry" operator="contains"/>
            <searchfield return="false" field="Fiscal" operator="contains"/>
            <searchfield return="false" field="Owner.Alias" operator="contains"/>
         </searchfields>
         <renderconditions logictype="and"/>
      </skootable>
<tfg__collapsiblewrapper title="New Wrapper" showheader="yes" collapsible="collapsed" uniqueid="sk-bYAcJ-664">
   <components>
      <wrapper uniqueid="sk-1lZLWW-343">
         <components>
            <panelset type="custom" scroll="" uniqueid="chartsPanel">
               <panels>
                  <panel width="20%">
                     <components>
                        <wrapper uniqueid="sk-1hG3u5-1456">
                           <components/>
                           <styles>
                              <styleitem type="background"/>
                              <styleitem type="border"/>
                              <styleitem type="size" height="custom">
                                 <styles>
                                    <styleitem property="min-height" value="20px"/>
                                 </styles>
                              </styleitem>
                           </styles>
                        </wrapper>
                        <wrapper uniqueid="sk-1nFSzS-714">
                           <components>
                              <richtext multiple="false" uniqueid="sk-1nFq7T-761" model="TotalOppAggOpen">
                                 <contents>&lt;p style="text-align: center;"&gt;&lt;span style="font-family:tahoma,geneva,sans-serif;"&gt;&lt;span style="color:#FFFFFF;"&gt;&lt;span style="font-size:24px;"&gt;In Pipeline:&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p style="text-align: center;"&gt;&lt;span style="font-family:tahoma,geneva,sans-serif;"&gt;&lt;span style="color:#FFFFFF;"&gt;&lt;span style="font-size:24px;"&gt;{{total}}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
</contents>
                              </richtext>
                           </components>
                           <styles>
                              <styleitem type="background" bgtype="color">
                                 <styles>
                                    <styleitem property="background-color" value="#0288d1"/>
                                 </styles>
                              </styleitem>
                              <styleitem type="border" padding="bottom,right,top,left," margin="bottom,">
                                 <styles>
                                    <styleitem property="padding-left" value="0.5em"/>
                                    <styleitem property="padding-top" value="1em"/>
                                    <styleitem property="padding-right" value="0.5em"/>
                                    <styleitem property="padding-bottom" value="1em"/>
                                    <styleitem property="margin-bottom" value="1em"/>
                                    <styleitem property="box-sizing" value="border-box"/>
                                 </styles>
                              </styleitem>
                              <styleitem type="size"/>
                           </styles>
                           <renderconditions logictype="and"/>
                        </wrapper>
                        <wrapper uniqueid="sk-1nFSzS-715">
                           <components>
                              <richtext multiple="false" uniqueid="sk-1nFq7T-761" model="TotalOppAggWon">
                                 <contents>&lt;p style="text-align: center;"&gt;&lt;span style="font-family:tahoma,geneva,sans-serif;"&gt;&lt;span style="color:#FFFFFF;"&gt;&lt;span style="font-size:24px;"&gt;Won this Year:&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p style="text-align: center;"&gt;&lt;span style="font-family:tahoma,geneva,sans-serif;"&gt;&lt;span style="color:#FFFFFF;"&gt;&lt;span style="font-size:24px;"&gt;{{total}}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
</contents>
                              </richtext>
                           </components>
                           <styles>
                              <styleitem type="background" bgtype="color">
                                 <styles>
                                    <styleitem property="background-color" value="#0288d1"/>
                                 </styles>
                              </styleitem>
                              <styleitem type="border" padding="bottom,right,top,left,">
                                 <styles>
                                    <styleitem property="padding-left" value="0.5em"/>
                                    <styleitem property="padding-top" value="1em"/>
                                    <styleitem property="padding-right" value="0.5em"/>
                                    <styleitem property="padding-bottom" value="1em"/>
                                    <styleitem property="box-sizing" value="border-box"/>
                                 </styles>
                              </styleitem>
                              <styleitem type="size"/>
                           </styles>
                           <renderconditions logictype="and"/>
                        </wrapper>
                     </components>
                  </panel>
                  <panel width="50%">
                     <components>
                        <wrapper uniqueid="sk-1hG3Dl-1449">
                           <components/>
                           <styles>
                              <styleitem type="background"/>
                              <styleitem type="border"/>
                              <styleitem type="size" height="custom">
                                 <styles>
                                    <styleitem property="min-height" value="35px"/>
                                 </styles>
                              </styleitem>
                           </styles>
                        </wrapper>
                        <skuidvis__chart model="Opportunities" maintitle="{{Model.labelPlural}} by Quarter and Stage" type="column" subtitle="" stacking="true" height="300px" uniqueid="sk-1dsNnG-108" rendersnippet="ChartFix" export="off">
                           <dataaxes>
                              <axis id="Amount" title="Stage" type="yaxis"/>
                           </dataaxes>
                           <categoryaxes>
                              <axis id="Fiscal" field="CloseDate" title="Fiscal Periods" categorytype="field" fillvals="true" dategranularity="calquarter">
                                 <allowedgranularities/>
                              </axis>
                           </categoryaxes>
                           <serieslist>
                              <series valuefield="Amount" xvaluefield="Fiscal" yvaluefield="Probability" sizefield="Amount" splitfield="StageName" splittype="template" splittemplate="{{StageName}}" aggfunction="sum">
                                 <actions>
                                    <action type="blockUI" message="Filtering Data">
                                       <conditions>
                                          <condition type="contextrows" field="Id" mergefield="Id" operator="in" autocreated="true"/>
                                       </conditions>
                                    </action>
                                    <action type="setCondition" model="Opportunities" condition="Fiscal" value="{{rows.0.Fiscal}}">
                                       <conditions>
                                          <condition type="contextrows" field="Id" mergefield="Id" operator="in" autocreated="true"/>
                                       </conditions>
                                    </action>
                                    <action type="requeryModel" model="Opportunities" behavior="standard">
                                       <conditions>
                                          <condition type="contextrows" field="Id" mergefield="Id" operator="in" autocreated="true"/>
                                       </conditions>
                                    </action>
                                    <action type="unblockUI">
                                       <conditions>
                                          <condition type="contextrows" field="Id" mergefield="Id" operator="in" autocreated="true"/>
                                       </conditions>
                                    </action>
                                 </actions>
                              </series>
                           </serieslist>
                           <colors>
                              <value>#81d4fa</value>
                              <value>#4dd0e1</value>
                              <value>#26a69a</value>
                              <value>#259b24</value>
                              <value>#039be5</value>
                              <value>#0097a7</value>
                              <value>#00695c</value>
                              <value>#72d572</value>
                              <value>#4fc3f7</value>
                              <value>#26c6da</value>
                              <value>#009688</value>
                              <value>#0a8f08</value>
                              <value>#0288d1</value>
                              <value>#00838f</value>
                           </colors>
                           <legend layout="vertical" halign="right" valign="middle"/>
                           <allowedtypes/>
                        </skuidvis__chart>
                     </components>
                  </panel>
                  &lt
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
Hey Dave - Thanks for the answers and providing the sample.  Unfortunately, it looks like the entire page didn't paste properly or possibly there might be a limit to the number of characters in a post.  Can you post the page XML to a dropbox URL or equivalent?
Photo of Dave

Dave

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

https://codeshare.io/hTgn4

thx
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 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,216 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,650 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,216 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,166 Points 10k badge 2x thumb
Great to hear that you are finding it useful, your welcome!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 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,650 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,216 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,650 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,216 Points 10k badge 2x thumb
Awesome, glad it worked and thanks for the Skuid! :)
Photo of Matt Sones

Matt Sones, Champion

  • 31,904 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,216 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

  • 8,196 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,216 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,798 Points 2k badge 2x thumb
#barryforpresident
Photo of Dave

Dave

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

Dave

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

<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="open" uniqueid="pageLoaderWrapper" cssclass="pageLoaderWrapper">
         <components>
            <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Account" buttonposition="" mode="read" uniqueid="sk-30DUfC-253">
               <fields>
                  <field id="Fax"/>
                  <field id="Name"/>
                  <field id="Phone"/>
               </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>
         <onbeforefirstopenactions>
            <action type="blockUI" message="Loading..." timeout="1000"/>
         </onbeforefirstopenactions>
         <onafterfirstopenactions/>
         <onbeforeopenactions/>
         <onafteropenactions/>
         <onbeforecloseactions/>
         <onaftercloseactions/>
         <renderconditions logictype="and"/>
      </tfg__collapsiblewrapper>
      <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 id="Name"/>
            <field id="Phone"/>
            <field id="Rating" valuehalign="" type=""/>
            <field id="AnnualRevenue"/>
            <field id="NewField" decimalplaces="" valuehalign="" type="">
               <label>test</label>
               <summaries>
                  <summary>sum</summary>
               </summaries>
            </field>
         </fields>
         <rowactions>
            <action type="edit"/>
            <action type="delete"/>
         </rowactions>
         <massactions usefirstitemasdefault="true">
            <action type="massupdate"/>
            <action type="massdelete"/>
         </massactions>
         <views>
            <view type="standard"/>
         </views>
         <searchfields/>
      </skootable>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript/>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>


Thx
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
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 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>
   <model id="Tracker" limit="1" query="false" createrowifnonefound="true" adapter="" type="" sobject="Account">
<fields>
   <field id="ShowTop" uionly="true" displaytype="BOOLEAN" label="ShowTop" defaultValue="true"/>
</fields>
<conditions/>
<actions/>
</model>
</models>
   <components>
<basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Tracker" buttonposition="" uniqueid="sk-30NG6c-159" mode="edit">
   <columns>
      <column width="100%">
         <sections>
            <section title="Section A" collapsible="open">
               <fields>
                  <field id="ShowTop"/>
               </fields>
            </section>
         </sections>
      </column>
   </columns>
</basicfieldeditor>
<skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Account" buttonposition="" mode="read" uniqueid="sk-30DUfC-253">
               <fields>
                  <field id="Fax"/>
                  <field id="Name"/>
                  <field id="Phone"/>
               </fields>
               <rowactions>
                  <action type="edit"/>
                  <action type="delete"/>
               </rowactions>
               <massactions usefirstitemasdefault="true">
                  <action type="massupdate"/>
                  <action type="massdelete"/>
               </massactions>
               <views>
                  <view type="standard"/>
               </views>
            <renderconditions logictype="and">
<rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="Tracker" sourcetype="fieldvalue" nosourcerowbehavior="skipandnorender" field="ShowTop" value="true"/>
</renderconditions>
</skootable>
      
      <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 id="Name"/>
            <field id="Phone"/>
            <field id="Rating" valuehalign="" type=""/>
            <field id="AnnualRevenue"/>
            <field id="NewField" decimalplaces="" valuehalign="" type="">
               <label>test</label>
               <summaries>
                  <summary>sum</summary>
               </summaries>
            </field>
         </fields>
         <rowactions>
            <action type="edit"/>
            <action type="delete"/>
         </rowactions>
         <massactions usefirstitemasdefault="true">
            <action type="massupdate"/>
            <action type="massdelete"/>
         </massactions>
         <views>
            <view type="standard"/>
         </views>
         <searchfields/>
      </skootable>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript/>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>
Photo of Dave

Dave

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

Barry Schnell, Champion

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

Dave

  • 5,650 Points 5k badge 2x thumb
sure will do in a bit
Photo of Barry Schnell

Barry Schnell, Champion

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

Dave

  • 5,650 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,216 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,650 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,216 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,650 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,216 Points 10k badge 2x thumb
Very creative use case Dave, glad your finding the component so useful!
Photo of Dave

Dave

  • 5,650 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 Barry Schnell

Barry Schnell, Champion

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

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
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/skuid/topics/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.
Photo of Matt Sones

Matt Sones, Champion

  • 31,904 Points 20k badge 2x thumb
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/skuid/topics/table-hidden-on-pageload 
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,308 Points 20k badge 2x thumb
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... <GRIN> ) 
Photo of Dave

Dave

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

Barry Schnell, Champion

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

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
Dave - Version 1.4 should workaround/solve the issue you are having with Page Includes and tables.  The CW now fully supports deferred rendering of wrapper contents (prior to version 1.4 it didn't fully defer rendering).  This doesn't solve the issue with the Page Include and Table itself, but it does workaround the problem in addition to providing more flexibility in the CW.

Matt - Sorry this won't help solve the issue you are having with Page Includes and Tables, however you might want to try putting your page include inside of a CW.  If you configure the CW with no header and deferred rendering it will essentially behave just like a standard Skuid Wrapper component.  For some reason, deferring the rendering in the CW seems to "workaround" the issue that the Skuid Table has in calculating the height when inside a page include (I think it's due to the sequence of events and that fire that cause the table to recalc height).
Photo of Matt Sones

Matt Sones, Champion

  • 31,904 Points 20k badge 2x thumb
Barry,

Thanks for the help. We'll try it out!

FYI... it looks like the 'Deferred rendering' property is only available if 'Show wrapper header' != No. Seems like that property should be rendered regardless of whether the header is visible?
Photo of Dave

Dave

  • 5,650 Points 5k badge 2x thumb
Thank you Barry for the fast and good work !

I've tested it all and love it, specially the clickable header :)

Thx
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
Matt - I'm not sure what I was thinking when I mentioned the part about marking it deferred after marking it to not show the header.  When there is no header (or if it's not collapsible), it wouldn't make sense to defer rendering because the CW contents need to be drawn right away - this is why the property isn't available in those cases.  Deferred rendering only comes in to play when the CW "could" be collapsed initially (and hence defer the contents until its opened).  Sorry for misleading you on this one!  It still might be worth trying to put your table inside of a CW (with no header) and seeing if the problem goes away.  It's possible that the timing of the rendering from within the CW will cause the table issue to go away.  If you do try it, would be interested in knowing the result.

Dave - Glad you like the header :)  I'm assuming based on your comment that the table problem no longer occurs with CW 1.4, correct?
Photo of Matt Sones

Matt Sones, Champion

  • 31,904 Points 20k badge 2x thumb
Thanks, Barry.

The CW doesn't help. :(
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
Thanks for trying Matt, sorry it didn't help :(
Photo of Dave

Dave

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

Barry Schnell, Champion

  • 18,216 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,216 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,216 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,904 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,224 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,166 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,224 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,742 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,166 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,630 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,216 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

  • 8,196 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,356 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

  • 8,196 Points 5k badge 2x thumb
Thank you Tami
Photo of Tami Lust

Tami Lust

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

Bill Fox

  • 8,196 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,216 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

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

Jared Jones

  • 2,224 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,216 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,224 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,216 Points 10k badge 2x thumb
Glad it worked!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 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,630 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,216 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,216 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,748 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,216 Points 10k badge 2x thumb
Thanks Glen, hope you guys find it useful. Enjoy!
Photo of David Forder

David Forder

  • 2,380 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,216 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,216 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,216 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,650 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,216 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,650 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,904 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,650 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,650 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 Matt Sones

Matt Sones, Champion

  • 31,904 Points 20k badge 2x thumb
Yikes! Sorry that's still not working.

The name of your css resource doesn't matter. It's the actual text inside the css resource that matters.

if you give your page includes the cssclass "my-page-include", then your css should read like this:

.my-page-include {
  z-index: -1;
}

Try doing that with only the page include that is covering your dropdown list?
Photo of Dave

Dave

  • 5,650 Points 5k badge 2x thumb
Ok that's what I thought and still not working, but still tyvm for your help and I posted on link you sent me , hopefully someone from skuid will be able to look into it

Thx!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
Matt - Thanks for helping out here!

Dave -

Appreciate you trying the few ideas thus far, sorry that they haven't solved the issue.  I'm still guessing the problem isn't CW specific given the nature of the issue and the known issue with other Skuid areas but it definitely could be something in CW so I'll try to find some time to look in to this.

Regarding your comment " it only happens when there's another page include under the original page include", do you mean that there's two page includes involved plus the main page?  Want to make sure I'm understanding this correctly since you're sample pages only had two pages.

Also, after you determined the page include twist, did you happen to try the collapsible field editor in that scenario instead of the CW to see if the problem occurred?

Lastly, can you create a new DE org with the latest version of Skuid and see if the problem occurs there?

Thanks!
(Edited)
Photo of Dave

Dave

  • 5,650 Points 5k badge 2x thumb
basically I have a Page with no models or anything else,  that just has multiple page includes (6) 

If i preview each 'Page include" individually , the CW does not block the dropdown partially

if there is 2+ page includes, one under the other, it seems that the dropdown from topmost page include's table is not seeing there is another page include under it, and completely ignores it

On sample page i was able to reproduce same issue. 

and regarding 2nd question, only happens with CW not collapsible field editor

Thx
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
Got it, I see what you mean now, thanks.

Can you spin up a new DE org with latest version of Skuid and see if problem occurs there as well?

Sorry for all the questions, but I need to setup environments to try to troubleshoot this so the more info and the more focused I can keep my testing the better :)
Photo of Barry Schnell

Barry Schnell, Champion

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

I was able to spin up an org with the latest Millau release (version 11.1.10) and encountered the same issue you are having with 10.0.23.

Using the technique Matt mentioned, I was able to improve the situation using your sample pages.  This lends itself to the theory that the problem stems from the way Skuid applies styling to page includes, etc.

Unfortunately, the z-index doesn't solve all of the problems as there is still an issue with the header row in the table of the 2nd page include.  I played around with the css to see what is triggering the issue and it seems to be centered around something inside of the "nx-skootable-data" class.  If you remove that class from the table, the issue does not occur.

Here is what I did in the sample pages below:

1) Add an inline CSS to "Main" page
.pageInclude {    
    z-index: -1;
}
2) Add the "pageInclude" class to both page includes on "Main" page

Below are the pages with these changes based on the ones you provided.

I'll try to do some more tinkering but it's probably best to see what Skuid has to say about this since they'll be way more familiar with the CSS than I am at this point :(

Here is what it looks like now:


Sample Pages

1) Page Name "DaveTableMenuIssueMain"
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models/>
    <components>
        <includepanel type="skuid" uniqueid="sk-2K-Nr-98" pagename="DaveTableMenuIssueInclude" cssclass="pageInclude"/>
        <includepanel type="skuid" uniqueid="sk-2L5yV-110" pagename="DaveTableMenuIssueInclude" module="" cssclass="pageInclude"/>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css>
<cssitem location="inline" name="newcss" cachelocation="false">.pageInclude {    
    z-index: -1;
}</cssitem>
</css>
    <actionsequences/>
</resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>

2) Page Name "DaveTableMenuIssueInclude"
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true"> <models> <model id="account" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Account"> <fields> <field id="Name"/> </fields> <conditions> <condition type="fieldvalue" value="LAST_YEAR" 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="" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" conditionsource="manual" labelmode="no" condition="CreatedDate" filtermethod="server"> <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"/> <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"/>
    <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/> <actionsequences/>
</resources> <styles> <styleitem type="background" bgtype="none"/> </styles> </skuidpage>
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
One other note is that the original issue occurs even without a CW on the page as well as with other controls used instead of the CW.  The issue starts being visible as soon as the drop-down menu "hits" the topmost edge of the 2nd Page Include which is why forcing the z-index improves the situation.  Unfortunately, it still leaves the issue with the 2nd page includes table header unanswered :(
Photo of Dave

Dave

  • 5,650 Points 5k badge 2x thumb
Thank you for all your efforts Barry!

Hopefully we will hear from Skuid Team

Thx
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
No problem Dave, sorry I couldn't help more.

I'd recommend opening up a new community issue with this.  It's been a while since I was on the community but in the past at least, newer posts typically get more Skuid eyes on them :)
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,308 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,216 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,904 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,650 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,216 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

  • 386 Points 250 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,216 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

  • 386 Points 250 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.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
Hi Emily -

I dug up and old DE org and put a test page together.  In my test page, the CW header is updating as rows are added/removed from model.

Can you try the page below and see if the CW header updates as you add/remove rows from the table?

Assuming yes, if you can put together a test page that reproduces your scenario (since it is likely different than the below), I can try to take a look at it.

Assuming no, then what version of Skuid are you running?

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" useviewportmeta="true" showsidebar="true" showheader="true" tabtooverride="Account">
    <models>
        <model id="Account" limit="100" query="true" createrowifnonefound="false" datasourcetype="salesforce" datasource="salesforce" sobject="Account">
            <fields>
                <field id="Name"/>
                <field id="CreatedDate"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="Account" uniqueid="sk-u2g-194">
            <maintitle>
                <template>{{Model.labelPlural}}</template>
            </maintitle>
            <subtitle>
                <template>Home</template>
            </subtitle>
            <actions>
                <action type="savecancel" uniqueid="sk-u2g-192"/>
            </actions>
        </pagetitle>
        <tfg__collapsiblewrapper title="{{$Model.Account.data.length}}" showheader="yes" collapsible="open" deferrenderingcontents="true" uniqueid="sk-u2j-230" model="Account">
            <components/>
            <styles>
                <styleitem type="background"/>
                <styleitem type="border"/>
                <styleitem type="size"/>
            </styles>
            <renderconditions logictype="and"/>
            <onbeforefirstopenactions/>
            <onafterfirstopenactions/>
            <onbeforeopenactions/>
            <onafteropenactions/>
            <onbeforecloseactions/>
            <onaftercloseactions/>
        </tfg__collapsiblewrapper>
        <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Account" mode="read" allowcolumnreordering="true" uniqueid="sk-u2g-208">
            <fields>
                <field id="Name" hideable="true" allowordering="true" uniqueid="fi-u2f-591"/>
                <field id="CreatedDate" hideable="true" allowordering="true" uniqueid="fi-u2f-592"/>
            </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>
    <resources>
        <labels/>
        <css/>
        <javascript/>
        <actionsequences/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>


Photo of Emma

Emma

  • 386 Points 250 badge 2x thumb
Hi Barry,

Your page did work for me as well so I compared the differences between your page and ours and found the difference. As the CW we use are for related lists on accounts/contacts etc, the model for the wrapper was for the parent model, not the related list models that we were counting the data length for. Changing the model to be for the related list has it all working perfectly. I guess that is something we should have picked up on in the beginning!

Thank you so much for your replies and help! It is such a great component to use and makes life so much easier.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
Glad you got it sorted!
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,042 Points 2k badge 2x thumb
Hi Barry, is it possible to update skuid.component.createChildComponents to use parentComponent...  

 skuid.component.. is being deprecated: https://docs.skuid.com/latest/en/skuid/deprecated-features-api.html


$.each(skuid.component.createChildComponents(childComponentsXML, panelInner, context), function() {
                    childComponents.push(this);
                })

to

// I don't think there is a unique id here. looks like it is just accordionBody = $("<div>"),
 
var parentComponent = skuid.component.getById('unique id of component put here');

                $.each(parentComponent.createChildComponents(childComponentsXML, panelInner, context), function() {
                    childComponents.push(this);
                }), "fixed" === xmlDef.attr("scroll") ? (panel.css("height", xmlDef.attr("height") + "px"), 



Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
Hi Jili -

I haven't looked at the tfg Component code or worked with Skuid in a long time but I'll try to take a look in the coming weeks and provide an update on what I think I might be able to do to accommodate the deprecated API.

Thanks for the heads-up!
Photo of Bill Fox

Bill Fox

  • 8,184 Points 5k badge 2x thumb
Thanks Barry.  That would be great.
Photo of Bill Fox

Bill Fox

  • 8,184 Points 5k badge 2x thumb
Jill.  Have you found any issues in the desktop version?
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
Hello @Jili -

Thank you again for bringing the deprecated API to my attention, sorry for the delay in getting back to you on this.

I've reviewed the TFG Component code and it is currently using the instance level createChildComponents API and not the API marked as being deprecated.  In short, there does not appear to be a need to change anything or release a new version.

I did notice that the deprecated API does emit a console warning if called, however there are no warnings emitted when using TFG Components which would further indicate that no changes are required.

Can you let me know why you believe TFG Components is using a deprecated API - possibly I am overlooking something?  

Thank you!
Photo of Bill Fox

Bill Fox

  • 8,184 Points 5k badge 2x thumb
I would like to move to V2 as it some functionality I need.  Will the TGF components work in V2?
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
Hi Bill -

I'm not sure what you mean by V2 - can you provide additional information?
Photo of Bill Fox

Bill Fox

  • 8,184 Points 5k badge 2x thumb
When creating a new page there is an option to use the new features in API version 2
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,228 Points 20k badge 2x thumb
Quick explainer:  
API V2 refers to the complete rewrite of our UI components that was released as part of the SPARK release last year.  (We're working on improving lableing here...).   We allow you to build pages either with the original components you've always known and loved (API V1),   or move to the new set.  But beware - there are a lots of differences, and that is why we let you go either way.. 

The component definition is different enough that custom components will have to be completely rewritten to work as API V2 components.  So Bill - you will not be able to use the TFG components as currently wriitten on your V2 pages.  I'd look at Matt's comment below for a solution that uses the currently available components to provide similar functionality. 
Photo of Bill Fox

Bill Fox

  • 8,184 Points 5k badge 2x thumb
Thank Rob.  I was afraid of that.  Can V1 page call a V2 page and can a v2 page call a V1 page?  Can a V2 Page have a popup with an include which is a V1 page?
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
@Rob - Thanks for the assist!  Can you point me to the docs that describe the API changes so I can evaluate what it would take to make a TFG Component V2?

@Bill & Community - I can't make any promises on releasing a TFG Component for V2 but I'll at least evaluate and see what it would take and whether or not I can find the cycles to complete depending on the effort required.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,216 Points 10k badge 2x thumb
@Rob - Per above, can you provide a link to information describing what's changed from V1 to V2 (e.g. removed APIs, deprecated APIs, breaking changes, etc.)?  Thanks!