Part 1: Creating and Editing the Search View

Once you have created a new Web Dynpro component for this exercise, you now need to add the first view to this component.

1. In the object list, select the top node, the component object entry.

2. Choose  Create  View  and in the following dialog, enter a name (such as Search) for the new view.

   Confirm the dialog box.

   The Web Dynpro Explorer is now displayed in the editor area of the Workbench. Here you can structure the new view.

3. Use the context menu of the RootUIElementContainers to insert an element of type Group for the layout.

   In the element's properties table, select the MatrixLayout layout.

   For the element of type Group, an element of type Caption was automatically embedded which is intended to hold the group element's header.

4. Enter a height of 10ex and a width of 40ex in the properties table for this element.

5. Select the UI element Caption_1 in the element hierarchy of the view and then enter a suitable text in the properties table.

   Save the view.

   This inserts the component into a new folder in the object list. The new view was stored in this folder.

6. In the element hierarchy of the view select the element of type Group.

7. Add two additional elements to the Group element: one of type Label and one of type InputField.

8. Select the element of type Label.

   In the element's properties table, in the Layot Data line select the MatrixHeadData entry. Then enter a suitable text ( Enter...) and declare the relationship to the Inputfield element you just created (property: LabelFor). LabelFor).

9. Finally, create an element of type Button below the Group element, again using the context menu of the RootUIElementContainer.

   In the properties table, enter a text for this button ( Go) and save your view.

10. To define the Context for your view, go to the Context tab.

11. Select the root node Context of the context of view Search.

12. Choose  Create  Node  from the context menu.

13. Enter a name (for example, data) for this node, and choose Cardinality 1..1.

    Confirm the Create dialog.

14. Select the new node.

15. Using the Create using the Wizard context menu entry, create an Attribute from the Component of the SFLIGHT structure. Select the CARRID field from the structure.

16. Save the view and return to the Layout tab page.

17. Select the element of type Input Field.

    In the properties table of the element, click on the Binding button (far right) of the value line.

    An additional dialog box displays the hierarchical context of the Search view. Select the CARRID you just created by double-clicking on it.

    The value of the element of type InputField is now bound to the context attribute CARRID.

You can display the view in the browser for initial testing purposes.

Continue with Step 2: Testing the First View