Get a button against each row in the table

  • 2
  • Question
  • Updated 2 years ago
  • Answered
i have a requirement to show list of plans (a custom object, but we can also think of it as pricebookEntry). Against each plan, there should be a button "Select" which should get ticked as soon as the user click on it. Any ideas how do i bring a button against each row of my table. And that too, the button should display the name "Select" and whence click, it should show a tick mark kindof thing.
Photo of Rahul Sharma

Rahul Sharma

  • 212 Points 100 badge 2x thumb

Posted 2 years ago

  • 2
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Is there a reason you need it to be a button, and not just a checkbox field?


The easiest way I can think of is to create two 'Run multiple actions" row actions, one using fa-square-o for the icon, and one using fa-check-square-o. Then set them to conditionally render based on opposite values of a checkbox field (either a ui-only field or a field on the model, depending on your needs). The actions for both should set the value of that checkbox field.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Here's a pair of actions that we're using in a similar way:

<action type="custom" label="Launch Patient Registration" icon="fa-square-o" snippet="redirectToRegisteration">
                  <renderconditions logictype="and">
                    <rendercondition type="fieldvalue" operator="!=" enclosevalueinquotes="false" fieldmodel="ApptInteractions" sourcetype="fieldvalue" field="Patient_Case__r.Registration_Complete__c" value="true"/>
                    <rendercondition type="fieldvalue" operator="starts with" enclosevalueinquotes="true" fieldmodel="ApptInteractions" sourcetype="fieldvalue" field="Interaction_Purpose__c" value="Initial"/>
                  </renderconditions>
                </action>
                <action type="multi" label="Patient Registered" icon="fa-check-square-o">
                  <actions>
                    <action type="blockUI" message="{{Patient_Case__r.Patient__r.Name}} has completed registration." timeout="2000"/>
                  </actions>
                  <renderconditions logictype="and">
                    <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="ApptInteractions" sourcetype="fieldvalue" field="Patient_Case__r.Registration_Complete__c" value="true"/>
                  </renderconditions>
                </action>
Photo of Rahul Sharma

Rahul Sharma

  • 212 Points 100 badge 2x thumb
Hi Matt, Thanks for your answer. It does help achieve the desired behavior,but when it comes to giving the right UI exp, i guess a button (or at least some component styled as a button) would be more appropriate. I dont want the client to come back and say that SKUID cannot completely replicate a vf page. Thanks again for your response.
Photo of Rahul Sharma

Rahul Sharma

  • 212 Points 100 badge 2x thumb
Hi Matt,

so following your suggestion, i created a ui-only checkbox field, default value false. For the two row actions, i am checking its value. Problem is, the value is somehow not getting to the render conditions. The image fa-square-check-o is not getting rendered.

