Creating a Popup iView

In this example, you create an alternative to the iView designed in Adding a Data Service for Choosing Banks: Rather than add a data service with attached forms to the "front" of the iView, you create a popup iView from the initial input form.

Prerequisites

You have created the model in Creating the Base Model and it is open in Storyboard.

Procedure

From the Design board top level (SecondExample), copy-and-paste the first iView (BanksA) again and rename it BanksC.
Open (drill down into) the iView and choose the Layout tab.
As you can see, in the Input Form, the user is expected to enter the country of the bank and the bank key. In order to assist the user in finding the bank key, we will create a popup iView accessed from this form.
Create the button in the Input Form.
1. Click the edge of the Input Form and then click the Configure button in the task-panel toolbar. The fields and controls in the form are displayed in the table at the bottom of the task panel.
2. Click the (Add) button at the bottom of the task panel. The New UI Control dialog box is displayed.
3. From the Select control type list, choose Pushbutton and in the Fieldname field, enter Choose_Bank. This creates a new control in the Input Form.
4. On the Layout board, move the new button to the right of the Bank Key field. This way, users can enter the bank country, and rather than manually entering the bank key, they can click the button and get information directly. You should expand the width of both the form and the table to accommodate the button.
5. Right-click the button, choose Properties from the context menu and click the Action tab to define the event that is associated with the button.
6. Define the action as follows:
  1. Click the (Add) button and choose Custom Action at the bottom of the list.
  2. In the Action Name column, enter Choose Bank.
  3. Be sure that the value in the Apply to field is Self. This assigns an action to the button that will activate the Choose-bank line to the popup.
  4. Click Close.
Your layout should look something like the following:

(Banks Popup - Layout)
Save the model.
Return to the Design board, where we will create the popup iView:
1. 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.
2. At the bottom of the dialog box, choose Create New iView and click OK. The icon for the popup view is added, with an arbitrary name, such as View S76. Rename the popup Choose a Bank.
3. Click the Evt1 line between the form and the popup icon and change the event name to choose_bank. This maps the button in the form to the popup.
Build the popup iView:
1. Right-click the popup icon and choose Drill Down from the context menu. This opens the new iView.
2. Import BAPI_BANK_GETLIST using the Find Data Services task panel.
3. Drag out from the Input port of the data service and create a Start Point, selecting BANK_CTRY as the input field.
4. Double-click the Input port of Bank Getlist, select MAX_ROWS at the bottom of the task panel and clear the Required? checkbox.
5. From the Bank List output port of the data service, choose Add Table View. In the Select Display Fields data box, click Select All and click OK.
6. From the out port of the Bank List Table, add an End Point, selecting BANK_CTRY and BANK_KEY as the output fields.
7. Click on the evt1 line to the end point and rename it Close.
8. Right-click the Bank List Table and choose Create Toolbar from the context menu. The Create Toolbar Buttons dialog box is displayed.
9. Create a button that will activate the Close event:
  1. Click the (Add) button at the bottom left and create a button called Close (Button name field).
  2. Click the (Add) button above the Action Name table and choose Custom Action from the list. Name it ClosePopup.
  3. Click OK.
10. Right-click the line connecting the table to the end point and rename it closepopup.
11. Return to the BanksC iView and save the model.
Map the input and output to/from the popup iView:
1. Double-click the choose_bank line. The input and output fields are displayed at the bottom of the Configure Element task panel.
2. In the top table, use the Assign From column to map the @BANKCOUNTRY field coming from the Input Form to the BANK_CTRY field required at the input to the popup. In the second table, use the Popup Output column to map the two fields output from the popup to the two fields (BANKCOUNTRY and BANKKEY) required by the Input Form.
Switch to the Layout board again, and adjust the layout (by widening both the form and the table, again) to compensate for the popup iView, which will be displayed within the source iView.
Save the BanksC iView and deploy the iView. It should look something like this:
(Banks Popup - Layout)

Result

When you run the model, enter the bank country and click Choose Bank. The results should look something like this:

(Banks Popup - Runtime)

When you click Close in the popup, the bank key is automatically transferred to the Input Form. From there, click Submit and the bank details are displayed.