Customizing Table Columns

Data flexibility allows you to customize the table view of schema fields you create or extend. In the Data Model JSON, you can define the fields to be displayed in the table using the format property to customize their appearance.

With format configuration, you can define the types of fields, format text, display as a tag, add icons, and define icon and color options based on conditions.

Structure

The customized display options have 3 independent moving parts.

Is it a link? It could be a URL (http…) or an email (mailto:…).
Value to be displayed. It could be a number, a string, or a date.
How should it be displayed? It could be a tag or an icon.

Field

Type

Description

link

Optional. string

It is used to add a link. Examples: {self}, https://{details.accountId}.slack.com

displayValue

Required. object

It is used for formatting the displayed value, string manipulations, specifying decimal places for numeric values, or date display formats.

type

Required. string

Supported types:string number date

value

Required. string

Examples : {self} , ${details.cost}

decimal

Required*. number

* If the type is number

format

Required*. string

* If the type is date Example: MMM, dd, YY

label

Optional. object

It is used to display the value as a tag or to add an icon.

type

Required. string

Supported types: icon, tag and progress

options

Required. array of object

It is used to define possible options for conditional color and icon customization, as well as for displaying icons and tags. Supported types: icon and tag

color

Optional. string

You can use named system colors, hex codes, RGB, or HSL. * Brand logos and Cloud logos do not support custom colors. Examples : green, #fff000, rgb(255,255,0)

icon

Required*. string

* If the type is iconYou can find available icons on the Icons page. Examples : slack, application , {self}

value

Optional. string|number

It is used to specify which value the defined icon or tag color will be used for. It is compared or matched with the calculated value.

Examples: Passed, 4 , RUBY

compare

Optional. string

It is used to define comparison options between the calculated value and the defined value.

Supported compares:less equal greater

inputType

Optional. string

Specifies the type of input used. Supported types are color , icon, timestamp, date, and date-time.

Sample

[
  {
    "hidden": false,
    "columnName": "Slack Link",
    "name": "slackLink",
    "calc": "details.slackAccount",
    "format": {
      "link": "https://{self}.slack.com",
      "displayValue": {
        "type": "string",
        "value": "{self}"
      },
      "label": {
        "type": "icon",
        "options": [
          { "icon": "slack" }
        ]
      }
    }
  }
]

Examples

Below, you will find numerous examples of how to configure the format property for different customized display options of schema fields.

URL with display string and icon

  {
    "hidden": false,
    "columnName": "Slack Link",
    "name": "slackLink",
    "calc": "details.slackAccount",
    "format": {
      "link": "https://{ self }.slack.com/",
      "displayValue": {
        "type": "string",
        "value": "{details.slackName}"
      },
      "label": {
        "type": "icon",
        "options": [
          {
            "icon": "slack"
          }
        ]
      }
    }
  }

{
  "type": "object",
  "required": [
    "slackName",
    "slackAccount"
  ],
  "properties": {
    "slackName": {
      "type": "string",
      "title": "Slack Name"
    },
    "slackAccount": {
      "type": "string",
      "title": "Slack Account"
    }
  }
}

URL with icon and no display string

  {
    "hidden": false,
    "columnName": "Slack Link",
    "name": "slackLink",
    "calc": "details.slackAccount",
    "format": {
      "link": "https://{ self }.slack.com/",
      "displayValue": {
        "type": "string",
        "value": " "
      },
      "label": {
        "type": "icon",
        "options": [
          {
            "icon": "slack"
          }
        ]
      }
    }
  }

{
  "type": "object",
  "required": [
    "slackAccount"
  ],
  "properties": {
    "slackAccount": {
      "type": "string",
      "title": "Slack Account"
    }
  }
}

URL with display string

  {
    "hidden": false,
    "columnName": "Slack Link",
    "name": "slackLink",
    "calc": "details.slackAccount",
    "format": {
      "link": "https://{ self }.slack.com/",
      "displayValue": {
        "type": "string",
        "value": "{details.slackName}"
      }
    }
  }

