Example

A developer must create a simple, 2-column form to display a list of customer names, with a corresponding icon to visually indicate the customer mode (the possible modes are: Free, Standard, and Advanced).

The developer starts by creating a callback named ‘CustomerMode’, with this response schema:

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema",
  "required": [
    "items"
  ],
  "properties": {
    "items": {
      "type": "array",
      "required": [
        "id",
        "customer_name",
        "customer_mode"
      ],
      "properties": {
        "id": {
          "type": "string"
        },
          "icon": {
            "type": "object",
            "properties": {
              "name": {
                "type": "string"
              },
              "size": {
                "type": "string"
              },
              "text": {
                "type": "string"
              },
              "color": {
                "type": "string"
              }
            }
          },
        "customer_mode": {
          "type": "string"
        },
        "customer_name": {
          "type": "string"
        }
      }
    }
  }
}

The developer then creates a form containing a table named ‘Customers’. The table has two columns: ‘customer_name’ and ‘customer_mode’. The developer drops an icon element onto the ‘customer_mode’ column. They assign the icon element ID = icon.

They then set the data initializer callback to their ‘CustomerMode’ callback, and map the items array to the table array.

The developer deploys the CyberApp.

A user opens the form, and the ‘CustomerMode’ callback returns the following response payload:

"payload": {
        "items": [
            {
                "id": "000001",
                "customer_name": "Demo Customer A",
                "customer_mode": "free",
                "icon": {
                    "name": "i-office-ab--24",
                    "size": "24",
                    "color": "fixed-critical-dark",
                    "text": "Free"
                }
            },
            {
                "id": "000002",
                "customer_name": "Demo Customer B",
                "customer_mode": "advanced",
                "icon": {
                    "name": "i-adv--16",
                    "size": "24",
                    "color": "fixed-success-dark",
                    "text": "Advanced"
                }
            },
            {
                "id": "000003",
                "customer_name": "Demo Customer C",
                "customer_mode": "advanced",
                "icon": {
                    "name": "i-adv--16",
                    "size": "24",
                    "color": "fixed-success-dark",
                    "text": "Advanced"
                }
            }
        ]
    }

The form displays this: