Step 31: Routing and Navigation


So far, we have put all app content on one single page. As we add more and more features, we want to split the content and put it on separate pages.


Step 31: Routing and Navigation - 第1张  | 优通SAP


You can view and download all files at Walkthrough – Step 31.

We add a new “routing” section to the sap.ui5 part of the descriptor. There
are three subsections that define the routing and navigation structure of the app:

  • config

    This section contains the global router configuration and default values
    that apply for all routes and targets. We define the router class that
    we want to use and where our views are located in the app. To load and
    display views automatically, we also specify which control is used to
    display the pages and what aggregation should be filled when a new page
    is displayed.

  • routes

    Each route defines a name, a pattern, and one or more targets to navigate to when the route
    has been hit. The pattern is basically the URL part that matches to the
    route, we define two routes for our app. The first one is a default
    route that will show the overview page with the content from the
    previous steps, and the second is the detail route with the URL pattern
    detail that will show a new page.

  • targets

    A target defines a view that is displayed, it is associated with one or more routes and it
    can also be displayed manually from within the app. Whenever a target is
    displayed, the corresponding view is loaded and shown in the app. In our
    app we simply define two targets with a view name that corresponds to
    the target name.


In the component initialization method, we now add a call to initialize the router.
We do not need to instantiate the router manually, it is automatically instantiated
based on our AppDescriptor configuration and assigned to the

Initializing the router will evaluate the current URL and load the corresponding view
automatically. This is done with the help of the routes and targets that have been
configured in the AppDescriptor. If a route has been hit, the view
of its corresponding target is loaded and displayed.

4.webapp/view/Overview.view.xml (New)

We move the content of the previous steps from the App view to a new
Overview view. For simplicity, we do not change the controller
as it only contains our helper method to open the dialog, that means we reuse the
controller sap.ui.demo.walkthrough.controller.App for two different views
(for the new overview and for the app view). However, two instances of that
controller are instantiated at runtime. In general, one instance of a controller is
instantiated for each view that references the controller.


Our App view is now only containing the empty app tag. The router will
automatically add the view that corresponds to the current URL into the app control.
The router identifies the app control with the ID that corresponds to the property
controlId: “app” in the AppDescriptor.

6.webapp/view/Detail.view.xml (New)

Now we add a second view for the detail view. It only contains a page and an
ObjectHeader control that displays the static text
Invoice for now.


We add a new string to the resource bundle for the detail page title.


In the invoice list view we add a press event to the list item and set the item type to
Navigation so that the item can actually be clicked.


We add the event handler function to the controller of our invoices list. Now it is
time to navigate to the detail page by clicking an item in the invoice list. We
access the router instance for our app by calling the helper method
sap.ui.core.UIComponent.getRouterFor(this). On the router we
call the navTo method to navigate to the detail
route that we specified in the routing configuration.

You should now see the detail page when you click an item in the list of invoices.


  • Define the routing configuration in the descriptor




15 + 4 =