{
  "type": "object",
  "required": [
    "slackName",
    "slackAccount"
  ],
  "properties": {
    "slackName": {
      "type": "string",
      "title": "Slack Name"
    },
    "slackAccount": {
      "type": "string",
      "title": "Slack Account"
    }
  }
}

URL without customization

  {
    "hidden": false,
    "columnName": "Slack Link",
    "name": "slackLink",
    "calc": "details.slackLink",
    "format": {
      "link": "{self}",
      "displayValue": {
        "type": "string",
        "value": "{self}"
      }
    }
  }

{
  "type": "object",
  "required": [
    "slackLink"
  ],
  "properties": {
    "slackLink": {
      "type": "string",
      "title": "Slack Link"
    }
  }
}

Tag with string value

{
    "hidden": false,
    "columnName": "Language",
    "name": "language",
    "calc": "details.language",
    "format": {
      "displayValue": {
        "type": "string",
        "value": "{self}"
      },
      "label": {
        "type": "tag",
        "options": [
          {
            "value": "Node",
            "color": "rgb(152,251,152)"
          },
          {
            "value": "Go",
            "color": "grey"
          },
          {
            "value": "Ruby",
            "color": "#D67176"
          },
          {
            "value": "PHP",
            "color": "purple"
          }
        ]
      }
    }
  }

{
  "type": "object",
  "required": [
    "language"
  ],
  "properties": {
    "language": {
      "type": "string",
      "title": "Language",
      "enum": [
        "Node",
        "Go",
        "Ruby",
        "PHP"
      ]
    }
  }
}

Tag with array value

{
    "hidden": false,
    "columnName": "Languages",
    "name": "languages",
    "calc": "details.languages",
    "format": {
      "displayValue": {
        "type": "string",
        "value": "{self}"
      },
      "label": {
        "type": "tag",
        "options": [
          {
            "value": "Node",
            "color": "blue"
          },
          {
            "value": "Go",
            "color": "grey"
          },
          {
            "value": "Ruby",
            "color": "green"
          },
          {
            "value": "PHP",
            "color": "purple"
          }
        ]
      }
    }
  }

{
  "type": "object",
  "required": [
    "languages"
  ],
  "properties": { 
    "languages": {
      "type": "array",
      "title": "Languages",
      "items": {
        "type": "string",
        "enum": [
          "Node",
          "Go",
          "Ruby",
          "PHP"
        ]
      },
      "uniqueItems": true
    }
  }
}

Tag with number value

{
  "hidden": false,
  "columnName": "Changes",
  "name": "changes",
  "calc": "details.changes",
  "format": {
    "displayValue": {
      "type": "number",
      "value": "{self}%",
      "decimal": 0
    },
    "label": {
      "type": "tag",
      "options": [
        {
          "value": "0",
          "compare": "less",
          "color": "#8CC572"
        },
        {
          "value": "0",
          "compare": "equal",
          "color": "#CCCCCC"
        },
        {
          "value": "0",
          "compare": "greater",
          "color": "#D67176"
        }
      ]
    }
  }
}

{
  "type": "object",
  "required": [
    "changes"
  ],
  "properties": {   
    "changes": {
      "type": "number",
      "title": "Changes"
    }
  }
}

Icon with string value

{
  "hidden": false,
  "columnName": "Status",
  "name": "status",
  "calc": "details.status",
  "format": {
    "displayValue": {
      "type": "string",
      "value": "{self}"
    },
    "label": {
      "type": "icon",
      "options": [
        {
          "value": "Passed",
          "color": "green",
          "icon": "circle-check"
        },
        {
          "value": "In Progress",
          "color": "orange",
          "icon": "circle-progress"
        },
        {
          "value": "Failed",
          "color": "red",
          "icon": "circle-times"
        }
      ]
    }
  }
}

{
  "properties": {
    "status": {
      "title": "Status",
      "type": "string",
      "enum": [
        "Passed",
        "In Progress",
        "Failed"
      ]
    }
  }
}

Dynamic icons with string value

