How can we create a form involving multiple scenarios?

vDesigner 2.0
, ,
1

How can we create a form where users must either provide their name and date of birth or choose to verify with AADHAR or PAN, making sure that if they skip the name and date of birth, they have to enter AADHAR or PAN, and if they don’t use AADHAR or PAN, they have to enter their name and date of birth?
Specifically use the following elements to achieve this scenario:

  • Input field

  • Date picker

  • Switch button

  • Radio group

  • Button element

  • Text field (optional)

2

Hi @Achint_Kaur, welcome to the community! Sharing the steps required to achieve this use case:

  • Process flow
    Case- I: The user provides his/her name and date of birth
    Case- II: The user proceeds with direct verification

    process_flow
    process_flow641×532 22.2 KB

  • Configuration of the UI Elements: Drop the elements listed in the question as follows and make the following fields ‘Mandatory’ in the element property:
    a. Name inputfield element
    b. Datepicker element
    c. Radiogroup element
    d. AADHAR inputfield element
    e. PAN inputfield element

    Canvas
    Canvas418×548 13.5 KB

  • Configuring all the tasks for the “Switch Button”:

    1. Select the “Switch Button” element and go to ‘Events’ > ‘onSelect’.

    2. Drop a “Visible/Invisible” task and select the name inputfield and date of birth datepicker elements in the “Visible Elements” and select the Radiogroup, AADHAR & PAN inputfields in the “Invisible Elements” parameter.

    3. Business Rule configuration:
      i. Create a new Business Rule and provide a relevant name to it.
      ii. Rule 1 configuration:
      When (Switch_Button) == Static (null, String)

      iii. Rule 2 configuration:
      When (Switch_Button) == Static (N, String)

    4. Understanding the rules & the task:
      i. The switch button in its default state will return ‘null’ and when the switch button is set to the off position, it returns ‘N’.
      ii. Thus, this task upon implementation will make the “name inputfield” and “date of birth datepicker” elements visible only when the Switch Button is either in its default state (returns ‘null’) or when the switch button is set to the off position (returns ‘N’).

    5. Now, drop another “Visible/Invisible” task and select the Radiogroup in the “Visible Elements” and select the name inputfield and date of birth datepicker elements in the “Invisible Elements” parameter.

    6. Business Rule configuration:
      i. Create a new Business Rule and provide a relevant name to it.
      ii. Rule configuration:
      When (Switch_Button) == Static (Y, String)

    7. Understanding the rule & the task:
      i. When the switch button is toggled/switched on, it will return ‘Y’.
      ii. Thus, this task upon implementation will make the “Radiogroup” element visible only when the switch button is toggled/switched on (returns ‘Y’).

    8. Now, drop a “Reset Data” task after the two “Visible/Invisible” tasks configured above. Select the Radiogroup, AADHAR & PAN inputfields in the “Select Elements” parameter.

    9. Business Rule configuration:
      i. Create a new Business Rule and provide a relevant name to it.
      ii. Rule 1 configuration:
      When (Switch_Button) == Static (Y, String)

      iii. Rule 2 configuration:
      When (Switch_Button) == Static (N, String)

    10. Understanding the rule & the task:
      This task upon implementation will remove the selected options on the “Radiogroup element” as well as remove the data entered in the “AADHAR & PAN inputfields” whenever the switch button is toggled/switched on or off.

    11. Now, drop a “Reload Elements” task after the “Reset Data” task. Select the Radiogroup, AADHAR & PAN inputfields in the “Select Elements” parameter.

    12. Business Rule configuration: Select the same BR created for the “Reset Data” task as this task will reload the elements whenever the switch button is toggled/switched on or off.

  • Configuring all the tasks for the “Radiogroup”:

    1. Select the “Radiogroup” element and go to ‘Events’ > ‘onSelect’.

    2. Drop a “Visible/Invisible” task and select the AADHAR inputfield element in the “Visible Elements” and select the “PAN inputfield” in the “Invisible Elements” parameter.

    3. Business Rule configuration:
      When (Radiogroup) == Static (AADHAR, String)

    4. Understanding the rule & the task:
      This task upon implementation will make the “AADHAR inputfield” element visible only when the ‘AADHAR’ value is selected in the Radiogroup.

    5. Now, drop another “Visible/Invisible” task and select the “PAN inputfield” in the “Visible Elements” and select the “AADHAR inputfield” in the “Invisible Elements” parameter.

    6. Business Rule configuration:
      When (Radiogroup) == Static (PAN, String)

    7. Understanding the rule & the task:
      This task upon implementation will make the “PAN inputfield” element visible only when the ‘PAN’ value is selected in the Radiogroup.

  • Configuring all the tasks for the “Proceed button”:

    1. Select the “Button” element and go to ‘Events’ > ‘onClick’.

    2. Drop a “Data Validation” task and select the name inputfield and date of birth datepicker elements in the “Validate Elements”.

    3. Business Rule configuration: You can use the same BR used in the 1st Visible/Invisible task dropped in the task group linked to the “Switch Button”

    4. Understanding the rule & the task:
      This task upon implementation will validate the “name inputfield” and “date of birth datepicker” elements only when the Switch Button is either in its default state (returns ‘null’) or when the switch button is set to the off position (returns ‘N’).

    5. Drop another “Data Validation” task and select the Radiogroup element in the “Validate Elements”.

    6. Business Rule configuration: You can use the same BR used in the 2nd Visible/Invisible task dropped in the task group linked to the “Switch Button”

    7. Understanding the rule & the task:
      This task upon implementation will validate the “Radiogroup” element only when the Switch Button is either in its default state (returns ‘null’) or when the switch button is toggled/switched on (returns ‘Y’).

    8. Drop another “Data Validation” task and select the AADHAR inputfield element in the “Validate Elements”.

    9. Business Rule configuration:
      i. Create a new BR and provide a relevant name to it.
      ii. Rule: When (Radiogroup) == Static (AADHAR, String)

    10. Understanding the rule & the task:
      This task upon implementation will validate the “AADHAR inputfield” element only when the ‘AADHAR’ value is selected in the Radiogroup.

    11. Now, drop another “Data Validation” task and select the PAN inputfield element in the “Validate Elements”.

    12. Business Rule configuration:
      i. Create a new BR and provide a relevant name to it.
      ii. Rule: When (Radiogroup) == Static (PAN, String)

    13. Understanding the rule & the task:
      This task upon implementation will validate the “PAN inputfield” element only when the ‘PAN’ value is selected in the Radiogroup.

    14. Finally, just to check whether everything is working or not, drop a ‘Navigation’ task after all the data validation tasks and select the required page in the “Destination Screen”.

These configurations shall fulfill all the validations and BRs required to achieve this scenario.

3 Likes
3

Okay thanks @harman_singh . This helped alot.

1 Like