Documentation AEM as a Cloud Service User Guide

Rule Editor user interface for Adaptive Forms based on Core Components

Last update: July 23, 2024

Applies to:
Experience Manager as a Cloud Service

CREATED FOR:

Beginner
Intermediate
User
Developer

The Rule Editor user interface for Adaptive Forms based on Core Components enhances the form creation process within Adobe Experience Manager (AEM). It empowers both business users and developers to implement dynamic behavior and complex logic into forms by writing rules that trigger actions based on predefined conditions, user inputs, and interactions. This feature supports modern JavaScript functionalities, including ES10 features, and offers an intuitive visual editor that simplifies the rule-writing process.
The Rule Editor is instrumental in streamlining the form-filling experience, ensuring both accuracy and efficiency. It allows for the validation or resetting of panels and forms, and the execution of custom functions to compute values of form objects. With its support for nested conditions and the ability to invoke Form Data Model services, the Rule Editor User Interface is a pivotal component for creating responsive, user-friendly, and adaptive forms.

Understanding the rule editor user interface

Rule editor provides a comprehensive yet simple user interface to write and manage rules. You can launch the rule editor user interface from within an Adaptive Form in authoring mode.

To launch the rule editor user interface:

Open an Adaptive Form in authoring mode.
Select the form object for which you want to write a rule, and in Component Toolbar select . The rule editor user interface appears.

Any existing rules on the selected form objects are listed in this view. For information about managing existing rules, see Manage rules.
Select Create to write a new rule. The visual editor of the rule editor user interface opens by default when you launch the rule editor the first time.

Let’s look at each component of the rule editor UI in detail.

A. Component-rule display

Displays the title of the Adaptive Form object through which you launched the rule editor and the rule type currently selected. In the above example, the rule editor is launched from an Adaptive Form object titled Question 1 and the rule type selected is When.

B. Form objects and functions

The pane on the left in the rule editor user interface includes two tabs — Forms Objects and Functions.

The Form Objects tab shows a hierarchical view of all objects contained in the Adaptive Form. It displays the title and type of the objects. When writing a rule, you can drag-drop form objects onto the rule editor. While creating or editing a rule when you drag-and-drop an object or function into a placeholder, the placeholder automatically takes the appropriate value type.

The form objects that have one or more valid rules applied are marked with a Green dot. If any of the rules applied to a form object are invalid, the form object is marked with a Yellow dot.

The Functions tab includes a set of built-in functions, such as Sum Of, Min Of, Max Of, Average Of, Number Of, and Validate Form. You can use these functions to compute values in repeatable panels and table rows and use them in action and condition statements when writing rules. You can, however, create custom functions too.

Some of the list of functions are displayed in the figure:

The Functions tab

NOTE

You can perform text search on objects and functions names and titles in the Forms Objects and Functions tabs.

In the left tree of the form objects, you can select the form objects to display the rules applied to each of the objects. Not only you can navigate through the rules of the various form objects, you can also copy-paste rules between the form objects. For more information, see Copy-paste rules.

C. Form objects and functions toggle

The toggle button, when tapped, toggles the form objects and functions pane.

D. Visual rule editor

Visual rule editor is the area in the visual editor mode of the rule editor user interface where you write rules. It lets you select a rule type and accordingly define conditions and actions. When defining conditions and actions in a rule, you can drag-drop form objects and functions from the Form Objects and Functions pane.

For more information about using a visual rule editor, see Write rules.

E. Done and cancel buttons

The Done button is used to save a rule. You can save an incomplete rule. However, incomplete are invalid and do not run. Saved rules on a form object are listed when you launch the rule editor next time from the same form object. You can manage existing rules in that view. For more information, see Manage rules.

The Cancel button discards any changes that you made to a rule and closes the rule editor.

Write rules

You can write rules using the visual rule editor

Let’s first look at how to write rules using a visual editor.

+++

