Web Dynpro ABAP View

The view is the smallest unit of a Web Dynpro application visible for the user. The layout elements and dialog elements – for example, Tables, Textfields, or InputFields – required for the application are arranged in a view. The view contains a controller and a controller context in which the application data to be processed is stored in a hierarchical structure. This allows the linking of the graphical elements with the application data.

Creating a View

To create a new view for your component, select the Views node of the component in the object list on the left side of the Workbench and choose Create from its context menu. Once the view is created, the View Editor appears on the right side of the Object Navigator in the tools area. You can now edit the graphical design of the view using the tools available in the Layout tab.

To be able to see the view later in the browser, you must actively embed it in a Web Dynpro window. The first view is embedded in the main window by default, but you can also embed views manually.

View Editor

Once a view is created, the Layout tab of the View Editor is automatically called. The Layout tab is divided into three areas:

● In the left column of the editor, you can find the UI element categories, a set of small tabs with grouped UI elements – see also User Interface Elements in the reference documentation.

● A simple presentation of the view layout appears in the graphical View Designer in the middle part of the editor window. You can use the View Designer to directly check the design of the view. You can use drag and drop to move elements that you have selected.

● The right area of the editor window is divided into two areas:

○ UI Element Hierarchy

In the upper part, the UI elements contained in the layout are displayed as nodes of a tree structure. You can change the order or nesting of the individual UI elements in this hierarchy.

○ UI Element Properties

In the lower part, the properties of the UI element currently selected in the hierarchy are listed in a table.

Inserting a UI Element

The layout of a newly created view does not contain visible objects. Only the root element of the future UI element hierarchy is already created. The individual UI elements are to be embedded in this element called ROOTUIELEMENTCONTAINER, . In general, you can use two different procedures:

● Drag&Drop in the UI Element Categories:

You can use drag and drop for the corresponding icons to move the UI elements from the UI element categories on the left of the View Editor to the View Designer area and place them to the desired position in the layout.

If a new UI element from the UI element categories is inserted to the layout using drag and drop, an automatically generated name is assigned to this element. You can change this name in the properties table of the element (see below).

● Context Menu of Elements in the Tree Structure:

These UI elements can embed other UI elements - for example, Group, Table, or the ROOTUIELEMENTCONTAINER. They provide the context menu function Insert Element in the tree structure. You can specify the name and type of the new UI element in a subsequent dialog box.