Dynamically change the Icon of an action in object-table

General Q&A
1

I want to dynamically render the icon of an on-press action in a column of an object-table.

Practically, I want to only show the icon if the row meets a specific condition, else not show anything or do anything when the action is triggered.

2

Yes, this is pretty easy to do.

You want to let the contents of the icon attribute be dynamically rendered using a JS function. Below is a basic example

VIEW XML (with icon specified on the column tag)

<object-table label="List of users" query="users" empty-message="Your items will appear here">
  <column heading="Name">{name}</column>
  <column heading="" display="" icon="$:rowIcon($object)">
    <action on-press="$:someFunction($object)" />
  </column>
</object-table>

VIEW JS

function rowIcon(obj) {
    if (someCondition) {
        // condition matches, return relevant icon
        return "fa-edit";
    } else {
         // condition doesn't match, return nothing
        return "";
    }
}

function someFunction(obj) {
    if (someCondition) {
        // do something
    } else {
        // do nothing
    } 
}

Alternative VIEW XML (with icon specified on the action tag)

<object-table label="List of users" query="users" empty-message="Your items will appear here">
  <column heading="Name">{name}</column>
  <column heading="" display="">
    <action on-press="$:someFunction($object)" icon="$:rowIcon($object)" />
  </column>
</object-table>
1 Like