Related Work Table

Overview

Most commonly used on assets to show all the work items that it is used in

Steps to set up this component

Coming soon…

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 `=`
`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)
`label`	Is equivalent to the title/name of the component	Name/Title value you want for the component	Decide on the name or title you want to display for the component. This is usually a descriptive word or phrase that indicates what the component is for.
`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.
`datapath`	represents the path of the component in the data structure	datapath of the component with a prefix of “$.” and followed by a camel case text. i.e ($.firstTextInput)	Determine the logical path for this component in the data model, starting with "$." followed by a camelCase identifier. This usually aligns with the data structure
`width`	represents the width value of the component. range is col-3 to col-12	Possible values can be col-3 means would take 1/4 of the width col-6 would take half of the entire width. col-12 means the component would take up the whole width.	Decide how much horizontal space the component should take relative to the container, based on the layout design.
`defaultValue`	this can contain the default value you set for the component.	i.e. defaultValue = “test component” that text should appear and be set as the default value of the component and cannot be changed unless modified.	Decide on the value you want the component to display by default. This is usually a common or starting value for users.
`readOnly`	if the value of the readOnly is set to true the component will be in read only mode.	readOnly = true; readOnly = false;	Decide if users should be able to edit the component. If not, set it to true; if they should, set it to false.
`inputType`	Input type represent the type value on what will be entered on the input text component.	possible value can be inputType = “text”, can also be “number”, “decimal” or a “link”.	Determine the kind of data users will enter in the component. This should match the type of input expected, like text, number, decimal, or link.
`Required`	When required is set to “true” the component needs to be strictly filled up. It cannot go to the next step if the component has no value.	isRequired = true; or isRequired = false;	Decide if this component must be filled in before proceeding. If yes, set it to true; if optional, set it to false.
`WorkID`	A unique identifier for a specific work item or task.	A string or numeric value, e.g., "12345ae3477535663446hgt4", "wD56h67890677434546”	Locate the unique ID assigned to the work item. This ID is usually found in the task or work item details.
`Condition`	Defines a specific condition or criteria that must be met.	A string expression or condition string, e.g., "status == 'active'", "amount > 100”	Specify the condition that needs to be satisfied. This involves a logical expression based on the data.
`OnChange`	Specifies the action to be taken when a value changes.	A URL string, e.g., `"/api/v3/flow/execute/activity/{$.id}?refreshLayout=true"`	Define the URL or action that should be called when the value changes. This usually refreshes the page and reloads data in the workflow. It works with the condition property: when the condition is met, this action is executed to refresh the page and display the updated value.
`DataKey`	Represents a key used to identify a specific piece of data.	A string value, e.g., "username", "orderId”	Identify the key that corresponds to the specific data you want to access. This is usually a field name or identifier in your data structure.
`DefaultValueDataKey`	The key used to determine the default value for a component based on data	A string value, e.g., "$.defaultUsername", "$.defaultOrderId”	Identify the key that holds the default value for the component. This is typically found in the configuration or data model.
`RecalculateDefaultValueWhenDataPathChange`	Determines if the default value should be recalculated when the data path changes.	An array of JSON path strings, e.g., `["$.group.data.displayName", "$.group.displayName", "$.displayName", "@row.things.data.displayName"]`	Identify the JSON paths that, when changed, should trigger a recalculation of the default value. These paths follow the hierarchy and naming conventions of your data model.
`SidePanelShowHide`	Controls the visibility of a side panel component.	An object specifying show and hide data types, e.g., `new SidePanelShowHideComponent { ShowDataType = new [] { SidePanelDataType.Asset }, HideDataType = new [] { SidePanelDataType.Work } }`	Define the logic or condition that controls when the side panel is shown or hidden. This is usually managed by specifying which data types should show or hide the side panel.
Columns
`Columns - type`	The data type of the column in the grid.	A string value, e.g., `"text”, “number”`	Defines the type of data this column will display. Use `text` for simple string values.
`Columns - name`	The unique identifier or name of the column.	A string value, e.g., `"name"`	This is the internal name used to reference the column. Ensure it is unique within the grid.
`Columns - displayName`	The display label for the column, visible in the UI.	A string value, e.g., `"Name"`	This is what users will see as the title of the column in the grid.
`Columns - disabled`	Indicates whether the column is disabled (i.e., not usable or visible).	A boolean value, e.g., `“true” “false”`	Set to true to disable the column, meaning it will not be interactive or may be hidden.
`Columns - required`	Indicates whether the column is mandatory.	A boolean value, e.g., `“true” “false”`	Set to true if the column must be filled out or used by the user.
`Columns - addNewItem`	Specifies whether new items can be added to this column.	A boolean value, e.g., `“true” “false”`	Set to true if the user should be able to add new items/entries to this column.
`Columns - columnWidth`	The width of the column in pixels.	A int - number value, e.g.,`400`	Sets the width of the column, controlling how much space it takes up in the grid.
`Columns - sortable`	Indicates whether the column can be sorted by clicking the column header.	A boolean value, e.g., `“true” “false”`	Set to true if the user should be able to sort the data in this column.
`Columns - editable`	Specifies whether the column is editable.	A boolean value, e.g., `“true” “false”`	Set to true if the data in the column should be modifiable by the user.
`Columns - groupable`	Determines whether the column can be used to group data in the grid.	A boolean value, e.g., `“true” “false”`	Set to true if the user should be able to group the data based on this column's values.
Related Work Grid Options	This is the main properties that are being used
`relatedWorkGridOptions - targetDataType`	Specifies the target data type that this grid is associated with.	`{ "dianaDataType": "Work", "name": "Work" }`	Defines the type of data the grid is working with. In this case, it is associated with Work data types. Both should always be “Work”, but could change to asset if you are linking to an asset
`relatedWorkGridOptions -relationshipNames`	Specifies the names of relationships that this grid will handle or display.	A string value, e.g., `["Related Work"]`	Lists the specific relationships that this grid will focus on or represent. This is the “name” property from the related relationship
Toolbar Action	Properties for the button so you can add stuff on
`toolbarAction - name`	The name of the action associated with the toolbar button.	A string value, e.g., if not needed to be modified leave to default `"createWorkFromRelated"`	This is the internal name for the action triggered by the toolbar button.
`toolbarAction - params - label`	The label displayed on the toolbar button.	A string value, e.g., `"Create"`	This is the text shown on the button in the toolbar.
`toolbarAction - params - openLabel`	The label displayed when the button is used to open something.	A string value, e.g., `"Open"`	This is the text shown on the button when it is used to open an item.
`toolbarAction - params - relationshipName`	Specifies the relationship name that will be used by the action.	A string value, e.g., `"Demo"`	This defines which relationship the action will operate on.
`toolbarAction - params - createLabel`	The label for creating a new work item.	A string value, e.g., `"Create Work"`	This is the text shown on the button when creating a new work item.
`toolbarAction - params - workId`	The data path used to retrieve the work ID for the action.	A string value, e.g., `"$.data.Id"`	This links to the specific location in the data model where the work ID can be found.
`toolbarAction - params - workDataValueDataKey`	The key for the data value that will be used in the action.	A string value, e.g., if not needed to be modified leave to default `"@row"`	Specifies which data value (typically a row) is used by the action.
`toolbarAction - params - navigateToWork`	Indicates whether to navigate to the created work after the action is performed.	A boolean value, e.g., `“true” “false”`	Set to true if the system should automatically navigate to the new work item after it is created.
`toolbarAction - params -openInNewTab`	Specifies whether the action will open the work item in a new browser tab.	A boolean value, e.g., `“true” “false”`	Set to true if the work item should be opened in a new tab rather than the current tab.
`toolbarAction - workData`	The data used by the action to perform its task.	Default values should be `new System.Collections.Generic.List<ActionParam>(),`	Contains the specific data that the action will operate on.
`toolbarAction - params - type`	The type of item being created or manipulated by the action.	A string value, e.g., if not needed to be modified leave to default `"Thing"`	This specifies the type of entity the action will work with.
`toolbarAction - params - alwaysEnabled`	Determines if the action should always be enabled, regardless of context.	A boolean value, e.g., `“true” “false”`	Set to true if the button/action should be available at all times, regardless of other conditions.

