CODEWITHSUNDEEP
sapui5
simon
simon

Reputation: 101

Change the application title when go to particular pattern

I want to change the application title (the title that appears on the tab up) when I go to a particular pattern. I am setting the title in index.html. Do you have an idea?

Upvotes: 1

Views: 2574

Answers (3)

Ankush Datey
Ankush Datey

Reputation: 1

A Quick way to change the application title:

window.document.title = "Your Title Name";

Upvotes: -2

Boghyon Hoffmann
Boghyon Hoffmann

Reputation: 18084

For this use case, the framework added the title[1] property which can be assigned to each routing target object:

In manifest.json

"targets": {
  "target1": {
    "viewPath": "...",
    "viewName": "...",
    "title": "My Awesome Products!!"
  },
  //...
},

This alone, however, is not sufficient to update the title when the target is displaying. In order to do so, listen to the event titleChanged[API] and get the parameter "title" from the event which should be then assigned to the document.title attribute:

In Component.js

init: function() {
  // ...
  this.getRouter().attachTitleChanged(this.onTitleChanged, this);
},

onTitleChanged: function(event) {
  document.title = event.getParameter("title"); // returns: "My Awesome Products!!"
},

You can even bind model data to the title property (e.g. for i18n), access previously used titles, and more. Take a look at the topic Using the title Property in Targets.

If Multiple Targets Are Assigned to Single Route

Usually, a route takes the title that is defined in its corresponding target. However, if multiple targets are assigned to a single route (e.g. to display master-detail views), the first defined title is taken into account. Though, if both targets have title defined, the route can declare explicitly from which target it should take the title which can be achieved by assigning the target name to the titleTarget property:

In manifest.json

"routes": {
  "myRoute": {
    "pattern": "myParticularPattern",
    "target": ["target1", "target2"],
    "titleTarget": "target2"
  }
},

[1] Available since 1.42.

Upvotes: 3

Matthijs Mennens
Matthijs Mennens

Reputation: 1145

What you could do is something like this:

First controller

onList: function() {
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);   
        oRouter.navTo("list");  
    },

Second controller

    onInit: function() {
        sap.ui.core.UIComponent.getRouterFor(this).getRoute("list").attachPatternMatched(this._onListRouteMatched, this);
    },

    _onListRouteMatched: function(oEvent){
        document.title = "test title";
    },

Upvotes: 0

Related Questions