Use the Page Designer

While there are several editors available to you in the Designer, the one you'll likely use most frequently is the Page Designer. To open the Page Designer, click a page in the Navigator's Web Apps (or Mobile Apps) pane:

Description of page-designer-overview.png follows

Description of the illustration page-designer-overview.png

The Page Designer offers several different ways for you to interact with your page. Specifically, you can:

Drag and drop components on to the page using the Components palette;
Work with components from a hierarchical perspective, in Structure view;
Start with your data and decide how to represent the data in the user interface, using the Data palette;
View and update the properties that control the appearance and behavior of whatever is currently selected in the canvas, using the Properties pane.

Right-click any of these panels to open a menu that lets you reposition the Components, Data, Structure, and Properties panels for your convenience. Each panel can be moved to the top left, bottom left, top right, or bottom right of the canvas (as shown here for the Structure view):

Tip:

You can hide or show any of these panes by clicking the Components, Data, Structure, or Properties tab.

To design your pages, you'll drag components from the Components palette to the canvas. Once you add components, the Structure view provides a hierarchical view of the components on the canvas. Use the Properties pane to view or edit a component's properties as well as open any Quick Starts that can be used with a selected component.

Right-clicking a component opens a pop-up menu that lets you perform several actions on the component, such as selecting its parent component, surrounding it with another component or element, or deleting it. You can also insert a component before, inside, or after the selected component.
Description of insert-component.png follows
Description of the illustration insert-component.png

You can also bring up the right-click (or context) menu without selecting any component, both on the canvas or in Structure view. When a component isn't selected, the options in the menu will vary.

Along the top of the Page Designer is a toolbar, which lets you configure the Page Designer itself:

Toolbar Item	Description
	Reloads the page
	Opens a dialog box for entering input parameters for the page.
	Opens a dialog for selecting the user roles that are used when previewing pages in Live mode.
	Opens a menu for selecting the screen size represented by the canvas. This menu includes the default Fit to Canvas option that resizes the canvas to always take up all available space between the left and right panes. You can also use the Custom option to set the minimum and maximum values for viewport resolution and resize the canvas to whatever size you want.
	For an imported mobile app, shows or hides a mobile device's bezel (the border between a device's screen and its frame).
	Opens a dialog box for changing the magnification of the canvas.
	Toggles between the Live, Design, and Code modes: Live mode: Displays the page as it will look and behave when it is published. You use Live mode to interact with the pages in your application to navigate to different pages, create and modify business objects, and confirm that your application is behaving as you expect. Design mode: Contains a canvas area that you use to place and position components in the page. This is the mode you use most frequently. Code mode: Use to edit the page's code. In Code mode, you can drag components from the Components palette and drop them directly into valid places in the code in the editor. When you use the Structure view to edit and reposition elements, the changes are automatically reflected in the code. The Components palette, Structure view, and the Properties pane can be used the same way in each mode. When you select an item in one mode, the item remains selected when you switch to a different mode. When you switch from Design to Code mode (for example), the source code of a component selected on the canvas will be highlighted in the code editor. All the modes are synchronized, so changes you make in the Properties pane or Structure view are visible when you switch to a different mode. Tip: Hold the Ctrl key (Cmd on Mac) to momentarily switch between Live and Design modes. Make sure the cursor is on the canvas, then hold the Ctrl key. For example, you can check the values in a drop-down menu by simply holding the Ctrl key and clicking the menu on the canvas.
	At the bottom of the canvas (not in the toolbar), a breadcrumb path that displays a hierarchical list of links for a selected component to indicate its placement in the page's structure. Clicking a link in the breadcrumb path selects that component on the canvas and in Structure view and lets you view its details in the Properties pane. To hide breadcrumbs (shown by default), select Hide Breadcrumbs in the context menu.
	Displays time taken to render and display the page in the canvas. Clicking the icon will show a breakdown of how long different tasks (such as bootstrapping and loading a shell page) take in order to display the page, as shown in this example: Rendering is done in runtime execution mode, with the Page Designer serving the resources needed to display the page. Because each resource is requested in a different phase of runtime initialization, the time between these resource requests is measured and summarized. This information can thus help you isolate runtime issues that may cause your app to load slowly. For example, if a page takes time because of long REST calls, you might decide to defer the calls or run them in parallel. If the page contains runtime errors, an error message will show instead. Click the message to get details about the errors and resolve them for the page to render correctly.