✒️SAP BTPFIORI / El enrutamiento en aplicaciones SAPUI5 Por Jaime Gomez Arango

1 | Navigability in a SAPUI5 App

Routing

Routing is the process of changing views, for example, when clicking on an item in a table to open a new view with the details of that item. This is managed by specifying a routing configuration that establishes a relationship between possible routes and views, then connecting the different views by triggering navigation events.

Example:

When a button is clicked, a function from the router class (typically sap.m.routing.Router) is executed to launch the view corresponding to the route passed as a parameter to the function.

Scenario: Editing a Purchase Order

• Classic Web URL: /PurchaseOrder.html?Id=’12345’&action='edit'
• Single-Page App URL: /#PurchaseOrder/12345/edit

When navigating from a purchase order to a purchase requisition:

• New URL: /#PurchaseRequisition/23456/display

In this example, the part of the URL before the hash remains unchanged, while the part after the hash changes. This hash change is captured by the application to determine which controls/views to render. The router class in SAPUI5 captures all hash changes and loads different views based on the router configuration. The router also keeps a history to assist with navigation back and forth and provides ways to navigate without updating the hash or the history.

Example Process: When a button is clicked, the view informs the controller to perform an action. The controller informs the router of the navigation target (e.g., "Detail"). The router processes this information, finds a suitable "route" for the keyword, and shows the appropriate view as defined in the manifest.json.

Benefits of the Router

For any URL change after the hash, the browser does not reload the page from the server, enabling different navigation states to have their own URLs without reloading from the server and enhancing the user experience.

2 | Configuring the Router

The routing configuration is part of the application's manifest.json file. This configuration establishes various routes within the application and instructs the SAPUI5 framework on which views to instantiate for different routes and configurations.

Three Main Properties for Routing Configuration:

• config: Defines global routing parameters and values for various routes and targets.
• routes: Specifies individual routes or valid navigations within the application.
• targets: Specifies the views to show and includes options like animation directions.

Defining Routes and Targets:

• Router Class: The default router class is sap.ui.core.routing.Router.
• Custom Router Classes: These can define custom parameters and behaviors.
• Namespaces: Common namespaces in a SAPUI5 application include app, ui, and ui5.

manifest.json Configuration:

• config Section: Sets up the router. Typically, only the correct path to the views needs to be specified.
• routes Section: Defines patterns for the hash part of the URL and unique names for each route.
• targets Section: Defines view names and the level for animation transitions.

Pre-Version 1.30 Configuration: Before SAPUI5 version 1.30, routing configurations were part of the component metadata in Component.js. While this method is still supported for backward compatibility, it is now recommended to use the manifest.json file for these configurations.

3 | Analyzing Navigability in a SAPUI5 App

Three events that trigger navigation:

• New Item Selection in Detail View: The URL hash changes, and SAPUI5 uses routing configuration to select targets to display.
• navTo Method Invocation: SAPUI5 updates the URL hash and navigates according to the manifest configuration.
• getTargets() Method Invocation: SAPUI5 navigates to the specified destination based on the URL hash.

Example in a Master-Detail App:

• manifest.json Configuration: Routes are defined, such as "SalesOrderSet/{objectId}", where objectId is the sales order ID.
• navTo Method: Passes the target value (e.g., "object"), leading to the Detail view.

Hash Element in URL: The hash element (after "#") represents a position within the web page. The router manages navigation by listening to hash changes, manipulating the hash, and comparing it with route patterns to display the appropriate view.

4 | Initializing Routing

Routing must be explicitly initialized in the component to be available throughout the application. Configurations in manifest.json are loaded during router instantiation, which occurs only once per application. The recommended place for this initialization is the init method of Component.js.

Initialization Example:

sap.ui.define([

"sap/ui/core/UIComponent",

"sap/ui/model/json/JSONModel",

"sap/ui/Device"

], function (UIComponent, JSONModel, Device) {

"use strict";

return UIComponent.extend("namespace.Component", {

metadata: {

manifest: "json"

},

init: function () {

// call the base component's init function

UIComponent.prototype.init.apply(this, arguments);

// create the views based on the url/hash

this.getRouter().initialize();

}

});

});

In summary, SAPUI5 routing is crucial for managing navigation within a single-page application. By configuring routes and targets in the manifest.json file, developers can control which views are displayed based on URL hash changes, providing a seamless and efficient user experience.