{
  "hidden": false,
  "columnName": "Cloud",
  "name": "cloud",
  "calc": "details.cloud",
  "format": {
    "displayValue": {
      "type": "string",
      "value": "{self}"
    },
    "label": {
      "type": "icon",
      "options": [
        {
          "icon": "{self}"
        }
      ]
    }
  }
}

{
  "properties": {
    "cloud": {
      "title": "Cloud",
      "type": "string",
      "enum": [
        "AWS",
        "GCP",
        "Azure"
      ]
    }
  }
}

Number value with prefix and 2 decimal

{
  "hidden": false,
  "columnName": "Cost",
  "name": "cost",
  "calc": "details.cost",
  "format": {
    "displayValue": {
      "type": "number",
      "value": "${self}",
      "decimal": 2
    }
  }
}

Number value with progress bar

[
  {
    "hidden": false,
    "columnName": "Progress",
    "name": "progress",
    "calc": "details.progress",
    "format": {
      "displayValue": {
        "type": "number",
        "value": "{self}"
      },
      "label": {
        "type": "progress"
      }
    }
  }
]

{
  "properties": {
    "progress": {
      "type": "number",
      "title": "Progress"
    }
  }
}

Timestamp value with number input and date-time format

[
  {
    "hidden": false,
    "name": "timestring",
    "columnName": "Timestring",
    "calc": "details.timestring",
    "format": {
      "displayValue": {
        "type": "date",
        "format": "DD MMM YYYY - hh:mm:ss A"
      }
    }
  }
]

{
  "properties": {
    "timestring": {
      "title": "Timestring",
      "type": "number"
    }
  }
}

Timestamp value with calendar input and date-time format

[
  {
    "hidden": false,
    "name": "timestamp",
    "columnName": "Timestamp",
    "calc": "details.timestamp",
    "format": {
      "inputType": "timestamp",
      "displayValue": {
        "type": "date",
        "format": "DD MMM YYYY - hh:mm:ss A"
      }
    }
  }
]

{
  "properties": {
    "timestamp": {
      "title": "Timestamp",
      "type": "number"
    }
  }
}

Date value with calendar input and date format

[
  {
    "hidden": false,
    "name": "date",
    "columnName": "Date",
    "calc": "details.date",
    "format": {
      "inputType": "date",
      "displayValue": {
        "type": "date",
        "format": "DD MMM YYYY"
      }
    }
  }
]

{
  "properties": {
    "date": {
      "title": "Date",
      "type": "string"
    }
  }
}

Date-time value with calendar input and date-time format

[
  {
    "hidden": false,
    "name": "datetime",
    "columnName": "Date Time",
    "calc": "details.datetime",
    "format": {
      "inputType": "date-time",
      "displayValue": {
        "type": "date",
        "format": "DD MMM YYYY - hh:mm:ss A"
      }
    }
  }
]

{
  "properties": {
    "datetime": {
      "title": "Date Time",
      "type": "string"
    }
  }
}

Icon input type

[
  {
    "calc": "details.icon",
    "columnName": "Icon",
    "format": {
      "displayValue": {
        "type": "string",
        "value": "{self}"
      },
      "label": {
        "options": [
          {
            "color": "{color}",
            "icon": "{self}"
          }
        ],
        "type": "icon"
      },
      "inputType": "color"
    },
    "hidden": false,
    "name": "icon"
  }
]

{
  "properties": {
    "icon": {
      "title": "Icon",
      "type": "string"
    }
  }
}

Color input type

[
  {
    "calc": "details.color",
    "columnName": "Color",
    "format": {
      "displayValue": {
        "type": "string",
        "value": "{self}"
      },
      "label": {
        "options": [
          {
            "color": "{self}"
          }
        ],
        "type": "tag"
      },
      "inputType": "icon"
    },
    "hidden": false,
    "name": "color"
  }
]

{
  "properties": {
    "color": {
      "title": "Color",
      "type": "string"
    }
  }
}

PreviousData Flexibility calculated properties NextIcons

Last updated 8 months ago