Please have a look:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">
    <models>
        <model id="SubscriberAccount" limit="1" query="false" createrowifnonefound="true" adapter="salesforce" type="" sobject="Account" doclone="">
            <fields>
                <field id="Name"/>
                <field id="BillingAddress"/>
                <field id="Phone"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
        <model id="Plans" limit="20" query="true" createrowifnonefound="false" adapter="salesforce" type="" sobject="PricebookEntry">
            <fields>
                <field id="UnitPrice"/>
                <field id="ProductCode"/>
                <field id="Name"/>
                <field id="Id"/>
                <field id="boolIsPlanSelected" uionly="true" displaytype="BOOLEAN" label="Is Plan Selected?" defaultValue="true"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <grid uniqueid="sk-3Q_Q9q-68">
            <divisions>
                <division behavior="flex" minwidth="100px" ratio="1" verticalalign="top">
                    <components>
                        <progressindicator__progress_indicator id-index="6" future-color="#a5a5a5" current-color="#196af5" done-color="#08d42d" mode="tabwiz" uniqueid="sk-3Q_vQO-74" friendId="EnrollmentWizard">
                            <steps>
                                <step label="Subscriber Information" data-id="0">
                                    <components/>
                                </step>
                                <step label="Plan Selection" data-id="1">
                                    <components/>
                                </step>
                                <step label="Spouse Information" data-id="2">
                                    <components/>
                                </step>
                                <step label="Dependent Information" data-id="3">
                                    <components/>
                                </step>
                                <step label="Agreement" data-id="4">
                                    <components/>
                                </step>
                                <step label="Congratulations!" data-id="5">
                                    <components/>
                                </step>
                            </steps>
                        </progressindicator__progress_indicator>
                        <wizard deferstepcontentsrendering="false" buttonslocation="bottom" uniqueid="EnrollmentWizard">
                            <steps>
                                <step stepid="SubscriberInfo" steplabel="Step 1">
                                    <components>
                                        <basicfieldeditor showheader="true" showsavecancel="true" showerrorsinline="true" model="SubscriberAccount" buttonposition="" uniqueid="sk-3R25m7-435" mode="edit">
                                            <columns>
                                                <column width="100%">
                                                    <sections>
                                                        <section title="Section A" collapsible="no">
                                                            <fields>
                                                                <field id="Name" valuehalign="" type=""/>
                                                                <field id="Phone" valuehalign="" type=""/>
                                                            </fields>
                                                        </section>
                                                    </sections>
                                                </column>
                                            </columns>
                                        </basicfieldeditor>
                                    </components>
                                    <actions>
                                        <action uniqueid="sk-3R06gq-264" type="navigate" stepid="PlanSelection" label="Continue" icon="sk-icon-arrow-right" window="self">
                                            <renderconditions logictype="and"/>
                                            <enableconditions/>
                                            <hotkeys/>
                                            <actions>
                                                <action type="navigateToStep" stepid="PlanSelection"/>
                                                <action type="custom" snippet="Test_Snippet"/>
                                            </actions>
                                        </action>
                                    </actions>
                                </step>
                                <step stepid="PlanSelection" steplabel="Step 2">
                                    <components>
                                        <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="false" model="Plans" buttonposition="" mode="readonly" uniqueid="sk-3R54wM-594">
                                            <fields>
                                                <field id="UnitPrice" decimalplaces="" valuehalign="" type=""/>
                                                <field id="ProductCode" valuehalign="" type=""/>
                                                <field id="Name"/>
                                                <field id="Id" valuehalign="" type="CUSTOM"/>
                                            </fields>
                                            <rowactions>
                                                <action type="drawer" label="View Details" icon="sk-icon-go-to-full-detail-page">
                                                    <renderconditions logictype="and"/>
                                                    <drawer title="Drawer Area" width="90%" closehandle="true">
                                                        <components>
                                                            <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Plans" buttonposition="" uniqueid="sk-3-bo-s-234" mode="read">
                                                                <columns>
                                                                    <column width="100%">
                                                                        <sections>
                                                                            <section title="Product Details" collapsible="no">
                                                                                <fields>
                                                                                    <field id="Name" valuehalign="" type=""/>
                                                                                    <field id="ProductCode" valuehalign="" type=""/>
                                                                                    <field id="UnitPrice" decimalplaces="" valuehalign="" type=""/>
                                                                                </fields>
                                                                            </section>
                                                                        </sections>
                                                                    </column>
                                                                </columns>
                                                            </basicfieldeditor>
                                                        </components>
                                                    </drawer>
                                                </action>
                                                <action type="custom" label="Plan is Selected" icon="fa-check-square-o" snippet="PlanSelection_ToggleCheckbox">
                                                    <renderconditions logictype="and">
                                                        <rendercondition type="fieldvalue" fieldmodel="Plans" sourcetype="fieldvalue" operator="=" field="boolIsPlanSelected" value="true" enclosevalueinquotes="false"/>
                                                    </renderconditions>
                                                </action>
                                                <action type="custom" label="Plan is Not Selected" icon="fa-square-o" snippet="PlanSelection_ToggleCheckbox">
                                                    <renderconditions logictype="and"/>
                                                    <actions>
                                                        <action type="custom" snippet="PlanSelection_ToggleCheckbox"/>
                                                    </actions>
                                                </action>
                                            </rowactions>
                                            <massactions usefirstitemasdefault="true"/>
                                            <views>
                                                <view type="standard"/>
                                                <view type="photo" defaultphoto="person"/>
                                            </views>
                                            <renderconditions logictype="and"/>
                                        </skootable>
                                    </components>
                                    <actions>
                                        <action uniqueid="sk-3R06gq-265" type="navigate" stepid="step1" label="Previous Step" icon="sk-icon-arrow-left"/>
                                        <action uniqueid="sk-3R06gq-266" type="navigate" label="Next Step" icon="sk-icon-arrow-right"/>
                                    </actions>
                                </step>
                                <step stepid="SpouseInfo" steplabel="Step 3">
                                    <components/>
                                    <actions>
                                        <action uniqueid="sk-3R19e1-318" type="navigate" stepid="PlanSelection" label="Previous Step" icon="sk-icon-arrow-left"/>
                                        <action uniqueid="sk-3R19e1-319" type="navigate" label="Next Step" icon="sk-icon-arrow-right"/>
                                    </actions>
                                </step>
                                <step stepid="DependentInfo" steplabel="Step 4">
                                    <components/>
                                    <actions>
                                        <action uniqueid="sk-3R19k0-327" type="navigate" stepid="step3" label="Previous Step" icon="sk-icon-arrow-left"/>
                                        <action uniqueid="sk-3R19k0-328" type="navigate" label="Next Step" icon="sk-icon-arrow-right"/>
                                    </actions>
                                </step>
                                <step stepid="Agreement" steplabel="Step 5">
                                    <components/>
                                    <actions>
                                        <action uniqueid="sk-3R1A1F-335" type="navigate" stepid="step4" label="Previous Step" icon="sk-icon-arrow-left"/>
                                        <action uniqueid="sk-3R1A1F-336" type="navigate" label="Next Step" icon="sk-icon-arrow-right"/>
                                    </actions>
                                </step>
                                <step stepid="Congratulations" steplabel="Step 6">
                                    <components/>
                                    <actions>
                                        <action uniqueid="sk-3R1AE2-343" type="navigate" stepid="step5" label="Previous Step" icon="sk-icon-arrow-left"/>
                                        <action uniqueid="sk-3R1AE2-344" type="navigate" label="Next Step" icon="sk-icon-arrow-right"/>
                                    </actions>
                                </step>
                            </steps>
                        </wizard>
                    </components>
                </division>
            </divisions>
            <styles>
                <styleitem type="background" bgtype="none"/>
            </styles>
        </grid>
    </components>
    <resources>
        <labels/>
        <javascript>
            <jsitem location="inlinesnippet" name="PlanSelection_ToggleCheckbox" cachelocation="false">var $ = skuid.$;

