Create general structure

In this task, you learn how to create the general structure of an application with two pages.

Prerequisites

On the side menu, click Designer.
On the component library, open sap.m > Layout.
Drag and drop the Shell component onto the HTML5 Document in the application tree.
Drag and drop the App component onto the Shell component in the application tree.
Drag and drop the Page component onto the App component in the application tree.

Result: You have created the general structure of your application.
Select the Page component and, on the UI object pane, change the Name to PageContacts.
On the properties pane, scroll to the title attribute and enter Contact List.
Drag and drop another Page component onto the App component in the application tree.
Select the Page component and, on the UI object pane, change the Name to PageAddContact.
On the properties pane, scroll to the title attribute and enter New Contact.
On the shell bar, click  Save and  Activate.

You have created a general structure for your application.
You have added a shell, an app, and two pages to your application.

To preview your application, see Preview your application.