Get a button against each row in the table

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.

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.

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>

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.

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’;
params.element.append(fieldContainer);

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

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:

&nbs

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.