Attachment Grid

Overview

Similar to the regular attachments component but has the added ability to connect to custom reports

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)
`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.
`folder`	Specifies the folder where the component's files are stored.	A string value representing the folder path, e.g., "folderContent”, “folderDestination” Note : the folder string should follow camelCase format.	Determine the folder path where the component's files are located. This is usually set based on the file structure.
`size`	Specifies the size of the component or file.	A string value representing the size, e.g., "small", "medium", "large”	Decide the size for the component or file. This is typically chosen based on the required dimensions or capacity.
`dateStamp`	Indicates whether a date stamp should be included.	true; false	Decide if a date stamp should be included. Set to true to include it, otherwise false.
`presentation`	Specifies the presentation format of the component.	A string value, e.g., `"dynamic-list”`	Determine the presentation format for the component.
`showAudio`	Indicates whether audio should be displayed.	true; false	Decide if audio should be displayed. Set to true to show it, otherwise default false.
`printToggle`	Controls whether a print option or toggle is visible.	true; false	Set to true to show a print toggle in the UI.
`autoHeight`	Automatically adjusts the height of the content based on its size.	true; false	Set to true if the height of the element should adjust automatically.
`showAttachmentTitle`	Indicates whether the title of an attachment should be displayed.	true; false	Set to true if the title of any attachments should be visible.
`reorderRows`	Allows the user to reorder the rows in the grid or table.	true; false	Set to true to allow rows to be reordered by drag and drop or other mechanisms.
`showSaveOrder`	Displays an option to save the current order of the rows after reordering.	true; false	Set to true if the user should be able to save the order of rows after reordering them. Usually being used when attachment grid is hooked with a reporting to unify changes when ever the button is clicked.
`columns - name`	name used for behind the scenes stuff	Any string value
`columns - displayName`	Specifies the name to be displayed for the column.	A string value, e.g., "Print Photo”	Decide the text to display as the column name. This is usually a descriptive word or phrase indicating the purpose of the column.
`columns - valuePath`	Specifies the JSON path to the value to be displayed in the column.	A string value representing the JSON path, e.g., "$.printPhoto”	Identify the JSON path that points to the value to be displayed in the column. This follows the data model hierarchy. When creating a report you can use this value path to reference the value inside of this column
`columns - type`	Specifies the type of the column.	A string value, e.g., "verification”	Decide the type of the column.
`columns - entityType`	Specifies the type of entity the column data is associated with.	A string value, e.g., "Work”	Identify the type of entity associated with the column data. This is usually set based on the data model or business context.
`columns - editable`	Determines whether the data in the column is editable by the user.	true; false	Set to `true` if the user should be able to modify the data in this column.
`columns - entityType`	Default should be “Work”	“Work”

Advanced Editor example of a set up table component

{
  "name": "testTask1TestTask1F7A50Dad729E4D9A816588B756F09B06",
  "label": "Attachments Grid",
  "description": "",
  "defaultValue": "",
  "dataPath": "$.testTask1.testTask1.f7A50Dad729E4D9A816588B756F09B06",
  "isRequired": false,
  "isReadOnly": false,
  "isHidden": false,
  "width": "col-12",
  "condition": "",
  "dataKey": "data",
  "validation": [],
  "properties": {
    "folder": "joelsFolder",
    "size": "small",
    "dateStamp": true,
    "showAudio": false,
    "printToggle": false,
    "autoHeight": true,
    "showAttachmentTitle": true,
    "reorderRows": true,
    "showSaveOrder": true,
    "columns": [
      {
        "name": "test name",
        "displayName": "Document Name",
        "type": "string",
        "entityType": "Work",
        "valuePath": "$.title"
      },
      {
        "name": "test name 2",
        "displayName": "Print",
        "type": "booleanSwitch",
        "entityType": "Work",
        "editable": true,
        "valuePath": "$.printInReport"
      }
    ]
  }
}