Change Form Presentations Dynamically
Let’s consider an example of a travel form to understand how you can use the Change Presentation action to dynamically switch a form’s presentation in runtime.
Note:
You can also use dynamic data, such as values entered in controls, payload data, or data from connectors to trigger the Change Presentation action.Here, we create a simple travel form in which a user enters details, such as name, origin, destination, and so on. The user also mentions whether the intended journey is a one-way trip or a round trip using radio buttons, and the date (departure and return) fields are displayed according to the radio button selection. The date fields are supplied through an embedded web form.
-
Within the form, create a presentation called One Way, make it default, and add a date control named Depart Date to it.
-
Create another presentation called Round Trip and add two date controls as follows.
-
Now, create the main travel form with the following controls:
-
Input text controls for name, origin, and destination.
-
Radio buttons to specify if it’s a one-way journey or round trip.
-
Embed the web form created in the previous steps to provide the date controls.
-
-
Set up option names and values for the radio button control as follows; specify the One Way option as default.
-
Now, define an On Change event for the radio button control to change the presentation of the inner web form according to the user’s selection. Use the Change Presentation action available for the inner form as shown in the following figure:
-
Click Preview to test the travel form. When the form loads, the One Way option is selected and the default presentation of the inner form loads with only the depart date control.
-
Populate all the controls and select Round Trip. The inner form’s presentation changes to display two date controls; if you change your selection back to One Way, the embedded form displays its default presentation.
