View-Layout (View Designer) 
Die Registerkarte Layout ist in vier Bereiche unterteilt:
View Designer
Kategorien
In der linken Spalte des Editors, die im Änderungs- und Erweiterungsmodus sichtbar ist, befinden sich die einzelnen UI-Elemente in UI-Element-Kategorien (intern sind diese in Bibliotheken aufgeteilt).
(Beispiel für die 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.
Die UI-Elemente können Sie im View Designer per Drag&Drop in das Layout der View in bestehende Container einfügen.
HinweisBeachten Sie, dass das Einfügen von UI-Elementen per Drag&Drop in vollständig leere Views zur Zeit nicht unterstützt wird.
Ende des Hinweises.Vorschau / Grafischer View Designer
Im grafischen View Designer im mittleren Bereich des Editor-Fensters ist das Layout der View vereinfacht dargestellt.
Mit Hilfe dieses Layout-Editors können Sie die Gestaltung der View direkt überprüfen (Vorschau) und markierte Elemente per Drag&Drop verschieben.
Zusätzlich stehen über das Kontextmenü die folgenden Funktionen für jedes UI-Element in der Vorschau (sowie im UI-Element-Baum) zur Verfügung:
Verschieben des jeweiligen UI-Elementes an die erste oder letzte Position und nach oben bzw. nach unten
Anzeigen der UI-Element-Dokumentation
Als Template speichern
Sie können eine beliebige existierende UI-Element-Hierarchie als Vorlage abspeichern und, wenn gewünscht, zusätzlich mit einem Symbol versehen, um sie bei Bedarf wieder zu verwenden. Auch die vorhandenen Bindings können Sie dabei mit abspeichern.
Benutzer-Templates können Sie über den Wizard in der Web Dynpro Explorer Menüzeile bei Bedarf aufrufen und weiter verwenden:
(Wizard)Die Benutzer-Templates werden im Wizard unterhalb der Standard-Templates (Form, Table, Dynpro) zur weiteren Verwendung aufgelistet.
Sie können Benutzer-Templates über den Wizard auch wieder entfernen. Zusätzlich können Sie sie auch exportieren und importieren.
Element ausschneiden, entfernen, kopieren bzw. umbenennen
Elementdefinition austauschen
Für viele dieser Funktionen stehen zusätzlich Shortcuts zur Verfügung, die bei den entsprechenden Einträgen im Kontextmenü aufgelistet sind.
UI-Element-Baumstruktur
Im oberen Teil werden die im Layout enthaltenen UI-Elemente hierarchisch dargestellt. In dieser Hierarchie können Sie ebenfalls die Reihenfolge bzw. die Schachtelung der einzelnen UI-Elemente beeinflussen.
Hier stehen die gleichen Funktionen über das Kontextemenü zur Verfügung wie in der Vorschau.
Eigenschaftentabelle
Unterhalb der UI-Element-Baumstruktur werden die Eigenschaften des in der Hierarchie aktuell markierten UI-Elementes tabellarisch aufgelistet.
Sie können die einzelnen Spalten der Eigenschaftentabelle per Drag&Drop verschieben. Zusätzlich können Sie die Breite der einzelnen Tabellenspalten ändern.
UI-Element-Kategorien
Die UI-Element-Kategorien sind in verschiedene Bereiche unterteilt. Als Beispiel seien an dieser Stelle nur einige Bereiche genannt, die vollständige Liste finden Sie in der UI-Element-Referenz.
favorites
Da Sie in der Regel einige der Elemente wesentlich häufiger benutzen werden als andere, können Sie diese Elemente in einer eigenen Favoriten-Kategorie zusammenfassen. Sie können einzelne Elemente aus jeder der Kategorien per Drag&Drop in Ihren Favoriten-Ordner überführen.
text
In dieser Kategorie liegen alle UI-Elemente, die im Rahmen einer Textgestaltung benötigt werden, wie die Elemente TextView, Label oder Inputfield.
selection
In dieser Kategorie liegen UI-Elemente, mit deren Hilfe Sie Auswahl-Vorgänge gestalten wie die Elemente CheckBox oder RadioButton.
graphics
Diese Kategorie stellt Oberflächenelemente für Präsentationsgrafiken und geografische Karten oder eingebundene Bilder zur Verfügung.
UI-Elemente-Hierarchie und Eigenschaften der UI-Elemente
In der UI-Elemente-Hierarchie am rechten Rand des Editors werden alle von Ihnen eingefügten UI-Elemente in einer Baumstruktur angezeigt. Das Wurzelelement dieser Baumstruktur heißt RootUIElmentContainer. Es wird, zusammen mit CONTEXT_MENUS mit jeder View automatisch angelegt und enthält zunächst keine sichtbaren Objekte. Allerdings können Sie allgemeine Eigenschaften, die für die ganze View gelten, mit seiner Hilfe beeinflussen. Dies sind graphische Eigenschaften wie das Layout, die Höhe oder die Breite der View.
Hinweis
Sie können auch verschiedene Root-Elemente verwenden.
Weitere Informationen: Root-Elemente von Views
Neben der Drag&Drop-Technik können Sie auch mit Hilfe des Kontextmenüs des RootUIElementContainers neue Elemente in Ihr Layout einfügen:
Wählen Sie Element einfügen.....
Geben Sie einen Namen für das neue Element ein.
Aus der Dropdown-Listbox wählen Sie das gewünschte UI-Element aus.
Bestätigen Sie den Dialog.
Sobald das neue Element in der Baumstruktur erscheint, können Sie es markieren und die Eigenschaften in der zugehörigen Tabelle bearbeiten.
Innerhalb der Baumstruktur können Sie per Drag&Drop UI-Elemente verschieben, um die Gestaltung des Layouts zu beeinflussen.
Hinweis
Wenn ein neues UI-Element per Drag&Drop aus einer UI-Element-Kategorie in das Layout eingefügt wurde, wird automatisch ein Name für dieses Element angelegt. Sie können diesen Namen in der Eigenschaften-Tabelle des Elements ändern.
Elementdefinitionsaustausch
Im View Designer können Sie im Layout bei Bedarf jedes UI-Element durch ein anderes UI-Element ersetzen, z.B. einen Button durch ein InputField. Dies funktioniert analog zum Austausch von ROOTUIELEMENTCONTAINER-Elementen.
Beim Austausch von UI-Elementen werden aggregierte Elemente, soweit möglich, mit übernommen. Somit ist ein vorheriges Löschen der Root-Kind-Elemente nicht mehr erforderlich, da der Root-Austausch nun auch zentral über den Elementaustausch läuft.
Es werden immer die Ziele der jeweiligen Aggregation miteinander getauscht, also z.B. bei Kind-Elementen alle UI-Elemente und z.B. bei Table-Cell-Editoren alle Table-Cell-Editoren.
Die Eigenschaften der UI-Elemente werden, sofern möglich, ebenfalls automatisch übernommen.
Es werden, wenn möglich, die Primary-Property-Bindings automatisch übernommen.
Sie können den Austausch der Elementdefinition über Elementdefinition austauschen im Kontextmenü eines UI-Elements in der Vorschau oder im UI-Element-Baum aufrufen.
Eigenschaften-Tabelle
Die Eigenschaften-Tabelle wird für jedes einzelne UI-Element dargestellt, wenn das Element in der Hierarchie markiert worden ist.
Einige Eigenschaften können nur direkt in die Tabelle eingetragen werden (z.B. die ID einer Tabellenspalte), für andere Eigenschaften können Sie alternativ ein Binding zu einem Context-Element erzeugen, z.B. die Anzahl der sichtbaren Reihen einer Table. In einem solchen Fall ist die Anzahl nicht konstant, sondern ändert sich genau dann, wenn der Wert des zugehörigen Context-Elementes sich ändert. Für einige Eigenschaften wiederum ist ein Binding an ein Context-Element zwingend erforderlich. So kann beispielsweise die Angabe der Datenquelle einer Table ausschließlich über ein solches Binding erfolgen.
Neben den Eigenschaften werden in der Tabelle auch mögliche Ereignisse des UI-Elements (Aktionen) verwaltet. Aktionen werden automatisch angelegt, wenn Sie dem Layout Ihrer View ein Element hinzugefügt haben, welches eine Aktion des Benutzers erwartet (beispielsweise einen Button oder ein InputField). Der zugehörige Ereignisbehandler wird angelegt, sobald Sie in der Tabelle einen Namen für die Aktion eingetragen haben. Doppelklicken des Namens der Aktion führt Sie auf einen ABAP Editor, in dem Sie die Ereignisbehandlermethode geeignet ausprogrammieren können.
Hinweis
Die auf diese Weise entstandene Ereignisbehandlermethode wird automatisch auf der Registerkarte Methoden eingetragen. Wenn innerhalb der aktuellen View bereits für andere Buttons Ereignisbehandlermethoden angelegt worden sind, sind diese ebenfalls auf der Registerkarte Methoden eingetragen. Sie werden Ihnen beim Eintrag des Namens für die neue Aktion zur Auswahl angeboten.
Globales Suchen
Sie können im View Designer über die SAP GUI Ikone 
(Suchen) nach dem Namen eines UI-Elementes in dem Layout Ihrer View, also in der Vorschau und in der UI-Element-Baumstruktur,
suchen. Dies bietet sich an, wenn Sie komplexe Layouts mit vielen Verschachtelungstiefen verwenden.
Das System positioniert direkt auf das gefundene UI-Element, in der Vorschau und im UI-Element-Baum.
Hinweis
Die gleiche Suchfunktion steht im Kontextmenü des ROOTUIELEMENTCONTAINER über Element suchen zur Verfügung.