Adding a Popup 

Use

In this lesson, you extend your Flight application by adding a Popup that displays additional information about the selected flight.

For general information and tips about popups, see Defining Popups.

Prerequisites

·        You have created the model as described in Creating a Wizard and it is open in Storyboard.

●      The following data service is available from the system:

¡        BAPI_FLIGHT_CHECKAVAILIBILITY

For more information about configuring access to data services, see Defining Destinations.

Procedure

...

       1.      Add a toolbar button to the Flight Details form that triggers the Popup:

                            a.      On the Layout board, display the Flight Details form.

                            b.      From the Compose task panel, drag a button control to the toolbar.

                            c.      In the Configure task panel, define the following properties for the button:

                                                  i.       In the Text field, enter the button name Available Seats and press Enter.

                                                ii.       In the Action field, enter the text Availableand press Enter to create a custom action with this name.

       2.      Create a Popup:

                            a.      On the Design board, from the Compose task panel, drag a Popup icon into an empty area in the Flight Details step of the wizard.

                            b.      Select the Flight Details form. Drag a transition line from the solid dot at the top of the Flight Details form to the flashing dot at the top left of the Popup icon, and choose available from the context menu. The newly created toolbar button triggers the opening of the Popup.

       3.      Create the Popup content:

                            a.      In the Search task panel, search for BAPI_FLIGHT_CHECK and drag the BAPI_FLIGHT_CHECKAVAILIBILITY data service onto the Design board.

                            b.      Drag out from the out port of the Flight Details form to the Input port of the bapi_flight_checkavailibility data service.

                            c.      Select the connecting line, and in the Configure task panel choose the available event from the Event name dropdown list.

                            d.      Right-click the available connecting line, and from the context menu choose Map Data.

                            e.      In the Map Data dialog box, map the output fields of the Flight Details form to the corresponding input fields of the data service, as follows:

Target Field	Assigned Value
Airlineid	Carrid
Connectionid	Connid
Flightdate	Fldate

                              f.      Drag out from the AVAILIBILITY output port of the data service to inside the Popup icon and add a form by choosing Form View from the context menu. Rename the form to Availability.

Make sure that the form is located inside the Popup icon.

                            g.      Select the Popup icon, and in the Configure task panel:

§         Rename the popup window Title to Flight Availability.

§         Make sure that the Show toolbar checkbox is selected.

■       In the Toolbar dropdown list, make sure that Bottom is selected. This places the toolbar at the bottom of the popup window.

§         Make sure that the OK buttoncheckbox is selected and deselect the Cancel button checkbox to add an OK button to the toolbar that closes the popup window.

       4.      Save and view the model. It should look similar to the following:

       5.      Define the Popup layout:

                            a.      On the Design board, right-click the Popup icon and choose Layout Board.

The Popup opens in a separate window, displaying the fields that are retrieved from the data service.

                            b.      Rename and rearrange the fields in the Popup as follows:

                            c.      Close the Popup by clicking the X button.

       6.      Save the model.

       7.      Deploy the application:

                            a.      Click the Deploy button in the task-panel toolbar.

                            b.      Click the Deploy button in the Deploy task panel.

       8.      In the Results area of the Deploy task panel, expand the node of the development component you created, expand the Web Dynpronode, and click the Flights link under the Html or Flex node to run the application. Check that the Popup opens when you click the Available Seats button.

Result

The runtime application enables you to open a popup window that displays seat availability information for a specific flight, by selecting a flight and clicking the Available Seats button. The popup window should look similar to this: