51黑料不打烊

Introduction to Rule Editor in WYSIWYG Authoring

This feature is available through the early access program. To request access, send an email with your GitHub organization name and repository name from your official address to aem-forms-ea@adobe.com. For example, if the repository URL is https://github.com/adobe/abc, the organization name is adobe and the repository name is abc.

You can add dynamic form behaviour using the Rule Editor, which allows you to create rules. These rules enable conditional field visibility, automate calculations based on user input, and improve the overall user experience. By streamlining the form-filling process, the Rule Editor helps ensure both accuracy and efficiency.

The Rule Editor offers an intuitive visual interface for creating and managing rules. Its user-friendly approach makes it accessible to all users, even those without extensive technical expertise, allowing them to implement logic effortlessly within their forms.

Understanding a rule

Rules are instructions that guide users on what actions to perform under specific conditions.

A rule typically follows one of the following constructs:

For example, a condition might check if a user has entered a certain value in a field, and the action could be to show or hide a field.

For detailed step-by-step instructions, see the add a conditional rule.

How to enable Rule Editor extension?

In Universal Editor, the Rule Editor extension is not enabled by default. To enable the Rule Editor extension write to us at aem-forms-ea@adobe.com from your official email id.

After the Rule Editor extension is enabled for your environment, the icon appears in the upper-right corner of the editor.

Select the form component for which you want to write a rule, and click the icon. The Rule Editor user interface appears.

In this article, form object and form component are used interchangeably.

Now, you can start writing rules or business logic for the selected form field by using the available rule types in the Rule Editor.

Understanding Rule Editor User Interface

The editor of the Rule Editor opens when you click the icon:

Any existing rules on a form component are listed when you select the component. You can view the title and a preview the rule summary on the Rule Editor. Furthermore, you can change the order of rules, edit rules, enable/disbale rules or delete rules.

Available rule types

The Rule Editor provides a set of predefined rule types that you can use to write rules, as displayed in below table:

Now, let鈥檚 explore how to write rules in the Rule Editor.

Write Rules

To understand how to write rules in Visual Rule Editor, let鈥檚 consider an simple example of a tax calculation form:

In the form described above, the user enters the gross salary. Based on this input, conditional field is displayed and the payable tax is calculated.

Form Fields:

Conditional Rule:

Calculation Rules:

To write rules, perform the following steps:

1. Author a form

To author a form in Universal Editor:

2. Add a conditional rule for a form field

Once you have authored the form, write the first rule to show the Additional Deduction field only if the gross salary exceeds $50,000. To add a conditional rule:

3. Add calculation rules for the form fields

Next, write a rule to compute the Taxable Income, which is the difference between Gross Salary and Additional Deduction (if applicable). To add calculation rule on the Taxable Income field, perform the following steps:

4. Preview a form

Now, when you preview the form and enter the Gross Salary as 60,000, the Additional Deduction field appears, and the Taxable Income and Tax Payable are calculated accordingly.

Apart from the out-of-the-box functions like Sum, Average that are listed under Functions Output, you can write custom functions to implement complex business logics.

Custom Function in Rule Editor

Edge Delivery Services Forms supports custom functions, that allows users to define JavaScript functions for implementing complex business rules. The custom functions extend the capabilities of forms by facilitating manipulation and processing of entered data to meet specified requirements.

Create a custom function

To create a custom functions, edit the ../[blocks]/form/functions.js file. The creation process generally involves the following steps:

This example demonstrates two custom functions asgetFullName and days:

/**
 * Get Full Name
 * @name getFullName Concats first name and last name
 * @param {string} firstname in Stringformat
 * @param {string} lastname in Stringformat
 * @return {string}
 */
function getFullName(firstname, lastname) {
  return `${firstname} ${lastname}`.trim();
}

/**
 * Calculate the number of days between two dates.
 * @param {*} endDate
 * @param {*} startDate
 * @name days Calculates the numebr of days between two dates
 * @returns {number} returns the number of days between two dates
 */
function days(endDate, startDate) {
  const start = typeof startDate === 'string' ? new Date(startDate) : startDate;
  const end = typeof endDate === 'string' ? new Date(endDate) : endDate;

  // return zero if dates are valid
  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
    return 0;
  }

  const diffInMs = Math.abs(end.getTime() - start.getTime());
  return Math.floor(diffInMs / (1000 * 60 * 60 * 24));
}

// eslint-disable-next-line import/prefer-default-export
export { getFullName, days };

Use a Custom Function in Rule Editor

To use the custom function in the Rule Editor:

Additional Information

This article provides limited information on the Rule Editor available in the Universal Editor. To learn more about the Rule Editor and custom functions, refer to the following articles:

See also