Form with branching screen template

The form with branching screen is a low code screen template. It enables you to hide or show fields based on the data entered by the user.
This article explains the steps required to adapt the form to your own use case.

Get Started

This screen template example uses a questionnaire in which, depending on the answer selected, another question appears.

Follow the below instructions for these two scenarios:

Step 1 – how to show a hidden field if a user selects a specific option in a radio button question and keep it hidden otherwise.

Step 2 –  how to show one hidden field if the user selects one of the options and show another hidden field if the user selects any of the remaining options.

Step 1 – How to show a hidden field if a user selects a specific option in a radio button question and keep it hidden otherwise

The current screen template includes a hidden field that is only shown if the user selects the option ‘Other’ when answering the question ‘How did you hear about us?’ To change the question and answers:

1. Add the “Form with branching” screen template to your app using the ‘Add screen’ button
2. Click on the form component to open the settings
3. Edit the form to include the questions you want, including a radio button field and another field that should be only shown if the user selects a specific answer
4. Click save & close
5. Click on the ‘Developer Options’ icon in the right menu and open the screen JavaScript.
6. Delete the code between ‘/* PART 2 */’ and ‘/* END OF PART 2*/’ (lines 29 – 51) , as it is only required for the second scenario described in this article.
7. Replace How did you hear about us? (line 10) with the field name of your new question
8. Replace Other (line 11) with the field name of the option that, when selected, will show another field
9. Replace Please specify with the field name of the option that should only be shown if the option above was selected
10. Click ‘Save and run
    

Step 2 – How to show a specific hidden field depending on the answer selected

The next scenario is demonstrated by the following example in our screen template:

Two hidden fields that are shown according to the option the user selects when answering ‘How likely are you to use one of our services again?’ were added to the screen template:

1. If the user selects ‘Very likely’, the field ‘What do you like most about us?’ is shown
2. If the user selects any of the remaining options, the field ‘ How can we improve?’ is shown

How to adapt to your scenario:

1. Add the form with branching screen template to your app using the ‘Add screen’ button
2. Click on the form to edit it
3. Change the form to fit your purpose, including a radio button field and two other fields, one that should be only shown if the user selects a specific answer for the question, and another field that should be shown otherwise
4. Click save & close
5. Click on the ‘Developer Options’ icon in the right menu and open the screen JavaScript
6. Delete the code between ‘/* PART 1 */’ and ‘/* END OF PART 1*/’ (lines 8 – 26), as it is only required for the first scenario described in this article
7. Replace How likely are you to use one of our services again? (line 31) with the name of the question
8. Replace Very likely (line 32) with the name of the option that, when selected, will show the first hidden field.
9. Replace What do you like most about us? with the name of the field that should be shown if the option above was selected.
10. Replace How can we improve? with the name of the field that should be shown if another option is selected
11. Click ‘Save and run.