Creating a Popup iView 

Use

You can create a popup iView to enable the runtime user to access additional data, thereby selecting information that is subsequently input back into the source iView.

Procedure

...

       1.      On the Design board, create your source iView and drill down into it.

       2.      Switch to the Layout board, and from the form or view from which the user will access the popup, create a pushbutton by one of two methods:

¡        Adding a new control to the component, using the Configure Element task panel and clicking the Add (plus) button at the bottom of the task panel.

¡        Creating a toolbar button, choosing Create Toolbar from the context menu.

       3.      When you create the button, give it a name that directly explains its function to the user, such as Choose Bank or Find Map.

       4.      Define a Custom Action for the button and enter a single-word name for the event, such as ChooseBank or FindMap.

¡        In the Control Properties dialog box, you do this using the Action tab.

¡        In the Create Toolbar Buttons dialog box, you click the Add (plus) button and choose Custom Action.

       5.      Return to the Design board, and drag out from the out port of the Input Form and choose Open Popup from the context menu. The Select Popup iView dialog box is displayed.

       6.      At the bottom of the dialog box, choose Create New iView and click OK.

An alternative is to create the popup iView independently, prior to starting this procedure. In this case, select the name of the popup and choose Select existing iView.

       7.      Double-click the evt1 line between the form and the popup icon and change the event name to the action that you entered when defining the button, such as ChooseBank or FindMap. This maps the button in the form to the popup.

       8.      Build the popup iView:

                            a.      Right-click the popup icon and choose Drill Down from the context menu. This opens the new iView.

                            b.      Add the data service you need using the Find Data Services task panel.

                            c.      Drag out from the Input port of the data service and create a Start Point, selecting the field to receive the input value form the source iView.

                            d.      From the output port of the data service, add a UI component, such as a grid or a table.

                            e.      From the out port of the output component, add an end point, selecting the output fields to be returned by the popup.

                              f.      Double-click on the evt1 line to the end point and rename it appropriately, such as Close.

                            g.      As you did in steps 2 to 4, create a button in the output component, and define an action for it with the name you used in the previous step (step f).

If the output component is a table, create a button from the Create Toolbar option in the context menu, rather than from the Configure Element task panel (adding a control and using the Control Properties dialog box)

                            h.      To define an event that is triggered when the popup is closed, create the appropriate Close (or similar) button with its action, and enter the name of the event in the Closure event field. By naming a data flow anywhere in the model with this name, prefixed by an asterisk (*), the specific event will be triggered when the runtime user closes the popup using the button.

If the runtime user closes the popup with the X in the title bar, the event will not be triggered.

                              i.      Go onto the Layout board and adjust your layout accordingly.

       9.      Return to the source iView and double-click the line to the popup. The input and output fields are displayed in the Configure Element task panel.

   10.      Map the input and output fields to/from the popup.

¡        The top table maps the fields from the Input Form (Assign From) to the fields of the popup (Popup Input).

¡        The bottom table maps the fields form the popup (Popup Output) to the fields of the Input Form (Assign to).

   11.      Adjust the layout to compensate for the popup iView, which will be displayed within the source iView.

   12.      Save the source iView and deploy it.

Example

To create your own popup iView, step-by-step, see the tutorial of Creating a Popup iView.