Defining Popups 

Use

Popups are containers that enable you to display content in a popup window. For example, you may want to create a popup that displays additional information about the item selected at runtime in a Table View.

Prerequisites

You have opened a model on the Design board.

Procedure

...

       1.      Drag a Popup container from the Compose task panel onto the Design board.

       2.      Drag one or more elements that you want to display in the popup into the Popup container. You can drag existing elements from the Design board, or new elements from the Compose task panel.

If the content of the popup is relatively simple (contains one or two elements), you can drag the elements directly into the Popup container. If the content is more complex (contains many elements), we recommend that you define the content in a Nested View inside the Popup container. The end result at runtime is the same, but creating popups with complex content in this way makes it easier to work with them during design time.

       3.      Drag a transition line from the solid dot at the top of the element that triggers the popup, to the flashing dot at the top left of the Popup icon. From the context menu that opens, choose an event name to trigger the popup or create a new event.

       4.      In the element that triggers the popup, define an action for the trigger. For example, you could add a Button control and define a custom action for it with the same name as the event that you selected in the previous step.

       5.      Configure the Popup:

                            a.      On the Design board, select the Popup icon and click Configure in the task-panel toolbar.

                            b.      In the Configure task panel, enter a Title for the popup window and define other popup properties. For example, you can define whether to show a toolbar in the popup, whether to show OK and Cancel buttons in the toolbar, and whether you want to perform a specific action when the popup is closed by the runtime user.

       6.      Lay out the Popup:

                            a.      On the Design board, right-click the Popup icon and choose Layout Board. The Popup opens in a separate window, displaying any fields that are retrieved from a connected data service.

                            b.      Rename, rearrange, and add UI elements (views and controls) to the Popup, as you would in any other container element. For more information, see Laying Out the UI.

       7.      Close the Popup.

Result

The Popup is created. At runtime, it opens as a separate window when triggered.

Example

For a step-by-step example, see Adding a Popup.

Tips

The following tips may be helpful when working with popups:

·        In the Configure task panel, you can choose to show a toolbar in the popup and automatically add OK and Cancel buttons to it.

·        You can use the Close action field in the Configure task panel to specify the action that occurs when the runtime user closes the popup (in addition to the default built-in functionality that closes the popup and transfers any mapped data).

·        You can use the Close Window predefined action in the Define Action dialog box to close the popup. You define the Close Window action for a control in the popup and then choose the name of the popup window to close from the Window dropdown list.

·        You use the Map Data dialog box to map data from a popup to another element, as you would between any other elements. For more information, see Mapping Data.

If the mapping you need to create is relatively simple, you can define an Assign action that transfers data to a port of a different element. To do this, select the control and open the Define Actiondialog box. Define an Assign action and from the To dropdown list, select the element to which you want to transfer the data. From the Target field dropdown list, select the field to which you want to transfer the data. For more information, see Defining Actions.

Note that this method is not possible when you are mapping data from a nested view contained within a popup.

·        If you are working with a popup in a nested view, you can use signals to manipulate the popup:

○       You can close the popup when the event is triggered within the nested view. To do so, select the nested view icon, drag out from the out port of the nested view, and choose Close Popup from the context menu. A Close connector is added with a connecting line to the nested view.

○       You can use the Signal In and Signal Out connectors to connect to any other element in the component. After you add signals, remember to right-click the nested view icon and choose Redefine Ports from the context menu to make the newly added ports visible in the nested view.

●      To map data between a nested view in a popup and its parent component, you can right-click the connecting line, choose Map Data, and map the data as you would between any other elements. For more information, see Mapping Data.

If you are mapping data from an out port defined as Close Popup, you first choose the element to which to map the data (by dragging from the port on the left of the Map Data dialog box to the element on the right) and then perform the data mapping.