Work with Presentations

A presentation is a single view of the form.

Presentations are useful:

• When forms are rendered in different devices

• To present different views of the same data for specific users

When a form is created, it uses a default presentation. When you add a control to the form, the new control is added to the currently selected presentation.

Selecting, adding, or deleting a presentation in the web forms editor

1. On the Form tab, notice that the Presentations table lists the available presentations. When a form is created, it uses the Main presentation by default.
   The Presentation tab displays the properties of the currently selected presentation. An asterisk (*) indicates a required property. You can edit the properties of the currently selected presentation and specify new values:

   Field	Description
   Name	Specify a name for the presentation.
   Description	Specify a suitable description for the presentation.
   Border Color	Select a border color from the color palette or enter a hexadecimal value in the adjacent text field.
   Border Width	Specify a border width in pixels or points. For example, 9px.
   Border Style	Select a border style (Solid, Dotted, or Dashed) for the presentation.
   Background Color	Specify a background color for the presentation. Select a background color from the color palette or enter a hexadecimal value in the adjacent text field.
   Events	Configure events for the presentation. See Add Dynamic Behavior to Forms.
   Reusable Snippets	Create a global event snippet to reuse across the form’s presentation. Use any event block, such as action, condition, or connector, to define a snippet. In addition, all the event snippets you’ve extracted while defining events for form controls appear here. See Extract a Snippet. Click Edit to view or update a previously extracted snippet. Changes you make at the presentation level reflect in all instances of the snippet across different controls. Note that deleting a global snippet converts all usages of the snippet into local copies.

2. To add a presentation, click Create Presentation in the Presentations table of the Form tab, and make an appropriate selection in the Select Presentation Type dialog box.
   • From Scratch: Select to create a fresh presentation. In the Create Presentation window, enter a name for the presentation and an optional description. Select Make default to make this presentation the default presentation. Select Switch to this presentation to switch to this new presentation immediately after creation. Click Create.
   • Clone from Previous Presentation: Select to create a presentation based on an existing presentation. In the resulting window, select an existing presentation from the list.
   • Customize from Previous Presentation: Select to create a customized presentation based on an existing presentation. In the resulting window, select an existing presentation from the list.

   Note:

   A customized presentation is identical to the base presentation from which it is created. However, unlike a cloned presentation, you cannot add/delete controls or modify control properties within a customized presentation. You can only perform the followings actions on existing controls: hide, show, and modify read-only status. To edit a customized presentation after creating it, use the Edit button next to the presentation switcher.
3. To delete an existing presentation, click the Delete Presentation icon in the Presentations table. If you try to delete the default presentation, the Delete Default Presentation Confirmation dialog box appears. Select a new default presentation from the list. Click Delete.
4. To change the default presentation, in the Presentations table, select the Make this the default presentation icon next to the presentation you want to change to the default.

Notice that you can switch to a presentation using the drop-down list of available presentations on the top of the canvas.

Selecting the Right Presentation Type

This section lists all the differences between the available presentation types and helps you make the right selection.

Scratch	Clone	Customize
Created with no controls.	Created by copying controls from the base presentation.	Created by linking to controls in the base presentation.
Adding or editing new controls is allowed.	Adding or editing new controls is allowed.	Adding or editing new controls isn’t allowed. Only visibility of the controls can be edited.
No base presentation is used.	A base presentation is used; however, deleting the base presentation doesn’t affect the cloned presentation. In addition, a cloned presentation is not in sync with its base presentation.	A base presentation is used and deleting the base presentation deletes all the customized presentations created using it. A customized presentation is always in sync with its base presentation.
Used to design a new presentation.	Used to create an independent presentation with all content from a previous presentation.	Used to create a presentation that is linked and identical to a previous presentation, which only allows for modifying the visibility of controls.

Some Useful Event Actions for Presentations

This section lists a few useful actions that you can apply to a presentation through the event window. To create an event action, see specifying actions.

• Use the Set Data action to set the value of a particular data attribute used in the form. The value is added to the payload. When the event executes, all controls using this data attribute, either directly or indirectly (through the Computed Value option), are updated with this value.

• Use the Change Presentation action to switch the presentation of a form or an embedded form on occurrence of an event.

• Use the Print action to print a presentation of a form on occurrence of an event. For example, you can define an On Click event with the Print action for a Button control.

• Use the following actions to manipulate an array or its elements:

  • Use the Array Value action to set the value of a particular element in an array on occurrence of an event. Specify the array, index of the element, and value to set—in that order—in the subsequent fields of the event window. The following image shows a value of option1 set to an element with index 0 in the array named checklist.

    
    Description of the illustration set-array-value.png

  • Use the Insert Array Value action to insert an element into an array. Specify the array, the index at which to insert the element, and the value to insert—in that order—in the subsequent fields of the event window.

  • Use the Append Array Value action to insert an element at the end of an array. Specify the array and the element to append in the subsequent fields of the event window.

  • Use the Clean Array action to clear an entire array. Specify the array in the Value field.

  • Use the Delete Array Value action to delete a particular element in an array. Specify the array and the index of the element to delete in the subsequent fields of the event window.

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.

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 the illustration oneway.png

2. Create another presentation called Round Trip and add two date controls as 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 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 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 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 the illustration selection-change.png