Create a return button

In this task, you learn how to use the navButtonPress event to navigate back to the previous page.

Procedure

  1. On the application tree, choose PageAddContact.

  2. In the properties pane, go to Properties > showNavButton and change it to true.

  3. Go to Events > navButtonPress and click .

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

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

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

  5. 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);
  6. Replace oApp with App and nextPage with PageAddContact.

  7. Click Save and Activate.

Results

  • You have created a button to navigate back to the previous page.

  • The button is displayed on the shell bar of your application.

    To preview your application, see Preview your application.