Show Hide in Rule Editor

Introduction

In AEM 6.5.xx, we have code editor as well as visual editor wherein you can apply your rules to be followed by the fields either by using functionalities of visual editor or by customizing your own logic in JavaScript and adding the same in code editor.

AEM Rule Editor is a powerful tool provided by AEM Forms in order to:

• Add custom functionalities in the fields of your form.

• Set the behaviour of fields within the form structure.

Approach To study Rule Editor

In this blog we will understand the power of rule editor by creating a simple College Application Form.

The scenario states that first the candidate's eligibility needs to be checked and if found eligible the further sections of the form will be visible to the candidate for filling as per the eligibility criteria and if not then admission denied text will be shown which itself will be a part of the form.

Prerequisites: A running AEM instance with forms addon package installed.

Creation of College Application Form

Let us begin the creation of College Application Form

• First navigate to create adaptive form and create your form.






• Choose a template of your choice, could be blank but here I have created a custom template, College Template, for the purpose of creation of the form and provide title to it. You will find the root panel wherein you can add a theme after clicking on configure. I have added Beryl theme.



• First you need to add 5 panels to your form with provided configuration. Ensure except for the first panel rest all are maked as hidden.









• Now after adding panels, you need to add fields to them. Except for first name, mark all the fields as disabled.



• First name , Last Name and Percentile Obtained in 10th are the fields in Personal details panel.

• Add the First Name Configurations.



• Add the Last Name Configurations.



• Add the Percentile Obtained in 10th Configurations.



• Applicable Stream is the field in Applicable Streams panel.



• Applicable Stream is again a field in Available Streams panel.



• Name as per ID proof, Contact, Address, Select Blood Group and submit button are the field in Admission Details panel.

• Add the Name as per ID proof Configurations.



• Add the Contact Configurations.



• Add the Address Configurations.



• Allow multiple lined in Address Configurations.



• Add the Select Blood Group Configurations.



• Add the Submit Configurations.



• Candidate not applicable text is a field in Admission Denied panel.



• With this your adaptive form is ready to add include the functionalities of rule editor.

Adding Rules to Fields

In AEM we have visual as well as code editor that enables an author to add functionalities using either none of them.

Let us understand the scenario in detail so as to implement rules in the rule editor. Here first we want to check the eligibility of candidate. If the candidate is found eligible, the respective streams will appear for him to choose. As soon as the candidate selects a field, the candidate will have to enter admission details for official purpose and hence submit the form.

In case the candidate does not qualify to secure admission in college, he will recieve the respective message.

Let us begin:

• Go to the First Name field, select rule editor, this will navigate you to the Rule Editor Console.



• We want Last Name to be enabled only when the First Name is not empty, and so select create.




• Similarly, we want the applicant to add 10th percentile only after last name is not empty.



• Now if 10th percentile is greater than 75, we want Applicable Streams panel to be visible.



• Now if 10th percentile is between 55-75, we want Available Streams panel to be visible.



• Now if 10th percentile is less than 55, we want denied panel to be visible.



• After selecting any of the streams, Admission details panel must get available




• In Admission Panel, we want to enable Contact only if Name as per ID proof is not empty.



• We want to enable Address only if Contact is not empty.



• We want to enable Blood group only if Address is not empty.



• We want to enable submission after only if blood group is not empty.

Now your form is ready. Preview it to find the functionalities working as per the scenario.

Hope you enjoyed reading and understanding the concept of rule editor provided by AEM.

Thanks for reading! 😄