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.


  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, select 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, select 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 properties pane, go to Properties > text and enter Add Contact.

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

  9. Go to Events > press and click .

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

  10. In the JavaScript Editor, right-click and select 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. Click 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 go to a page.

    To preview your application, see Preview your application.