Card Layout

Overview

The card layout section in the advanced editor lets you set up what the cards look like in the workflow kanban board
Each card represents a work item and can show information about that work item

Advanced Editor properties and what they do

Property	What does the property do (in plain english)	Possible values	How to find these values (in plain english)
subtitleJsonPath	Path to the JSON field containing the subtitle.	JSON path string, e.g., "$.subtitle”	Identify the JSON path to the field that contains the subtitle. This should align with your data model.
icon - ImageUrl	URL to the image used as an icon.	A valid image URL, e.g., "http://example.com/icon.png"	Determine the URL of the image you want to use as the icon. This should be a valid URL pointing to an image.
icon - Color	The color of the icon.	A color value, e.g., "#FFFFFF", "red”	Decide on the color you want for the icon. This can be specified using hex codes or color names.
icon - Shape	The shape of the icon.	A shape value, e.g., "circle", "square”	Determine the shape you want for the icon. This is usually predefined shapes like circle, square, etc.
secondaryLabel	The text for the secondary label.	A string value, e.g., "Secondary Label”	Decide on the text you want to use as the secondary label. This is usually a brief descriptive text.
secondaryValue	The value for the secondary label.	A string value, e.g., "Value",	Identify the value you want to display for the secondary label. This can be a string or a number.
statusText	Specifies the text to be displayed for the current status. Note : this still depends on the chains property of the flow is configured.	A JSON path string, e.g., "$.chains.currentState.events[1].displayName”	Identify the JSON path that points to the text value for the current status. This follows the data model hierarchy.
statusClassName	Specifies the CSS class name to be applied based on the current status. Note : this still depends on the chains property of the flow is configured.	A JSON path string, e.g., "$.chains.currentState.events[1].color”	Identify the JSON path that points to the CSS class name for the current status.
statusChain	Specifies the status chain to be used. Note : this still depends on the chains property of the flow is configured.	A JSON path string, e.g., "$.chains.pop”	Identify the JSON path that points to the status chain.
items - label	Label for each item in a list.	A string value, e.g., "Item Label”	Decide on the label text for each item in the list. This is usually descriptive of the item.
items - value	Value for each item in a list.	A string or numeric value, e.g., "Item Value", 50	Identify the value for each item in the list. This can be a string or a number.
items - color	Color for each item in a list.	A color value, e.g., "#0000FF", "blue”	Determine the color for each item in the list. This can be specified using hex codes or color names.
items - icon - imageurl	URL to the image used as an icon for each item.	A valid image URL, e.g., "http://example.com/item-icon.png"	Determine the URL of the image you want to use as the icon for each item. This should be a valid URL pointing to an image.
items - icon - color	Color of the icon for each item.	A color value, e.g., "#FF0000", "green”	Decide on the color of the icon for each item. This can be specified using hex codes or color names.
items - icon - share	The shape of the icon for each item.	A shape value, e.g., "circle", "square”	Determine the shape of the icon for each item. This is usually predefined shapes like circle, square, etc.

Advanced Editor example of this set up

{
  "titleJsonPath": "Updated Title Path",
  "subtitleJsonPath": [
    "Updated Subtitle Jsonpath"
  ],
  "secondaryLabel": "Updated Secondary Label",
  "secondaryValue": "Update Secondary Value",
  "statusText": "$.chains.currentState.events[1].displayName",
  "statusClassName": "$.chains.currentState.events[1].color",
  "statusChain": "$.chains.pop",
  "items": [
    {
      "label": "$.testLabelValue",
      "value": "$.testValue",
      "color": "#000000",
      "icon": "$.testIconValue"
    }
  ],
  "icon": {
    "imageUrl": "",
    "color": "#000000",
    "shape": "Cool"
  }
}