Collapsible Wrapper Custom Component

Barry SchnellBarry Schnell Member ✭✭
edited May 12 in Ideas
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
image

image

image
Tagged:
17
17 votes

Awaiting Review · Last Updated

«13456

Comments

  • Emily DavisEmily Davis Skuad ✭✭
    edited March 2017
    Barry,
    This is pretty cool! With actions and everything! Thanks for sharing this. Your contributions to the community are incredible.
    Emily
  • Barry SchnellBarry Schnell Member ✭✭
    edited November 2016
    Thanks Emily :)
  • John FreeseJohn Freese Member
    edited February 2017
    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! 
  • Barry SchnellBarry Schnell Member ✭✭
    edited November 2016
    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!
  • John FreeseJohn Freese Member
    edited December 2016
    Cool! Thanks for writing this component. :) I'll keep you updated if I find anything else in the future.
  • Barry SchnellBarry Schnell Member ✭✭
    edited November 2016
    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!
  • ThimoThimo Member
    edited February 2017
    Awesome work!
    Can save a lot of additional work with that custom component.
    Thank you.
  • Barry SchnellBarry Schnell Member ✭✭
    edited November 2016
    You're welcome, enjoy!
  • DaveDave Member ✭✭
    edited February 2017
    Great Job Barry and thank you for sharing!

    I can already see how this will be useful to us


    Thank you!
  • Barry SchnellBarry Schnell Member ✭✭
    edited November 2016
    You're welcome - glad to hear you'll find this useful!
  • edited October 2017
    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,
  • Barry SchnellBarry Schnell Member ✭✭
    edited November 2016
    Great to hear that you are finding it useful, your welcome!
  • DaveDave Member ✭✭
    edited December 2016
    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
  • Barry SchnellBarry Schnell Member ✭✭
    edited November 2016
    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!
  • DaveDave Member ✭✭
    edited December 2016
    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>
    &n
  • Barry SchnellBarry Schnell Member ✭✭
    edited November 2016
    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?
  • DaveDave Member ✭✭
    edited December 2016
    Sure no problem

    https://codeshare.io/hTgn4

    thx
  • Barry SchnellBarry Schnell Member ✭✭
    edited November 2016
    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!
  • Barry SchnellBarry Schnell Member ✭✭
    edited November 2016
    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!
  • DaveDave Member ✭✭
    edited December 2016
    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 :)
  • Barry SchnellBarry Schnell Member ✭✭
    edited November 2016
    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.
  • Barry SchnellBarry Schnell Member ✭✭
    edited February 2017
    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!
  • DaveDave Member ✭✭
    edited February 2017
    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


    image

    Thank you

  • Barry SchnellBarry Schnell Member ✭✭
    edited November 2016
    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>


  • DaveDave Member ✭✭
    edited December 2016
    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

    image


  • Barry SchnellBarry Schnell Member ✭✭
    edited November 2016
    Awesome, glad it worked and thanks for the Skuid! :)
  • Matt SonesMatt Sones Member ✭✭
    edited February 2017
    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.
  • Barry SchnellBarry Schnell Member ✭✭
    edited November 2016
    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!
  • BillBill Member ✭✭
    edited May 12
    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
  • Barry SchnellBarry Schnell Member ✭✭
    edited November 2016
    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.
Sign In or Register to comment.