Advanced Editor example of a set up table component

{
  "name": "testTask1TestSection0729TestSliderComponent",
  "label": "Related Work Grid Test",
  "description": "",
  "defaultValue": "",
  "dataPath": "$.testTask1.testSection0729.testSliderComponent",
  "isRequired": false,
  "isReadOnly": false,
  "isHidden": false,
  "width": "col-6",
  "condition": "",
  "validation": [],
  "properties": {
    "editable": true,
    "dataKey": "data",
    "idKey": "id",
    "addRows": true,
    "sortable": false,
    "visibleRows": 0,
    "dataIsObject": true,
    "columnWidth": 400,
    "autoHeight": true,
    "reorderRows": false,
    "reorderColumns": false,
    "openInNewTab": true,
    "disableColumnMenu": false,
    "disableExtendRowFullWidth": false,
    "columns": [
      {
        "type": "text",
        "name": "name",
        "displayName": "Name",
        "disabled": false,
        "required": false,
        "addNewItem": false,
        "columnWidth": 400,
        "sortable": true,
        "editable": true,
        "groupable": true
      }
    ],
      "relatedWorkGridOptions": {
        "targetDataType": {
            "dianaDataType": "Work",
            "name": "Work"
        },
        "relationshipNames": ["Related Work Test"]
    },
    "toolbarAction": 
      {
          "name": "createWorkFromRelated",
          "params": {
              "label": "Create",
              "openLabel": "Open",
              "relationshipName": "Demo",
              "createLabel": "Create Work",
              "workId": "$.data.Id",
              "workDataValueDataKey": "@row",
              "navigateToWork": true,
              "openInNewTab": true,
              "workData": new System.Collections.Generic.List<ActionParam>(),
              "type": "Thing",
              "alwaysEnabled": true
          }
      }
  }
}