Using visual editor {#using-visual-editor}

Let’s understand how to create a rule in a visual editor using the following example form.

Create-rule-example

The Loan Requirements section in the example loan application form requires applicants to specify their marital status, salary, and if married, their spouse’s salary. Based on the user inputs, the rule computes the loan eligibility amount and displays in the Loan Eligibility field. Apply the following rules to implement the scenario:

The Spouse’s Salary field is shown only when the Marital Status is Married.
The loan eligibility amount is 50% of the total salary.

To write rules, perform the following steps:

First, write the rule to control the visibility of the Spouse Salary field based on the option the user selects for the Marital Status radio button.

Open the loan application form in authoring mode. Select the Marital Status component and select . Next, select Create to launch the rule editor.

When you launch the rule editor, the When rule is selected by default. Also, the form object (in this case, Marital Status) from where you launched the rule editor is specified in the When statement.

While you cannot change or modify the selected object, you can use the rule drop-down, as shown below, to select another rule type. If you want to create a rule on another object, select Cancel to exit the rule editor and launch it again from the desired form object.
Select Select State drop-down and select is equal to. The Enter a String field appears.
In the Enter a String field in the rule, select Married from the drop-down menu.

You have defined the condition as When Marital Status is equal to Married. Next, define the action to perform if this condition is True.
In the Then statement, select Show from the Select Action drop-down.
Drag-drop the Spouse Salary field from the Form Objects tab on the Drop object or select here field. Alternatively, select the Drop object or select here field and select the Spouse Salary field from the pop-up menu, which lists all form objects in the form.

Next, define the action to perform if this condition is False.
Click Add Else Section to add another condition for the Spouse Salary field, in case you select Marital Status as single.
In the Else statement, select Hide from the Select Action drop-down.
Drag-drop the Spouse Salary field from the Form Objects tab on the Drop object or select here field. Alternatively, select the Drop object or select here field and select the Spouse Salary field from the pop-up menu, which lists all form objects in the form.

The rule appears as follows in the rule editor.
Select Done to save the rule.

NOTE
Alternatively, you can write a Show rule on the Spouse Salary field, instead of a When rules on the Marital Status field, to implement the same behavior.
Next, write a rule to compute the loan eligibility amount, which is 50% of the total salary, and display it in the Loan Eligibility field. To achieve this outcome, create Set value Of rules on the Loan Eligibility field.

In authoring mode, select the Loan Eligibility field and select . Next, select Create to launch the rule editor.
Select Set Value Of rule from the rule drop-down.
Select Select Option and select Mathematical Expression. A field to write mathematical expression opens.
In the expression field:
- Select or drag-drop from the Forms Object tab the Salary field in the first Drop object or select here field.
- Select Plus from the Select Operator field.
- Select or drag-drop from the Forms Object tab the Spouse Salary field in the other Drop object or select here field.
Next, select in the highlighted area around the expression field and select Extend Expression.

In the extended expression field, select divided by from the Select Operator field and Number from the Select Option field. Then, specify 2 in the number field.

NOTE
You can create complex expressions by using components, functions, mathematical expressions, and property values from the Select Option field.

Next, create a condition, which when returns True, the expression executes.
Select Add Condition to add a When statement.

In the When statement:
- Select or drag-drop from the Forms Object tab the Marital Status field in the first Drop object or select here field.
- Select is equal to from the Select Operator field.
- Select String in the other Drop object or select here field and specify Married in the Enter a String field.
The rule finally appears as follows in the rule editor.
Select Done. It saves the rule.
Repeat steps 7 through 14 to define another rule to compute the loan eligibility if the marital Status is Single. The rule appears as follows in the rule editor.

Alternatively, you can use the Set Value Of rule to compute the loan eligibility in the When rule that you created to show-hide the Spouse Salary field. The resultant combined rule when Marital Status is Single appears as follows in the rule editor.

write-rules-visual-editor-18

You can write a combined rule to control visibility of the Spouse Salary field and compute loan eligibility when the Marital Status is Married using the Else condition.

write-rules-visual-editor-19

Custom functions in rule editor

Apart from the out-of-the-box functions like Sum of that are listed under Functions Output, you can also use custom functions in your rule editor. Rule editor supports JavaScript ECMAScript 2019 syntax for scripts and custom functions. For instructions on creating custom functions, refer to the article Custom Functions in Adaptive Forms.

Manage rules

Any existing rules on a form object are listed when you select the object and select . You can view the title and a preview the rule summary. Furthermore, the UI lets you expand and view the complete rule summary, change the order of rules, edit rules, and delete rules.

List-rules

You can perform the following actions on the rules:

Expand/Collapse: The Content column in the rule list displays the rule content. If the entire rule content is not visible in the default view, select to expand it.
Reorder: Any new rule you create is stacked at the bottom of the rule list. The rules are executed from top to bottom. The rule at the top executes first followed by other rules of the same type. For example, if you have When, Show, Enable, and When rules at the first, second, third, and fourth positions from the top, respectively, the When rule at the top gets executed first followed by the When rule at the fourth position. Then, the Show and Enable rules are executed.
You can change the order of a rule by tapping against it or drag-drop it to the desired order in the list.
Edit: To edit a rule, select the check box next to the rule title. Options to edit and delete the rule appear. Select Edit to open the selected rule in the rule editor.
Delete: To delete a rule, select the rule and select Delete.
Enable/Disable: When you must suspend usage of a rule temporarily, you can select one or more rules and select Disable in the Actions toolbar to disable them. If a rule is disabled, it does not execute at the runtime. To enable a rule that is disabled, you can select it and select Enable in the actions toolbar. The status column of the rule displays whether the rule is enabled or disabled.

Disable rule

Copy-paste rules

You can copy-paste a rule from one field to other similar fields to save time.

To copy-paste rules, do the following:

Select the form object from which you want to copy a rule, and in the component toolbar select . The rule editor user interface appears with the form object selected and the existing rules appear.

For information about managing existing rules, see Manage rules.
Select the check box next to the rule title, options to manage the rule appear. Select Copy.
Select another form object to which you want to paste the rule and select Paste. Further, you can edit the rule to make changes in it.

NOTE
You can paste a rule to another form object only if that form object supports the copied rule’s event. For example, a button supports the click event. You can paste a rule with a click event to a button but not to a check box.
Select Done to save the rule.

Next Step

To understand the various operator types and events in the rule editor of an Adaptive Form, refer to the Available Operator Types and Events in Rule Editor of an Adaptive Form article.