Skip to main content

Module 8: Routing & Navigation

Routing and navigation define how users move between views in a SAPUI5 application.
Modern UI5 apps use URL-based routing, configured declaratively in manifest.json.

This enables:

  • Deep linking
  • Browser navigation (Back/Forward)
  • Bookmarkable URLs
  • Clean application structure

1. Routing Concept in SAPUI5​

What is Routing?​

Routing maps:

  • URL patterns
  • To views (targets)
URL → Router → Target → View
Core Concept

Routing enables URL-driven navigation without page reloads.

2. Router Configuration (manifest.json)​

Routing Configuration Structure​

"sap.ui5": {
  "routing": {
    "config": {
      "routerClass": "sap.ui.core.routing.Router",
      "viewType": "XML",
      "async": true,
      "controlAggregation": "pages",
      "controlId": "app"
    },
    "routes": [
      {
        "pattern": "",
        "name": "home",
        "target": "home"
      },
      {
        "pattern": "employee/{id}",
        "name": "employeeDetail",
        "target": "employeeDetail"
      }
    ],
    "targets": {
      "home": {
        "viewName": "Home",
        "viewLevel": 1
      },
      "employeeDetail": {
        "viewName": "EmployeeDetail",
        "viewLevel": 2
      }
    }
  }
}
Best Practice

Define all routes in manifest.json for maintainability.

3. Navigating Between Routes​

Programmatic Navigation​

this.getOwnerComponent().getRouter().navTo("employeeDetail", {
  id: 123
});

With Query Parameters​

this.getOwnerComponent().getRouter().navTo("search", {}, {
  query: {
    q: "SAP"
  }
});
Modern Pattern

URL-based navigation is cleaner than view switching.

4. Route Parameters & Patterns​

Simple Route Pattern​

employee/{id}

Matches: /employee/123

Multiple Parameters​

employee/{id}/project/{projectId}

Matches: /employee/123/project/456

Optional Parameters​

employee/{id}?tab=details
Best Practice

Use URL parameters for filtering and navigation context.

5. Route Matching & Handler Functions​

onRouteMatched Handler​

onInit: function () {
  this.getOwnerComponent().getRouter().attachRoutePatternMatched(
    this.onRouteMatched,
    this
  );
},

onRouteMatched: function (oEvent) {
  var sId = oEvent.getParameter("arguments").id;
  this.loadEmployee(sId);
}
Important

Always clean up route handlers in onExit.

6. Navigation History & Back Button​

Browser Back Navigation​

this.getOwnerComponent().getRouter().navTo("home");

UI5 handles browser history automatically.

Manual Back Button​

onBackPress: function () {
  this.getOwnerComponent().getRouter().navTo("home");
}
UX Pattern

Modern apps should support browser back/forward.

7. View Levels & Animation​

View Level​

"targets": {
  "home": {
    "viewLevel": 1
  },
  "detail": {
    "viewLevel": 2
  }
}

View levels control slide animations.

Navigation Experience

Higher view levels slide from right to left.

8. Master-Detail Pattern​

Two-View Navigation​

Master view → Detail view

// In Master controller
onEmployeeSelect: function (oEvent) {
  var oItem = oEvent.getParameter("listItem");
  var sId = oItem.getBindingContext().getProperty("id");
  this.getOwnerComponent().getRouter().navTo("detail", {
    id: sId
  });
}
Common Pattern

Master-Detail is widely used in SAP applications.

9. Routing Best Practices​

Follow These
  • Define all routes in manifest.json
  • Use descriptive route names
  • Handle route parameters properly
  • Clean up handlers in onExit
  • Test deep linking
  • Support browser back/forward
Avoid These
  • Hardcoded view switching
  • Ignoring URL parameters
  • Not handling invalid routes
  • Mixing manual and auto navigation

10. Interview-Grade Explanation​

Q: How does routing work in SAPUI5 and why is it important?

Answer:

Routing maps URL patterns to views, enabling URL-driven navigation, deep linking, and browser history support. Routes are configured in manifest.json and handled programmatically in controllers, providing a clean, modern navigation experience.

11. Summary​

  • Routing enables URL-based navigation
  • Routes are configured in manifest.json
  • Router maps URLs to views/targets
  • Parameters pass context between views
  • History is handled automatically
  • Master-Detail is a common pattern

12. What's Next?​

➡️ Module 9: Lists & Tables

Learning Tip

Good routing architecture makes multi-view apps maintainable and user-friendly.