Skip to Content

This is my first blog for UI5, just want to share some details founding. Correct me if I’m wrong.

Go to github for better markdown experience:

Here is a discussion about Router and Target:

Source code involves:

The reason I dig into the source code is I want to understand why `View` can change when I call `Router.navTo()`.

Take this offical demo as an example:

From the source code of `navTo`, it seems has nothing to do with View:

// third party hasher.setHash() is called in sap.ui.core.routing.HashChanger
HashChanger.prototype.setHash = function(sHash) {
  this.fireEvent("hashSet", { sHash : sHash });


So I think the event might be registered in `Component.init()`

# What `UIComponent.prototype.init` do for Route?

## manifest.json is defined in Demo

call `UIComponent.prototype.init`


init : function () {
  UIComponent.prototype.init.apply(this, arguments);


## sap.ui.core.UIComponent.js

In function `UIConfig.prototype.init`, router constructor is called:

`var oRoutingManifestEntry = this._getManifestEntry(“/sap.ui5/routing”, true) || {}`
returns config in manifest.json. (metadata.routing.routes)

`vRoutes = oRoutingManifestEntry.routes;`
vRoutes is used for storing `routes` config

[function getConstructorFunctionFor ]( using `` to get constructor of `sap.m.routing.Router`

And then the constructor is called:
`this._oRouter = new fnRouterConstructor(vRoutes, oRoutingConfig, this, oRoutingManifestEntry.targets);`

The four arguments stands for:

* vRoutes: metadata.routing.routes
* oRoutingConfig: metadata.routing.config
* this: UIComponent itself,for view creation
* oRoutingManifestEntry.targets: metadata.routing.targets

The constructor call make the process jump to `sap.m.routing.Router` :

var MobileRouter = Router.extend("sap.m.routing.Router",{
  constructor : function() {
    this._oTargetHandler = new TargetHandler();

    Router.prototype.constructor.apply(this, arguments);

As we know, sap.m.routing.Router(Mobile Router) extend `sap.ui.core.routing.Router`:
The four arguments corresponding to the previous four.

`this._oRouter = crossroads.create();`
a new independent Router instance is created by the third party routing library [crossroads](,

this._oViews = new Views({
  component : oOwner,
  async : this._oConfig._async

Views that are using in the routes are created, which can be using in `Router.getView()` and `Router._createTargets` etc.:

getViews : function () {
  return this._oViews;

//_createTargets is called in constructor if metadata.routing.targets exists
_createTargets : function (oConfig, oTargetsConfig) {
  return new Targets({
    views: this._oViews,
    config: oConfig,
    targets: oTargetsConfig


if target config exist, creates targets(call `Targets` constructor) and stores them in `this._oTargets`, `this._oTargets` will be used in `Router.initialize()`

Call Stack:
[sap.m.rounting.Targets.constructor]( => [sap.ui.core.routing.Targets.constructor]( => [sap.ui.core.routing.Targets._createTarget()](

Finally, I think I found the view display register function:

// _createTarget()
oTarget.attachDisplay(function (oEvent) {
  var oParameters = oEvent.getParameters();

  //break point here
     name : sName,
     view : oParameters.view,
     control : oParameters.control,
     config : oParameters.config,
}, this);

Set a breakpoint in `this.fireDisplay`, and you can see the call stack.

The `hasher.setHash()` called in `navTo` fires `hashChanged` event and `_routeMatched` event, and then the `_display` event is fired. And then View is displayed.

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

  1. Michelle Crapo

    Well – I admit I had a bit of trouble reading this one.  A quick suggestion would be to put the code in a code block and your observations outside of it.

    Congrats on the first UI5 blog,



Leave a Reply