Defining an icon dynamically

To dynamically control an icon element, the callback handler must respond with an object which defines icon properties.
These object properties are mapped to the following icon element properties.
{
  "name": "string",
  "size": "string",
  "color": "string",
  "text": "string"
}

where:

  • name corresponds to the Icon name property.

  • size corresponds to the Icon size property.

  • color corresponds to the Icon color property.

  • text corresponds to the Icon label property.

Note

The response payload properties which are mapped to name, size, and color must have values which appear in the corresponding icon element property dropdowns.
text can be any string.

Example

In this example, the root form contains a table element which displays an array of user data.
An On row click action is created to trigger a callback called GetStatusIcon, which has the request schema mapped to ref field in the user table.
The callback responds with data for the selected user’s status icon properties, which are mapped to the icon element properties.
In this way, each time the user selects a different table row, the icon element will be updated.
../../../../../../../_images/ss-uibuilder-icon-dynamic.gif

Note

This is used as a simple example of a dynamic icon element, not as recommended best practice.
A better method for this functionality would be to display the user status icon in the table itself.
To find out how to do this, see the Using icons in a table section.

GetStatusIcon request schema 

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema",
  "properties": {
    "id": {
      "type": "string"
    }
  }
}

GetStatusIcon response schema 

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema",
  "properties": {
    "name": {
      "type": "string"
    },
    "size": {
      "type": "string"
    },
    "text": {
      "type": "string"
    },
    "color": {
      "type": "string"
    }
  }
}