Section

Overview

Used to for grouping together components

No Code set up options using the side panel

You can set the section title by clicking directly into the section and typing in the title that you want

Editing the section title

Advanced Editor set up options

Properties shared between components

Property	What does the property do (in plain english)	Possible values	How to find these values (in plain english)
`label`	The title or label to be displayed	“My Component”
`dataPath`	The data path where to save the value. ex.: “$.hello.world” would result to: `{ hello: { world: [] } }`	“$.task.section.myComponent”	A string that starts with `$` for the root, and each step is separated by a dot `.`. A step is a string without any space.
`isRequired`	A flag if component is required to be filled before complete	true
`isReadOnly`	A flag if component is read-only or not editable	false
`isHidden`	A flag if component is hidden	false
`condition`	Hides component if condition not met	"’{$.order.product[0].qty}’ > 10000” or ”’{$.task.section.componentName}’ == ‘value’”	Can either be <, >, or == A calculation expression that can use arithmetic operators, but this time, prefix `=` is not necessary
`onChange`	url to be called when component value changed	`"/api/v3/flow/execute/activity/{$.id}?refreshLayout=true"`	Use the exact value in the example here. Any Diana API url path in swagger that are `GET` methods. a variable can be used by wrapping it with `{}` in the example case it has `{$.id}` it resolves to the id of work
`width`	The with size of component	“col-1” “col-2” “col-3” “col-4” “col-5” “col-6” “col-7” “col-8” “col-9” “col-10” “col-11” “col-12”	A string that starts with “col-” followed by a number from 1 to 12. e.g. 12 means it takes up 100% of the horizontal space, and 6 means it takes up half the horizontal space, etc)
`defaultValue`	The default value of the component	“$.something.otherComponent” ”Hello World” ”={$.num1}+{$.num2}”	- Can be a literal string value like for text input component. For example, putting “Hello World”, will make it as default value of the text input - Can be a data path from other components, with this setup it will copy the value of other component. - Can be a calculation using arithmetic operators. The data path of other components like number input can be used as variable, but they need to be wrapped by `{}` for example, to add 10 to the value of a data path, it would be `={$.num1}+10`. to activate calculation, it should start with `=` - Can be any math.js function. See https://mathjs.org/ for a list of functions
`validation`	A list of validation rules	`[ { "type": "error", "message": "This field is required", "rules": "required", "alwaysTrigger": false } ]`	See the “Validation property set up” drop down below this table
`dataKey`	To which the value of datapath will be resolved.	“data” ”layoutComponent"	“data” - means the data path will be resolved from `work.data` ”layoutComponent” - means the data path will be resolved from the layout component config. Ex. `$.properties.label` will result to the label of component
`defaultValueDataKey`	Same with `DataKey`, but this time it’s for the default value of component	“data” ”layoutComponent"	Check `DataKey` above
`recalculateDefaultValueWhenDataPathChange`	recalculates component value using `defaultData` whenever a value changed in the list	`[ "={$.num1}+{$.num2}" ]`	The values can either be a data path or calculation, like the values that being set in default value
`sidePanelShowHide`	Sometimes a work is being rendered in a side panel, but this is mostly common for the assets. This serves as a flag if the component should be shown in case work or asset is rendered in side panel	`false`
`name`	A unique name that is used by the backend; Not displayed in component but it needs to have a value and must be unique	“my-component”
`description`	Description for the component

‣

Validation property set up

Properties unique to this component

All of these unique properties sit within a “properties” object e.g.

{
	"property one shared between components": "",
	"property two shared between components": "",
	"property etc shared between components": "",
	"properties": {
		"Tooltip": "",
		"Placeholder": "",
		"etc": "",
	}
}

Property	What does the property do (in plain english)	Possible values	How to find these values (in plain english)
`collapsible`	Controls the collapsible behavior of the section component.	"ignore", "none", "expanded", "collapsed”	Choose the collapsible mode for the component. "Ignore" means the collapsible state is ignored, "None" means the component cannot be collapsed, "Expanded" means the component is initially expanded, and "Collapsed" means the component is initially collapsed.
`header`	Defines the properties for the header of the component.	An object of type `headerProperty`, e.g., {[{}]}, `{ "icons": [{ "enabled": "CheckCircle", "disabled": "RadioButtonUnchecked", "dataPath": "$.testDataPath", "enabledColor": "#00ffa6", "disabledColor": "" }] }`	Configure the header properties, such as icons and their states. This is typically set in the component's configuration.
`header - icons - enabled`	Defines the icon to display when it is enabled.	A string value, e.g., "CheckCircle”	Choose the icon to display when it is in the enabled state. This is usually an icon name or identifier.
`header - icons - disabled`	Defines the icon to display when it is disabled.	A string value, e.g., "RadioButtonUnchecked"	Choose the icon to display when it is in the disabled state. This is usually an icon name or identifier.
`header - icons - dataPath`	Specifies the JSON path to the data that controls the icon state.	A JSON path string, e.g., "$.sectionWithStateHeader.agree"	Identify the JSON path that points to the data controlling the icon's state.
`header - icons - enabledColor`	Sets the color of the icon when it is enabled.	A string value representing a color code, e.g., "#00ffa6"	Choose the color code for the icon when it is in the enabled state.
`header - icons - disabledColor`	Sets the color of the icon when it is disabled.	A string value representing a color code, e.g., "" (empty for no color)	Choose the color code for the icon when it is in the disabled state.
`footer`	Defines the properties for the footer of the component.	An object of type `footerProperty`, e.g., {[{}]}, `{ "buttons": [{ "label": "CheckCircle", "dataPath": "$.testDataPath", "value": true, "variant": "RadioButtonUnchecked" }] }`	Configure the footer properties, such as buttons and their behaviors. This is typically set in the component's configuration.
`footer - buttons - label`	Defines the text to display on the button.	A string value, e.g., "Read & Agree"	Decide the text to display on the button. This is usually a descriptive word or phrase indicating the button's action.
`footer - buttons - variant`	Defines the style variant of the button.	A string value, e.g., "contained"	Choose the style variant for the button. This usually indicates the visual style, such as "contained", "outlined", etc.
`footer - buttons - dataPath`	Specifies the JSON path to the data that controls the button state.	A JSON path string, e.g., "$.sectionWithStateFooter.agree"	Identify the JSON path that points to the data controlling the button's state. This follows the data model hierarchy.
`footer - buttons - value`	Sets the value that the button represents.	A boolean value, e.g., true	Decide the value that the button represents when it is clicked. This is typically used to indicate a specific action or state.

Advanced Editor example of a set up section component

{
  "name": "testTask11TestSection07224",
  "label": "Test Section 07-224",
  "description": "",
  "defaultValue": "",
  "dataPath": "$.testTask11.testSection07224",
  "isRequired": false,
  "isReadOnly": false,
  "isHidden": false,
  "width": "col-12",
  "validation": [],
  "properties": {
    "collapsible": "expanded",
    "header": {
      "icons": [
        {
          "enabled": "CheckCircle",
          "disabled": "RadioButtonUnchecked",
          "dataPath": "$.sectionWithStateHeader.agree",
          "enabledColor": "#00ffa6",
          "disabledColor": ""
        }
      ]
    },
    "footer": {
      "buttons": [
        {
          "label": "Read & Agree",
          "variant": "contained",
          "dataPath": "$.sectionWithStateFooter.agree",
          "value": true
        }
      ]
    }
  }
}