Work with Presentations

A presentation is a single view of the web form.

Presentations are useful:

• When web forms are rendered in different devices

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

When a web form is created, it uses a default presentation. When you add a control to the web 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 web 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 a Form.
   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.
   Global Connectors	Configure a global connector call to use in one or more controls within a form. Adding a global connector call is similar to adding a connector call within events. See Executing REST Connector Calls in Events. While configuring a global connector, you can also determine when the connector data loads into a control using the Skip Upon Load check box. Deselect the check box (default state) to allow connector data to be populated into a control when the form loads. Select the check box to prevent connector data being populated into a control when the form loads. When you use this option, you must explicitly execute a connector refresh on the corresponding control for the data to load. While configuring a global connector, specify error handler messages for controls in the Error Handler section and determine how you handle connector error by using the Ignore connector error check box. If you select the check box, the specified error handler messages appear in the form’s controls and all other events execute normally when the form loads. If you deselect the check box, the specified error handler messages appear in the form’s controls but all other events fail to execute when the form loads. If multiple global connectors are configured, then you’ll see this behavior even if one of the global connectors doesn't have Ignore connector error selected. A global connector call can be reused across different events. Unlike local connectors calls, you don't have to configure it in each event. Instead, you can configure it once at the presentation level and use the data from it in events across different controls. However, a global connector call is not automatically updated. In an event window, click +Action and select the Refresh Global Connector action available for the Presentation control to trigger a new connector call. When you use this action, all other actions present within an event are executed after the global connector update.

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. See Selecting the Right Presentation Type for all the differences between the types of presentations you can create. 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. See Change Form Presentations Dynamically.

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