Show TOC

View Layout (View Designer)Locate this document in the navigation structure

Use

The tab Layout is divided into four areas:

Figure 1: View Designer

  • Categories

    In the left column of the editor, which is visible in the change and enhancement mode, the individual UI elements are located in UI element categories (these are divided into libraries internally).

    Example of the View Designer Toolbar

    Über das Kontextmenü für jedes UI-Element können sie die jeweilige UI-Element-Dokumentation aufrufen und das gewünschte UI-Element in die Favoriten-Kategorie verschieben.

    In the View Desginer you can add the UI elements to the layout of the view in the existing container using drag and drop.

    Note

    Note that adding UI elements using drag and drop is not currently supported in completely empty views.

  • Preview / Graphical View Designer

    A simple presentation of the view layout appears in the graphical View Designer in the middle part of the editor window.

    You can use this layout editor to check the design of the view directly (preview). Selected elements can be moved using drag and drop.

    The following functions are also provided by the context menu for every UI element in the preview (as well as in the UI element tree):

    • Move the current UI elements to the first or last position or up or down.

    • Displaying UI Element Documentation

    • Save as Template

      You can save any existing UI element hierarchy as a template if you want and also give it a symbol to reuse it when required. You can also save the existing bindings along with it.

      If required, you can call and reuse user templates using the Wizard in the Web Dynpro Explorer menu bar: Wizard

      The user templates are listed for further using in the wizard under standard templates ( Form , Table , Dynpro ).

      You can also remove user templates using the wizard. In addition, you can import and export them.

    • Cut out, Remove, Copy, or Rename Elements

    • Exchange element definition

    There are also Shortcuts provided for many of these functions and these are listed for the related entries in the context menu.

  • UI Element Tree Structure

    In the upper part, the UI elements contained in the layout are displayed hierarchically. You can change the order or nesting of the individual UI elements in this hierarchy.

    The same functions are provided here in the context menu as in the preview.

  • Properties Table

    Below the tree structure, the properties of the currently selected UI elements are listed in a table.

    You can move the individual columns of the properties table using drag and drop. In addition you can change the width of the individual table columns.

UI Element Categories

The UI element categories are divided into various areas. Only a few areas are given as examples here, the UI Element Reference contains the complete list.

Favorites

Since you would normally use certain elements much more than others, you can put these elements together in a separate favorites category. You can move elements from each of the categories into your favorites folder using drag & drop.

text

This category contains all UI elements required for formatting text, such as TextView, Label, or Inputfield.

Selection

This category contains UI elements you can use to create selection procedures, such as the elements CheckBox or RadioButton.

Graphics

This category contains interface elements for presentation graphics, geographical maps, and embedded images.

UI Element Hierarchy and Properties of the UI Elements

The UI element hierarchy to the right of the editor displays all UI elements that you inserted as a tree structure. The root element of this tree structure is called RootUIElmentContainer. It is created automatically with CONTEXT_MENUS with each view and initially does not contain any visible objects. You can use it, however, to influence general properties that apply to the entire view. These are graphical properties such as the layout, height or width of the view.

Note

You can also use different root elements.

More information : Root Elements of Views

In addition to drag&drop to insert new elements into your layout you can also use the context menu of RootUIElementContainers:

  1. Choose Insert Entries... .

  2. Enter a name for the new element.

  3. Select the UI element you require from the dropdown list.

  4. Confirm the dialog box.

As soon as the new element appears in the tree structure, you can select it and edit the properties in the corresponding table.

You can move elements in the tree structure using drag and drop to change the layout design.

Note

If a new UI element from the UI element category is inserted into the layout using drag and drop, a name is automatically assigned to this element. You can change this name in the properties table of the element.

Exchanging Element Definition

In the View Designer in the layout you can replace each UI elment with another UI element, for example, replace a Button with a InputField. This works the same as when exchanging ROOTUIELEMENTCONTAINER elements.

  • When UI elements are exchanged, aggregated elements are transferred too, as far as possible. This means that it is not necessary to delete root child elements in advance, since the root is now replaced centrally through the element exchange.

  • It is always the targets of the respective aggregation that are exchanged, for example, all UI elements in the case of child elements, and all Table Cell Editors in the case of Table Cell Editors.

  • The properties of UI elements are also automatically transferred as far as possible.

  • If possible the primary property bindings are automatically transferred.

You can exchange the element definition by choosing Exchanging Element Definition in the context menu of a UI element in the preview or in the UI element tree.

Properties Table

The properties table is displayed for each UI element when the element is selected in the tree structure.

Some properties have to be entered directly in the table (such as the ID of a table column); alternatively, with other properties you can create a Binding to a Context Element , such as the number of visible rows in a Table. In such a case, the number is not constant but changes whenever the value of the corresponding context element changes. For some properties, binding to a context element is required. For example, the data source of a Table can only be specified when it is bound to a context element.

In addition to the properties, possible Eevents of UI Elements - known as actions - are also managed in the table. Actions are created automatically if you inserted an element into your view's layout that is expecting a user action (such as a Button or an InputField). The corresponding event handler is created when you enter a name for the action in the table. When you double-click the action name, an ABAP Editor is called in which you can Create the Code for the Event Handler .

Note

Die auf diese Weise entstandene Ereignisbehandlermethode wird automatisch auf der Registerkarte Methoden eingetragen. If other event handler methods for other Buttons have been created in the current view, these methods are similarly entered in the Methods tab. They are offered for selection when you enter the name for the new action.

Global Search

Using the SAP GUI icon Suchen in the View Designer, you can search for the name of a UI element in the layout of your view, as well as in the preview and UI element tree structure. This is offered when you are using complex layouts with lots of nesting.

The system jumps directly to the UI element that has been found in the preview and UI elements tree.

Note

The same search function is provided in the context menu of the ROOTUIELEMENTCONTAINER using Search Element .