Create page navigation

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

Procedure

On the component library, open sap.m > Layout.
Drag and drop the Bar component onto PageContacts in the application tree.
From the dialog, choose 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, choose Right.

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

Result: On the preview pane, the JavaScript editor opens.
In the JavaScript editor, right-click and choose 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 navigate to a page.

To preview your application, see Preview your application.