Get a button against each row in the table

edited April 10, 2019 in Questions
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.

Comments

  • Matt SonesMatt Sones 💎💎💎
    edited February 10, 2017
    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.
  • Matt SonesMatt Sones 💎💎💎
    edited December 7, 2016
    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>
  • edited November 17, 2016
    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.
  • edited January 31, 2017
    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.
  • edited November 17, 2016
    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">
                            &nbs
  • Matt SonesMatt Sones 💎💎💎
    edited December 7, 2016
    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.
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!