Editing the UI Elements

Prerequisites

You have created the Search action for the SearchView.

You have constructed the view context for the two views, SearchView and ResultView, and mapped them to the controller context.

The structure of your project TutWD_FlightList_Init is currently displayed in the Web Dynpro Explorer.

Procedure

Editing UI elements for the Search view

.

       1.      Open the SearchView in the View Designer by clicking the Layout tab of the View Editor.

The View Designer displays a predefined default text. Simultaneously, the Outline view displays a list of the UI elements included. If you select an element in the Outline view or on the Layout tab, its associated element properties are shown in the Properties view.

       2.      Choose following UI elements that have been included in the project template and give them following properties:

Property

Value

For FromCityInputField

Value

Bapi_Flight_Getlist_Input.Destination_From.City

For ToCityInputField

Value

Bapi_Flight_Getlist_Input.Destination_To.City

For SearchButton

Event > onAction

Search

The View Designer displays the following layout for the SearchView:

       3.      Save the new metadata by choosing the icon  (Save All Metadata) from the toolbar.

Editing UI elements for the ResultView

       1.      Open the ResultsView in the View Designer by clicking the Layout tab.

       2.      Select the Table on the Outline tab and choose Create Binding from the context menu.

       3.      In the wizard that appears, you can specify table columns that will be displayed in the TableView. Select the FlightList model node and press Next.

       4.      On the next screen leave all the other values unchanged and choose Finish.

The value FlightList is automatically assigned to the dataSource property of the table UI element and all selected table columns are created for the TableView.

The View Designer displays the following layout for the ResultView.

       5.      Save the new metadata by choosing the icon  (Save All Metadata) from the toolbar.

Next step:

Adding the Implementation of the Backend Connection