Change the application title when go to particular pattern

Question

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?

Answer 1

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";
    },

Answer 2

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.

Answer 3

A Quick way to change the application title:

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