Table Row / Row Child Object : Conditional Rendering, Context, Passing context to Action Sequence

Mark LMark L ✭✭✭✭
edited February 4, 2020 in Ideas
I was struggling to find a way to conditionally render a button on a table row to take an action with context based on the field value of that specific table row or child object from a table row, and pass that context to the action taken.

It would appear that SKUID allows you (in the Editor UI) to have conditional rendering on elements in table rows based on "Row Property" but not row field value which is an unfortunate limitation. Additionally, if dealing with child objects for that row item, it looks like there's not much directly in the UI to do if you want to have a conditional button that passes context on those.

I found a solution and wanted to share it here in case anyone is having this trouble as well.

To make this work I used a template field and inside the template field draw from a formula on the row (or child object) to conditionally render an edit button using an HTML link invoking inline javascript like this:

{{ConditionallyRenderMe__c}}<a href="javascript:skuid.actionSequences.getByName('OurActionSequence').run({'Passed_Id':'{{{Id}}}'});"> (edit)</a>{{/ConditionallyRenderMe__c}}

I created an Action Sequence called "OurActionSequence" and set an input of "Passed_Id" with type Value. To refer to this passed ID in the action sequence, I used mustache notation: {{$Input.Passed_Id}}


Here's a simple XML page example of this working (example shows the row when previewed only, and is not populating child objects in the example because these are unsaved models)



<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false">
<models>
<model id="TableModel" query="false" createrowifnonefound="false" datasource="salesforce" sobject="Account" unloadwarningifunsavedchanges="false" processonclient="true">
<fields>
<field id="Name"/>
<field id="Id"/>
<field id="Contacts" type="childRelationship" limit="10">
<fields>
<field id="Name"/>
<field id="Id"/>
<field id="Birthdate"/>
</fields>
</field>
<field id="RenderMe" uionly="true" displaytype="FORMULA" ogdisplaytype="TEXT" readonly="true" returntype="BOOLEAN" label="RenderMe">
<formula>{{Name}} = "Render Account"</formula>
</field>
</fields>
<conditions/>
<actions/>
</model>
</models>
<components>
<skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" hideheader="false" hidefooter="false" pagesize="10" alwaysresetpagination="false" createrecords="false" model="TableModel" buttonposition="" mode="read" allowcolumnreordering="true" responsive="true" uniqueid="sk-Glf-420">
<fields>
<field type="COMBO" hideable="true" uniqueid="fi-Gn0-1238" allowhtml="true">
<label>Conditional Rendering of Action</label>
<template>{{#RenderMe}}&lt;a href="javascript:skuid.actionSequences.getByName('OurActionSequence').run({'Passed_Id':'{{{Id}}}'});"&gt;(edit)&lt;/a&gt;{{/RenderMe}}</template>
</field>
<field id="Name" uniqueid="fi-Glf-421"/>
<field id="Id" uniqueid="fi-Glf-422"/>
<field id="Contacts" type="CHILDREL" limit="100" uniqueid="fi-Glf-423" allowhtml="true">
<label>Contacts</label>
<template>{{Name}}{{#Birthdate}} {{Birthdate}} &lt;a href="javascript:skuid.actionSequences.getByName('OurActionSequence').run({'Passed_Id':'{{{Id}}}'});"&gt;(edit)&lt;/a&gt;{{/Birthdate}}</template>
</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>
</skootable>
</components>
<resources>
<labels/>
<javascript/>
<css/>
<actionsequences uniqueid="sk-Gl2-319">
<actionsequence id="ed78d478-3768-4654-95af-2003468740b2" label="Setup" type="event-triggered" event-scope="component" event-name="page.rendered" uniqueid="sk-Gmu-1052">
<description/>
<actions>
<action type="createRow" model="TableModel" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context">
<defaults>
<default valuesource="fieldvalue" field="Name" enclosevalueinquotes="true" value="No Render Account"/>
</defaults>
</action>
<action type="createRow" model="TableModel" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context">
<defaults>
<default valuesource="fieldvalue" field="Name" enclosevalueinquotes="true" value="Render Account"/>
</defaults>
</action>
</actions>
</actionsequence>
<actionsequence id="cda8876d-9122-4fcb-b305-635cdda18a10" label="OurActionSequence" type="reusable" uniqueid="sk-Gmu-1051">
<description/>
<actions>
<action type="showPopup">
<popup title="New Popup" width="90%">
<components>
<richtext multiple="false" uniqueid="sk-GmH-748">
<contents>&lt;p&gt;Passed_Id: {{$Input.Passed_Id}}&lt;/p&gt;
</contents>
</richtext>
</components>
</popup>
</action>
</actions>
<inputs>
<input type="value" name="Passed_Id"/>
</inputs>
</actionsequence>
</actionsequences>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>

2
2 votes

Awaiting Review · Last Updated

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!