Logic

Adding Logic to a component allows for changing the component definition in reaction to data entered in a form. For two examples, see the Form.io documentation. The createLogic and createDisableLogic functions in the componentProperties package/module makes it easier to create Logic objects.

Logic triggers and actions can also be specified in the Builder, on the Logic tab of the component.

Logic tab

Note that Logic objects and the corresponding triggers are checked on any change in the web app. In larger web apps having many Logic objects may cause performance to decrease.

Properties

Name	Description	Datatype	Default
name	Name of the field logic.	String	`'My logic'`
trigger	When to trigger actions. Example: `trigger.type = 'simple'` `trigger.simple.show = true` `trigger.simple.when = 'theKey'` `trigger.simple.eq = 'Bob'`	Dict/Struct
actions	The action(s) to trigger.	cell/list

Trigger property

The trigger's type field may have the values 'simple', 'javascript' or 'event'. The createTrigger function in the componentProperties package/module simplifies creating a trigger.

simple: When the trigger type is 'simple', the trigger dict/struct must contain a field simple. It must contain a dict/struct with fields:
- show: must contain a boolean,
- when: must contain the full key of another component and
- eq: must contain a value that is compared against the value of the component specified in when
javascript: When the trigger type is 'javascript', the trigger dict/struct must contain a field javascript. It must contain JavaScript code that assigns a boolean to a variable result. This is described in more detail in section Custom JavaScript.
event: When the trigger type is 'event', the trigger dict/struct must contain a field event. It must contain the name of an event that is triggered in the form.

Actions property

The actions property must contain a list/cell array containing one or more action dicts/structs. The action's type field may have the values 'property', 'value' or 'customAction'. To create a disable action the createDisableAction function in the componentProperties package/module can be used.

property: When the action type is 'property', the action dict/struct must contain a field property. It must contain a dict/struct with fields:
- value: the property to change
- type: the data type of the property
The action dict/struct must also contain a field state containing the value the specified property must get when the trigger of the Logic object is triggered.
value: When the action type is 'value', the action dict/struct must contain a field value. It must contain JavaScript code that assigns a value to a variable value. This is described in more detail in section Custom JavaScript.
customAction: When the action type is 'customAction', the action dict/struct must contain a field customAction. It must contain JavaScript code that assigns a value to a variable value. This is described in more detail in section Custom JavaScript.

Utility functions

The component_properties package/module contains some utility functions to make it easier to add Logic to your components.

createTrigger: can be used to define when Logic must be applied. It accepts a triggerType and triggerValue input. The trigger type and value must be one of the following combinations:

Trigger type	Trigger value	Remark
`event`	`"EventName"`	Triggers when the event `EventName` occurs.
`trigger`	trigger definition dictionary	For reusing an existing trigger.

The following trigger types and values trigger Logic when the component with key "key" has the given value. Note that data.key does not work in case of intermediate data components.

Trigger type	Trigger value	Remark
`simple`	`{"key", value}`
`javascript`	`"result = data.key == value"`	javascript trigger syntax
`result`	`"data.key == value"`	Shorter 'javascript' trigger.
`json`	`'{"==": [{"var": "data.key"}, value]}'`	Uses JSON Logic syntax

createDisableAction: creates a component disable action definition that can be used in a Logic object. When you use the function with disableTarget input set to false, the created action is an enable action.
createLogic: creates a Logic object with the specified trigger type and value, and optional actions and component to add it to. The trigger is created by the createTrigger function, so the input options documented there also apply here.
createDisableLogic: creates a Logic object with disable action with the given trigger type and value. The trigger is created by the createTrigger function, so the input options documented there also apply here. When a target component is specified, the Logic object is added to that component. When the function is used with the disableTarget input set to false, the created action is an enable action.

Note that adding disable Logic to a disabled component (and the other way around) does nothing. This function will show a warning on this.