Advanced Logic

The Logic tab of the Form Designer allows you to create conditions and advanced logic scripts that can change the state or the behavior of the selected form component.

Using advanced logic you can dynamically change the controls, looks and feel of a form component.

A form logic consists of two parts: the trigger and the action.

Trigger The logic trigger is the condition upon which the action takes place. For example, you may want to display a specific form field only when a checkbox option is selected. In this case, the checkbox option is the trigger, and displaying the form field is the action.

There are four types of logic triggers:

Trigger type	Description	Example
Simple	You define one triggering form component and value.
Javascript	You provide a JavaScript logic for a form component or form data. Use the JavaScript syntax to create complex logic, such as loop or dynamic behavior.
JSON Logic	You provide a JSON logic for a form component or form data. Recommended in cases where JavaScript is not permitted. Cannot support loops or dynamic behaviors.
Event	You define a component event, which once emitted by the corresponding component, triggers the desired action.

Action

The logic action is the form component behavior that should happen based on the logic conditions you set (i.e., the trigger). For example, you may want to activate a button for users of a specific age. In this case, the age range is the trigger, and activating the button is the action.

There are four types of logic actions:

Action type	Description	Example
Property	The trigger changes one of the available component properties, such as Tooltip, Description, CSS class, etc. The available properties depend on the type of the triggering component.
Value	The trigger changes the value of the corresponding component. The action must be defined using JavaScript syntax.
Merge Component Schema	The trigger changes the component schema parameters found in the component JSON. To see the schema parameters you can change, hover over the corresponding component and click Edit JSON. You can change multiple parameters within one action.
Custom Action	You define a custom action using JavaScript syntax, in the same you would define the JavaScript trigger type.

Tutorial

To configure an advanced logic:

1. Open the Form Designer in the Create Form activity.
2. Drag and drop components into your form. Pay attention to their field keys, as you might use those in your advanced logic.
3. Navigate to the Logic tab of the component you want to change (i.e., the component upon which the action should take place).
4. Click +Add Logic. You can add as many logics as you want.
5. Enter a name for your logic.
6. In the Trigger pane, select the type of trigger you want to use in your logic. The available types are Simple, Javascript, JSON Logic, and Event. Set the desired conditions to trigger the action.
7. In the Action pane, click +Add Action. You can add as many actions as you want, all triggered by the logic that groups them.
8. Enter a name for your action.
9. Select the type of action you want to use. The available types are Property, Value, Merge Component Schema, and Custom Action. Set the desired effect of your action.
10. When you are all set, click Save Action.
11. To save your logic, click Save Logic.

The above procedure applies generically to any type of trigger or action. For a detailed procedure, check out the specific tutorials, which provide examples of each specific trigger and action type

• Trigger type: Javascript & Action type: Value Summing up two text fields dynamically
• Trigger type: Simple & Action type: Property Hiding a field dynamically
• Trigger type: Simple & Action type: Merge Component Schema Changing the title color dynamically
• Trigger type: Event & Action type: Custom Action Setting a form field to default using events
• Trigger type: JSON Logic & Action type: Property Displaying a component based on user input

Summing up two text fields dynamically

Trigger type: JavaScript Action type: Value

This advanced logic sums up two text fields, based on the condition that the user interacts with the corresponding text fields.

1. Open the Form Designer in the Create Form activity.
2. Drag and drop three Text Field components into your form.
3. Name two of the text field components as A and B, and name the third one as Total. Pay attention to their field keys, as you use those in your advanced logic.
   Optionally, you can set the Total text field component as Disabled, so business users cannot interact with it.
4. Go to the Logic tab of the Total field component.
5. Add a logic and name it "dynamic sum".

6. Select the Javascript trigger type, and enter the following script in the Text Area section:

   result = true;
   return result;

   The above snippet detects if there are any changes in the text fields, i.e., the user interacts with the text fields, and triggers the action to sum up the fields.

7. Add an action and name it "a+b".

8. Select the Value action type, and enter the following script in the Value (Javascript) section:

   result = (+data.a) + (+data.b);
   return result;

   Replace a and b with the field keys values of the text field components.
9. Save the action and the logic.
10. Save the component.

At runtime, if the business user interacts with text fields A and B, the Total field gets automatically filled in, displaying the sum of A and B.

Hiding a field dynamically

Trigger type: Simple Action type: Property

This advanced logic hides a form field (i.e., the Child field) when the user inputs "hide" in another form field (i.e., Parent field).

1. Open the Form Designer in the Create Form activity.
2. Drag and drop two Text Field components.
3. Name one of the text field components as Parent field, and the other one as Child field. Pay attention to their field keys, as you use those in your advanced logic.
4. Go to the Logic tab of the Child field component.
5. Add a logic and name it "hide input".

6. Select the Simple trigger type.

   6.1. From the When the form component dropdown menu, select Parent field ({parentField_field_key}).

   6.2. In the Has the value field, enter "hide".

   The above configuration detects if the user input the string "hide" in the parent field and triggers the action to hide the child field.

7. Add an action and name it "hide".

