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.


  1. On the component library, open sap.m > Layout.

  2. Drag and drop the Bar component onto PageContacts in the application tree.

  3. From the dialog, choose Footer.

    Result: The Bar component is renamed to footerApp.

  4. Drag and drop the BarContent component onto the footerApp in the application tree.

  5. From the dialog, choose Right.

    Result: The BarContent is renamed to right.

  6. Open sap.m > SimpleControls and drag and drop the Button component on right.

  7. On the porperties pane, go to Properties > text and enter Add Contact.

  8. Go to Properties > icon, choose and choose an icon from the library, for example, add.

  9. Go to Events > press and choose .

    Result: On the preview pane, the JavaScript editor opens.

  10. In the JavaScript editor, right-click and choose SAPUI5 > Other > Navigation sap.m.

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

  11. 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;
  12. Replace oApp with App and nextPage with PageAddContact.

  13. Choose Save and Activate.


  1. You have added a button to a footer on a page.

  2. You have used the press event of a button to navigate to a page.

    To preview your application, see Preview your application.