Create page navigation

In this task, you learn how to add a button to a page and use a press event to go to the next page.

Prerequisites

On the component library, open sap.m > Layout.
Drag and drop the Bar component onto PageContacts in the application tree.
From the dialog, select Footer.

Result: The Bar component is renamed to footerApp.
Drag and drop the BarContent component onto the footerApp in the application tree.
From the dialog, select Right.

Result: The BarContent is renamed to right.
Open sap.m > SimpleControls and drag and drop the Button component on right.
On the properties pane, go to Properties > text and enter Add Contact.
Go to Properties > icon, click  and select an icon from the library, for example,  add.
Go to Events > press and click .

Result: On the preview pane, the JavaScript Editor opens.
In the JavaScript Editor, right-click and select SAPUI5 > Other > Navigation sap.m.

Result: A number of code snippets are added to the editor.

Leave only one snippet and delete the rest:

// Go to a new page
// Replace App to your App component and replace newPage to the new Page
oApp.to(nextPage);

You have added a button to a footer on a page.
You have used the press event of a button to go to a page.

To preview your application, see Preview your application.