Advanced Select

Overview

The select component allows the people to first select options from a list and then enter more data about their selection

No Code set up options using the side panel

Example of the No Code set up side panel

No Code side panel

General

Property	Description
Title	Name of the component.
Placeholder	The placeholder text can prompt users on how to interact with the component while it's empty.
Options	Create a list of selectable choices for the user.
Properties	After selecting an option, users can then choose from a list of associated properties.
Required	When enabled, a red asterisk will appear next to the component name, indicating that the user must enter a value before submitting the task.
Multi Select	Toggle that allows users to select more than one option.

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)
`tooltip`	tool tip is a small icon that shows up at the top of the component name, tooltip can be hovered and you can put hints or guidelines for users for the specific component that uses the tool tip.	tooltip = “tooltip can be hovered to display a sentence or paragraph descriptive of the specific usage of a component”	Create a helpful sentence or short paragraph explaining the component's use. This text will appear when users hover over the tooltip icon.
`placeholder`	The text that appears before any value is put on a component. This can be a hint or guide on what to put on the component. this will disappear once you enter a value in component.	Simple description on what value you should put on the component, can be a hint or a guide text phrase.	Think of a short text that helps users understand what to enter in the component. This is usually a brief instruction or example.
`multiSelect`	If this is set to “multi” you can select multiple users to be invited; if this is set to “single” you can invite only one user at a time.	multiSelect = “multi”; multiSelect = “single”	Decide if you need to invite multiple users simultaneously. If yes, set to "multi"; if you need to invite one user at a time, set to "single".
`options`	Defines the list of selectable options for a component.	An array of option values, e.g., `["Yes", "No"] , ["True", "False"]`	Determine the list of options you want to provide. This list can be static or generated dynamically based on your requirements.
`dataIsObject`	Indicates whether the data being handled is an object (key-value pairs) or not.	true; false (set to false as default)	Determine if the data structure you're working with is an object. Set to true if it is an object (i.e., contains key-value pairs), otherwise set to false if it's a different data type like an array or a primitive value.
`idKey`	Specifies the key used to identify unique entries within an object or collection.	A string value, e.g., "id", "userId", "transactionId”, “displayName”, “$.datapath”	Identify the property name within your data objects that serves as a unique identifier. This is typically a field like "id" or "userId" that uniquely distinguishes each object in a collection.
`columns`	Holds the properties below	[{},{},{}]
`columns - type`	Specifies the type or category of the column's data or its intended use.	A string value, e.g., "text", "number", “select"	Determine the type of data that the column will handle. Choose a value that best represents the data type or purpose.
`columns - name`	The internal name or identifier used for the column.	A string value, e.g., "userName", "orderId"	Decide on a unique identifier for the column within the system. This is usually a concise, descriptive name.
`columns - displayName`	The name or label that will be shown to users in the UI for the column.	A string value, e.g., "Quantity", "Units"	Choose a user-friendly name that will be displayed as the column's label in the interface. This is typically a more readable version of Name.
`columns - disabled`	Indicates whether the column is disabled (not editable or interactive).	true; false	Decide if this column should be non-editable or inactive. Set to true to disable, or false to enable.
`columns - options`	Provides a list of possible options that can be selected or used in the column.	A list of string values, e.g., ["Option1", "Option2"]	Identify the list of allowed or selectable options for the column. This could be a predefined list relevant to the column's purpose.
`columns - placeholder`	The text that appears as a hint or guide before any value is entered in the column.	A string value, e.g., "Enter value", "Select an option"	Decide on a short instructional text that helps users understand what to input. This text will disappear once a value is entered.

Advanced Editor example of a set up option select component

{
  "name": "testTask1TestSection0729OptionSelect",
  "label": "Option Select",
  "description": "",
  "defaultValue": "",
  "dataPath": "$.testTask1.testSection0729.optionSelect",
  "isRequired": false,
  "isReadOnly": false,
  "isHidden": false,
  "width": "col-12",
  "validation": [],
  "properties": {
    "multiSelect": "single",
    "options": [
      "true",
      "false"
    ],
    "columns": [
      {
        "type": "text",
        "name": "name",
        "displayName": "",
        "disabled": true,
        "placeholder": ""
      },
      {
        "type": "number",
        "name": "quantity",
        "displayName": "Quantity",
        "disabled": false,
        "placeholder": "Enter Quantity"
      },
      {
        "type": "select",
        "name": "units",
        "displayName": "Units",
        "disabled": false,
        "options": [
          "Litres",
          "Kilograms"
        ],
        "placeholder": "Enter Units"
      }
    ]
  }
}