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 It is used to add a link.
Examples: {self}
, https://{details.accountId}.slack.com
It is used for formatting the displayed value, string manipulations, specifying decimal places for numeric values, or date display formats.
Supported types:string
number
date
Examples : {self}
, ${details.cost}
* If the type
is date
Example: MMM, dd, YY
It is used to display the value as a tag or to add an icon.
Supported types: icon, tag and progress
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
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)
* If the type
is icon
You can find available icons on the Icons page.
Examples : slack
, application
, {self}
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
It is used to define comparison options between the calculated value and the defined value.
Supported compares:less
equal
greater
Specifies the type of input used. Supported types are color
, icon
, timestamp
, date
, and date-time
.
Sample
Copy [
{
"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
Data Model JSON Form JSON Schema
Copy {
"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"
}
]
}
}
}
Copy {
"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
Data Model JSON Form JSON Schema
Copy {
"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"
}
]
}
}
}
Copy {
"type" : "object" ,
"required" : [
"slackAccount"
] ,
"properties" : {
"slackAccount" : {
"type" : "string" ,
"title" : "Slack Account"
}
}
}
URL with display string
Data Model JSON Form JSON Schema
Copy {
"hidden" : false ,
"columnName" : "Slack Link" ,
"name" : "slackLink" ,
"calc" : "details.slackAccount" ,
"format" : {
"link" : "https://{ self }.slack.com/" ,
"displayValue" : {
"type" : "string" ,
"value" : "{details.slackName}"
}
}
}
Copy {
"type" : "object" ,
"required" : [
"slackName" ,
"slackAccount"
] ,
"properties" : {
"slackName" : {
"type" : "string" ,
"title" : "Slack Name"
} ,
"slackAccount" : {
"type" : "string" ,
"title" : "Slack Account"
}
}
}
URL without customization
Data Model JSON Form JSON Schema
Copy {
"hidden" : false ,
"columnName" : "Slack Link" ,
"name" : "slackLink" ,
"calc" : "details.slackLink" ,
"format" : {
"link" : "{self}" ,
"displayValue" : {
"type" : "string" ,
"value" : "{self}"
}
}
}
Copy {
"type" : "object" ,
"required" : [
"slackLink"
] ,
"properties" : {
"slackLink" : {
"type" : "string" ,
"title" : "Slack Link"
}
}
}
Tag with string value
Data Model JSON Form JSON Schema
Copy {
"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"
}
]
}
}
}
Copy {
"type" : "object" ,
"required" : [
"language"
] ,
"properties" : {
"language" : {
"type" : "string" ,
"title" : "Language" ,
"enum" : [
"Node" ,
"Go" ,
"Ruby" ,
"PHP"
]
}
}
}
Tag with array value
Data Model JSON Form JSON Schema
Copy {
"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"
}
]
}
}
}
Copy {
"type" : "object" ,
"required" : [
"languages"
] ,
"properties" : {
"languages" : {
"type" : "array" ,
"title" : "Languages" ,
"items" : {
"type" : "string" ,
"enum" : [
"Node" ,
"Go" ,
"Ruby" ,
"PHP"
]
} ,
"uniqueItems" : true
}
}
}
Tag with number value
Data Model JSON Form JSON Schema
Copy {
"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"
}
]
}
}
}
Copy {
"type" : "object" ,
"required" : [
"changes"
] ,
"properties" : {
"changes" : {
"type" : "number" ,
"title" : "Changes"
}
}
}
Icon with string value
Data Model JSON Form JSON Schema
Copy {
"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"
}
]
}
}
}
Copy {
"properties" : {
"status" : {
"title" : "Status" ,
"type" : "string" ,
"enum" : [
"Passed" ,
"In Progress" ,
"Failed"
]
}
}
}
Dynamic icons with string value
Data Model JSON Form JSON Schema
Copy {
"hidden" : false ,
"columnName" : "Cloud" ,
"name" : "cloud" ,
"calc" : "details.cloud" ,
"format" : {
"displayValue" : {
"type" : "string" ,
"value" : "{self}"
} ,
"label" : {
"type" : "icon" ,
"options" : [
{
"icon" : "{self}"
}
]
}
}
}
Copy {
"properties" : {
"cloud" : {
"title" : "Cloud" ,
"type" : "string" ,
"enum" : [
"AWS" ,
"GCP" ,
"Azure"
]
}
}
}
Number value with prefix and 2 decimal
Data Model JSON
Copy {
"hidden" : false ,
"columnName" : "Cost" ,
"name" : "cost" ,
"calc" : "details.cost" ,
"format" : {
"displayValue" : {
"type" : "number" ,
"value" : "${self}" ,
"decimal" : 2
}
}
}
Number value with progress bar
Data Model JSON Form JSON Schema
Copy [
{
"hidden" : false ,
"columnName" : "Progress" ,
"name" : "progress" ,
"calc" : "details.progress" ,
"format" : {
"displayValue" : {
"type" : "number" ,
"value" : "{self}"
} ,
"label" : {
"type" : "progress"
}
}
}
]
Copy {
"properties" : {
"progress" : {
"type" : "number" ,
"title" : "Progress"
}
}
}
Timestamp value with number input and date-time format
Data Model JSON Form JSON Schema
Copy [
{
"hidden" : false ,
"name" : "timestring" ,
"columnName" : "Timestring" ,
"calc" : "details.timestring" ,
"format" : {
"displayValue" : {
"type" : "date" ,
"format" : "DD MMM YYYY - hh:mm:ss A"
}
}
}
]
Copy {
"properties" : {
"timestring" : {
"title" : "Timestring" ,
"type" : "number"
}
}
}
Timestamp value with calendar input and date-time format
Data Model JSON Form JSON Schema
Copy [
{
"hidden" : false ,
"name" : "timestamp" ,
"columnName" : "Timestamp" ,
"calc" : "details.timestamp" ,
"format" : {
"inputType" : "timestamp" ,
"displayValue" : {
"type" : "date" ,
"format" : "DD MMM YYYY - hh:mm:ss A"
}
}
}
]
Copy {
"properties" : {
"timestamp" : {
"title" : "Timestamp" ,
"type" : "number"
}
}
}
Date value with calendar input and date format
Data Model JSON Form JSON Schema
Copy [
{
"hidden" : false ,
"name" : "date" ,
"columnName" : "Date" ,
"calc" : "details.date" ,
"format" : {
"inputType" : "date" ,
"displayValue" : {
"type" : "date" ,
"format" : "DD MMM YYYY"
}
}
}
]
Copy {
"properties" : {
"date" : {
"title" : "Date" ,
"type" : "string"
}
}
}
Date-time value with calendar input and date-time format
Data Model JSON Form JSON Schema
Copy [
{
"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"
}
}
}
]
Copy {
"properties" : {
"datetime" : {
"title" : "Date Time" ,
"type" : "string"
}
}
}
Icon input type
Data Model JSON Form JSON Schema
Copy [
{
"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"
}
]
Copy {
"properties" : {
"icon" : {
"title" : "Icon" ,
"type" : "string"
}
}
}
Color input type
Data Model JSON Form JSON Schema
Copy [
{
"calc" : "details.color" ,
"columnName" : "Color" ,
"format" : {
"displayValue" : {
"type" : "string" ,
"value" : "{self}"
} ,
"label" : {
"options" : [
{
"color" : "{self}"
}
] ,
"type" : "tag"
} ,
"inputType" : "icon"
} ,
"hidden" : false ,
"name" : "color"
}
]
Copy {
"properties" : {
"color" : {
"title" : "Color" ,
"type" : "string"
}
}
}