8. Select the Property action type.

   8.1. From the Component Property dropdown menu, select Hidden.

   8.2. From the Set State dropdown menu, select True.

9. Save the action and the logic.
10. Save the component.

At runtime, if the business user inputs "hide" in the parent field, the child field becomes hidden.

Changing the title color dynamically

Trigger type: Simple Action type: Merge Component Schema

This advanced logic changes the label color of a text field component when the user select the desired color from a list. The change applies using a custom CSS file.

Prerequisites:

Create a CSS file containing the new color for the text field label and reference it in the Create Form activity, in the LocalCSSFilePath activity property.

For example, the CSS snippet below contains a class that sets the label color to green or red:

.textFieldLabel-green 
{
   color : green;
}
.textFieldLabel-red 
{
   color : red;
}

After referencing the CSS file in the Create Form properties, design your form following the steps below:

1. Open the Form Designer in the Create Form activity.
2. Drag and drop one Text Field component and one Radio component. Pay attention to their field keys, as you use those in your advanced logic.
3. In the Display tab of the text field component, set a default Custom CSS Class. For example, to set red as the default color of the text field, use the textFieldLabel-red class. The class must be defined in the CSS file from the prerequisites documented above.
   
   

   

   
   
4. For the Radio component, add two values for the colors green and red.
5. Go to the Logic tab of the Text Field component.
6. Add a logic and name it "color selection".

7. Select the Simple trigger type.

   7.1. From the When the form component dropdown menu, select Radio ({radio_field_key}).

   7.2. In the Has the value field, enter "green".

   The above configuration detects if the user selects "green" from the radio options and triggers the action to change the text field label color.

8. Add an action and name it "change color using css".

9. Select the Merge Schema Component action type and enter the following snippet:

   return { customClass: "textFieldLabel-green" }

10. Save the action and the logic.
11. Save the component.

At runtime, if the business user selects the "green" radio button, the label of the text field becomes green. If the user selects the "red" radio button, the label of the text field becomes red.

Setting a form field to default using events

Trigger type: Event Action type: Custom Action

This advanced logic changes the content of a text field when the user clicks a button. The button emits an event based on which the text field content changes to a default text.

1. Open the Form Designer in the Create Form activity.
2. Drag and drop one Text Field component and one Button component. Pay attention to the components field keys, as you use those in your advanced logic.

3. In the Display tab of the button component:

   3.1. Label the button component as Change value to "Default"

   3.2. Set the button Action as Click

   3.3. Select the Use for Local Update checkbox.

   3.4. Input the following snippet in the Update Data Logic section. This emits the event called resetTextField every time the user clicks the button.

   instance.emit('resetTextField', {});

   3.5. Save the button component.

4. Go to the Logic tab of the text field component.
5. Add a logic and name it "reset".
6. Select the Event trigger type.
7. In the Event Name field, enter the name of the event emitted when clicking the button. (i.e., resetTextField).
   The above configuration detects when the user click the Change value to "Default" button and replaces the text field existing content to "Default".
8. Add an action and name it "default".
9. Select the Custom Action action type.

10. Input the following snippet in the Custom Action (Javascript) section.

    return "Default"

11. Save the action and the logic.
12. Save the component.

At runtime, if the business user clicks the Change value to "Default" button, the resetTextField event is emitted. The trigger listens to the event and replaces the existing text field content to "Default".

Displaying a component based on user input

Trigger type: JSON Logic Action type: Property

This advanced logic displays the content of an HTML component (in this case, an image) when the user inputs the required text.

1. Open the Form Designer in the Create Form activity.
2. Drag and drop one Text Field component and one HTML Element component. Pay attention to the components field keys, as you use those in your advanced logic.

3. In the Display tab of the text field component:

   3.1. Label the text field component as "Type "Show me"".

   3.2. Add the Description "Must be an exact match (case sensitive)", to indicate users they must input the text as required.

   3.3. Save the text field component.

4. In the Display tab of the HTML element component:

   4.1. In the Content section, reference the image you want to display. For example: <img href="https://picsum.photos/200/300" />.

   4.2. Select the Hidden checkbox, to hide the image from displaying by default. 4.3. Save the HTML element component.

5. Go to the Logic tab of the HTML element component.
6. Add a logic and name it "user input".
7. Select the JSON Logic trigger type.
8. Input the following snippet in the JSON Logic section, and replace {text_field_component_field_key} with the field key value you set for your text field component.

   {
     "===": [
       {
         "var": "data.{text_field_component_field_key}"
       },
       "Show me"
     ]
   }

   The above configuration detects when the user inputs "Show me" and only then sets the value of the HTML element Hidden property to False, thus displaying the corresponding HTML content.

9. Add an action and name it "display image".

10. Select the Property action type.

    10.1. From the Component Property dropdown menu, select Hidden.

    10.2. From the Set State dropdown menu, select False.

11. Save the action and the logic.
12. Save the component.

At runtime, if the user inputs the required text in the text field, the form displays the HTML content.

Sample Workflow

To check the complete workflow or to have a future reference, download the XAML example