Display the content of an XML view in the layout editor to see it in a way that closely corresponds to how it will appear in your finished application.
The layout editor is not supported in the Safari browser.
The layout editor consists of a canvas in the center, and two panes on either side. On one side, you will find the Controls and Outline tabs, while on the other side, you will find the Properties pane.Events and Properties panes.
The layout editor toolbar allows you to:
-
Change the device format of the canvas to smartphone, tablet, or desktop view.
-
Expand and collapse the panes to the sides of the canvas.
-
One side includes the Controls and Outline tabs.
-
The other side includes the Properties pane.
The pane on the right side includes the Properties and Events panes.
-
-
Undo and redo actions.
You can expand or collapse each section by clicking the arrow on each section header. You can also search for controls by entering the control name in the search field at the top of the Controls tab. The relevant sections expand to display the controls that match the search criteria.
Make sure to delete the search criteria if you want to expand other sections.
You can drag and drop controls from the Controls tab onto the canvas. For more information, see Add Controls from the Controls Tab.
You can find the list of available controls in SAPUI5 Controls Supported in the Layout Editor.
Controls that are selected on the Outline tab are automatically selected on the canvas and vice versa.
You can use the Outline tab to see the hierarchy of controls on the canvas. In addition, you can add and remove controls from the canvas using the Outline tab.
For more information, see Add Controls from the Outline Tab.
The canvas in the middle of the layout editor area provides a graphical display of the selected XML view.
Click a control on the canvas to select it. To select a parent control, hold Ctrl and click. You can keep clicking until you reach the highest control in the hierarchy and then the focus will return to the original control. Click outside the canvas to undo the selection.
Properties Pane****Events and Properties Pane
On the side of the canvas is a pane that displays the following:
On the right side of the canvas is a pane that displays the following panes:
The Events pane allows you to select an existing event handler from the controller for an event of the selected control. The 
icon next to each event opens the code editor to display the relevant controller in the XML code.
The Events pane is not currently supported.
The Properties pane shows the properties of the control that is currently selected in the canvas and allows you to modify its property values. The most commonly used properties for each control are displayed at the top of the list. The 
icon next to each property opens the Data Binding dialog box.
For more information, see Binding Data, Bind Data to a Simple Control, and Bind Data to an Aggregate-Type Control.
Deprecated properties or aggregations are marked with the label deprecated (also in the Outline tab). For more information, see SAP Library for User Interface Add-On 1.0 for SAP NetWeaver on SAP Help Portal at http://help.sap.com/nw-uiaddon. Under Application Help, open SAP Library, and search for deprecation.
- Working with the Layout Editor
An overview of the steps required to edit a project using the layout editor. - SAPUI5 Controls Supported in the Layout Editor
Provides a list of SAPUI5 controls that are supported in the layout editor.
Related Information