OpenUI5 comes with a powerful routing API that helps you control the state of your application efficiently. This tutorial will illustrate all major features and APIs related to navigation and routing in OpenUI5 apps by creating a simple and easy to understand mobile app. It represents a set of best practices for applying the navigation and routing features of OpenUI5 to your applications.
In classical Web applications, the server determines which resource is requested based on the URL pattern of the request and serves it accordingly. The server-side logic controls how the requested resource or page is displayed in an appropriate way.
In single-page applications, only one page is initially requested from the server and additional resources are dynamically loaded using client-side logic. The user only navigates within this page. The navigation is persisted in the hash instead of the server path or URL parameters.
For example, a classical Web application might display the employee’s resume page when URL http://<your-host>/<some-path-to-the-app>/employees/resume.html?id=3 or http://<your-host>/<some-path-to-the-app>/employees/3/resume is called. A single-page application instead would do the same thing by using a hash-based URL like http://<your-host>/<some-path-to-the-app>/#/employees/3/resume.
The information in the hash, namely everything that is following the # character, is interpreted by the router.
📝 This tutorial does not handle cross-app navigation with the SAP Fiori launchpad. However, the concepts described in this tutorial are also fundamental for navigation and routing between apps in the SAP Fiori launchpad.
We will create a simple app displaying the data of a company’s employees to show typical navigation patterns and routing features. The complete flow of the application can be seen in the figure below. We'll start with the home page which lets users do the following:
-
Display a Not Found page
-
Navigate to a list of employees and drill further down to see a Details page for each employee
-
Show an Employee Overview that they can search and sort
Throughout this tutorial we will add features for navigating to pages and bookmarking them. We will add backward and forward navigation with common transition animations (slide, show, flip, etc.). We will add more pages to the app and navigate between them to show typical use cases. We will even learn how to implement features for bookmarking a specific search, table sorting via filters, and dialogs.
💡 You don't have to do all tutorial steps sequentially, you can also jump directly to any step you want. Just download the code from the previous step and make sure that the application runs as intended.
You can view the samples for all steps here in this repository.
The tutorial consists of the following steps. To start, just open the first link — you'll be guided from there.
- Step 1: Set Up the Initial App — We start by setting up a simple app for this tutorial. The app displays mock data only and mimics real OData back-end calls with the mock server as you have seen in the Walkthrough tutorial. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 2: Enable Routing — In this step we will modify the app and introduce routing. Instead of having the home page of the app hard coded we will configure a router to wire multiple views together when our app is called. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 3: Catch Invalid Hashes — Sometimes it is important to display an indication that the requested resource was not found. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 4: Add a Back Button to Not Found Page — When we are on the Not Found page because of an invalid hash, we want to get back to our app to select another page. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 5: Display a Target Without Changing the Hash — In this step, you will learn more about targets and how to display a target from the routing configuration manually. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 6: Navigate to Routes with Hard-Coded Patterns — In this step, we'll create a second button on the home page, with which we can navigate to a simple list of employees. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 7: Navigate to Routes with Mandatory Parameters — In this step, we implement a feature that allows the user to click on an employee in the list to see additional details of the employee. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 8: Navigate with Flip Transition — In this step, we want to illustrate how to navigate to a page with a custom transition animation. Both forward and backward navigation will use the “flip” transition but with a different direction. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 9: Allow Bookmarkable Tabs with Optional Query Parameters — The resume view contains four tabs as we have seen in the previous step of this tutorial. However, when the user navigates to the resume page, only the first tab is displayed initially. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 10: Implement “Lazy Loading” — In the previous steps, we have implemented a Resume view that uses tabs to display data. The complete content of all the tabs is loaded once, no matter which tab is currently displayed. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 11: Assign Multiple Targets — In this step, we will add a new button to the home page to illustrate the usage of multiple targets for a route. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 12: Make a Search Bookmarkable — In this step we will make the search bookmarkable. This allows users to search for employees in the Employees table and they can bookmark their search query or share the URL. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 13: Make Table Sorting Bookmarkable — In this step, we will create a button at the top of the table which will change the sorting of the table. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 14: Make Dialogs Bookmarkable — In this step, we want to allow bookmarking of the dialog box that is opened when the user clicks the Sort button. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 15: Reuse an Existing Route — The Employees table displays employee data. However, the resumes of the employees are not accessible from this view yet. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 16: Handle Invalid Hashes by Listening to Bypassed Events — So far we have created many useful routes in our app. In the very early steps we have also made sure that a Not Found page is displayed in case the app was called with an invalid hash. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 17: Listen to Matched Events of Any Route — In the previous step, we have listened for bypassed events to detect possible technical issues with our app. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
Copyright (c) 2026 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the LICENSE file.