var selectedItem = arguments[0].item,
    selectedList = arguments[0].list,
    selectedModel = arguments[0].model,
    selectedPlanRow = selectedItem.row;
    console.log('selectedPlanRow.boolIsPlanSelected = '+selectedPlanRow.boolIsPlanSelected);
    if(selectedPlanRow.boolIsPlanSelected){
        selectedPlanRow.boolIsPlanSelected = false;
    }
    else{
        selectedPlanRow.boolIsPlanSelected = true;
    }
    console.log('selectedPlanRow.boolIsPlanSelected 2 = '+selectedPlanRow.boolIsPlanSelected);
    $.each(selectedItem.fields, function(){
       console.log('field label = '+this.label);
    });</jsitem>
            <jsitem location="inlinesnippet" name="EnrollmentWizard_PlanSelection_SelectBtn" cachelocation="false">var params = arguments[0],
$ = skuid.$;
var item = params.row.Id;

var fieldContainer='';
fieldContainer = '&lt;button id="btn" name="button" &gt;Select&lt;/button&gt;';
params.element.append(fieldContainer);</jsitem>
        </javascript>
        <css/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
I haven't looked through your xml carefully, but one thing to note is that a 'default' value is only applied to fields in NEW rows. Your ui-only field will not get it's default value if the record already exists in salesforce. Usually changing conditions from =true to !=false (or vice versa) is enough to do the trick.

You can also check the value of the field in your browser's javascript console at runtime and make sure the values are being set as you expect them to be.
Photo of Vivek Gupta

Vivek Gupta

  • 378 Points 250 badge 2x thumb
Add an id field to table with Field Renderer as below - 

var params = arguments[0],
$ = skuid.$;
var item = params.row.Id;

var fieldContainer='';
fieldContainer ="<button id='{{{Id}}}' name='button' onclick="+'"' + "YourFunctionName("+"'"+params.row.Id+"')" +'" >Button Label</button>'; 
params.element.append(fieldContainer);

And do whatever you wanna do in function YourFunctionName() as you will be having the id of the record.