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.


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.

We start by creating this sub-form with date fields:
  1. Within the form, create a presentation called One Way, make it default, and add a date control named Depart Date to it.

    Description of oneway.png follows
    Description of the illustration oneway.png

  2. Create another presentation called Round Trip and add two date controls as follows.

    Description of roundtrip.png follows
    Description of the illustration roundtrip.png

  3. Now, create the main travel form with the following controls:
    1. Input text controls for name, origin, and destination.

    2. Radio buttons to specify if it’s a one-way journey or round trip.

    3. Embed the web form created in the previous steps to provide the date controls.

    Description of webform-outer.png follows
    Description of the illustration webform-outer.png

  4. Set up option names and values for the radio button control as follows; specify the One Way option as default.

    Description of radio-options.png follows
    Description of the illustration radio-options.png

  5. 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:

    Description of chang-pres-event.png follows
    Description of the illustration chang-pres-event.png

  6. 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.

  7. 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.

    Description of selection-change.png follows
    Description of the illustration selection-change.png