We’re moving to Lightning with Skuid and have used a number of Collapsible Wrappers in our environment. However, we’re getting an error saying “There was a problem rendering a Component of type skuidpage: Cannot read property “editor” of undefined”. Can you confirm collapsible wrappers are supported in Lightning?
Could this also be due to our Millau upgrade? Are there any work arounds?
Question
Are Collapsible Wrappers supported in Lightning?
+3
+10Jamie,
Hopefully Barry Schnell can chime in on the usage of the Collapsible Wrapper in Lightning.
As far as workarounds, there are no set of declarative actions that will fully replicate the functionality or convenience of the Collapsible Wrapper. As of 11.2, you can add Interactions to a Wrapper component. If you add a Click interaction and then a Toggle Component action, you can show/hide any component on the page.
Another option is to use Conditional Rendering on a component and have the Click interaction flip a field value from true to false and false to true. This would allow you to have a component initially hidden and then shown when you click on the Wrapper.
You can also use a Button to run the actions, but the UI isn’t as integrated. If you have 11.2 installed, you can try this demo page that shows how to show/hide components using the suggestions I made.
Thanks,
Bill
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
<models>
<model id="UIOnly" limit="1" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">
<fields>
<field id="Text" displaytype="TEXT" label="Text"/>
<field id="Picklist" displaytype="PICKLIST" label="Picklist" defaultvaluetype="fieldvalue" ogdisplaytype="TEXT" picklistsource="manual" returntype="TEXT">
<picklistentries>
<entry value="Option1" label="Option1"/>
<entry value="Option2" label="Option2"/>
</picklistentries>
</field>
<field id="showhide" displaytype="TEXT" label="showhide" ogdisplaytype="TEXT" defaultvaluetype="fieldvalue" defaultValue="true"/>
</fields>
<conditions/>
<actions/>
</model>
</models>
<components>
<pagetitle model="UIOnly" uniqueid="sk-3D1-539">
<maintitle>Collapsible Option</maintitle>
<actions/>
</pagetitle>
<grid uniqueid="sk-3D5-606" columngutter="4px" rowgutter="4px">
<divisions>
<division behavior="flex" minwidth="100px" ratio="1">
<components>
<wrapper uniqueid="sk-3D8-638">
<components>
<template multiple="false" uniqueid="sk-3DH-715" allowhtml="true">
<contents>&lt;div class="nx-basicfieldeditor-section-header" style="cursor: pointer;"&gt;&lt;div class="ui-icon ui-icon-triangle-1-s sk-section-collapse-icon"&gt;&lt;/div&gt;&lt;div&gt;&lt;div class="nx-template"&gt;Toggle Component&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</contents>
</template>
</components>
<styles>
<styleitem type="background"/>
<styleitem type="border"/>
<styleitem type="size"/>
</styles>
<interactions>
<interaction type="tap">
<action type="toggleRenderComponent" behavior="toggle" componentid="sk-3C_-508"/>
</interaction>
</interactions>
</wrapper>
<basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="UIOnly" uniqueid="sk-3C_-508" mode="edit">
<columns>
<column width="100%" uniqueid="sk-3C_-504">
<sections>
<section title="Test" uniqueid="sk-3C_-505" collapsible="no">
<fields>
<field uniqueid="sk-3DB-678" id="Text"/>
<field uniqueid="sk-3DB-679" id="Picklist"/>
</fields>
</section>
</sections>
</column>
</columns>
</basicfieldeditor>
</components>
</division>
<division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
<components>
<wrapper uniqueid="sk-3Dk-350">
<components>
<template multiple="false" uniqueid="sk-3G3-1176" allowhtml="true">
<contents>&lt;div class="nx-basicfieldeditor-section-header" style="cursor: pointer;"&gt;&lt;div class="ui-icon sk-section-collapse-icon ui-icon-triangle-1-e"&gt;&lt;/div&gt;&lt;div&gt;&lt;div class="nx-template"&gt;Conditional Rendering&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</contents>
<renderconditions logictype="and">
<rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="UIOnly" sourcetype="fieldvalue" nosourcerowbehavior="skipandnorender" field="showhide" value="false"/>
</renderconditions>
</template>
<template multiple="false" uniqueid="sk-3Dk-351" allowhtml="true">
<contents>&lt;div class="nx-basicfieldeditor-section-header" style="cursor: pointer;"&gt;&lt;div class="ui-icon ui-icon-triangle-1-s sk-section-collapse-icon"&gt;&lt;/div&gt;&lt;div&gt;&lt;div class="nx-template"&gt;Conditional Rendering&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</contents>
<renderconditions logictype="and">
<rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="UIOnly" sourcetype="fieldvalue" nosourcerowbehavior="skipandnorender" field="showhide" value="true"/>
</renderconditions>
</template>
<richtext multiple="false" uniqueid="sk-3D--539">
<contents>&lt;p style="text-align: center;"&gt;&lt;span style="font-size:20px;"&gt;Initially shown component&lt;/span&gt;&lt;/p&gt;
</contents>
<renderconditions logictype="and">
<rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="UIOnly" sourcetype="fieldvalue" nosourcerowbehavior="skipandnorender" field="showhide" value="true"/>
</renderconditions>
</richtext>
</components>
<styles>
<styleitem type="background"/>
<styleitem type="border"/>
<styleitem type="size"/>
</styles>
<interactions>
<interaction type="tap">
<action type="branch" whenfinished="stop" model="UIOnly" label="if false then set true">
<formula>{{showhide}}=='false'</formula>
<iftrueactions>
<action type="updateRow" fieldmodel="UIOnly" affectedrows="context" field="showhide" enclosevalueinquotes="true" value="true"/>
</iftrueactions>
</action>
<action type="branch" whenfinished="stop" model="UIOnly" label="if true then false">
<formula>{{showhide}}=='true'</formula>
<iftrueactions>
<action type="updateRow" fieldmodel="UIOnly" affectedrows="context" field="showhide" enclosevalueinquotes="true" value="false"/>
</iftrueactions>
</action>
</interaction>
</interactions>
</wrapper>
</components>
</division>
</divisions>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</grid>
</components>
<resources>
<labels/>
<javascript/>
<css/>
<actionsequences uniqueid="sk-3Cn-257"/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>
Translate
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.