"this.getService is not a function" when changing SAP Fiori title dynamically

Question

I am trying to change SAP Fiori title dynamically i.e. after launchpad is launched and after I clicked on my app of choice, the title of the app should change based on what I want it to be. I am using this doc page as a guide https://ui5.sap.com/1.54.3/docs/api//symbols/sap.ushell.ui5service.ShellUIService.html.

Inside my webapp/Component.js, I have my setAppTitle() method which should set a new custom title to the app, and is called from within onAfterRendering() method of webapp/view/S2Custom.controller.js.

The reason, why I can not call setAppTitle() directly from within init() method of webapp/Component.js, is because I am getting my titles from webapp/i18n/i18n.properties which is not "loaded" yet during Component.js's init().

To avoid using something like setTimeout(() => this.setAppTitle(sTitle), 6000) inside Component.js, I decided to call it from within onAfterRendering() method of webapp/view/S2Custom.controller.js.

webapp/view/S2Custom.controller.js

onAfterRendering: function (oEvent) {
  var sComponentId = sap.ui.core.Component.getOwnerIdFor(this.getView());
  var oComponent = sap.ui.component(sComponentId);
  var i18nModel = new sap.ui.model.resource.ResourceModel({
    bundleName: "ui.s2p.srm.sc.blahblah.BlahBlahExtension.i18n.i18n"
  });
  var oResource = i18nModel.getResourceBundle();
  var sTitle = oComponent.getModel("appModel").getProperty("/sMode") === "OUTBOX" ? oResource.getText("APP_ONE") : oResource.getText("APP_TWO");
  this.getOwnerComponent().setAppTitle(sTitle);
},

webapp/Component.js

setAppTitle: function (sText) {
  var sTitle = sText;
  console.log("TEST: ", this.getService("ShellUIService")); // ERROR !!!
  try {
    this.getService("ShellUIService").then(function (oService) {
      oService.setTitle(sTitle);
    }, function (oError) {
      jQuery.sap.log.error("Cannot get ShellUIService");
    });
  } catch (err) {
    console.log("TEST - ERROR: ", err);
  }
},

The issue in setAppTitle() method - the console shows an error:

this.getService is not a function.

So I went into my manifest.json

"sap.ui5": {
  "_version": "1.2.0",
  "services": {
    "ShellUIService": {
      "factoryName": "sap.ushell.ui5service.ShellUIService"
    }
  },
  "dependencies": {
    "minUI5Version": "1.28.5",
    "libs": {}
  },

I noticed Web IDE showed Property "services" is not allowed error on line which contains "services": {.

Can you tell me what's causing this problem? I already tried calling this.getService("ShellUIService") alone inside Component.js's init() method, unfortunately the same error

this.getService is not a function.

Boghyon Hoffmann Boghyon Hoffmann · Accepted Answer · 2019-09-20T17:31:38

You must be using an old UI5 version. The API component.getService is available only as of 1.37.0:

You can check your current version by pressing Ctrl+Left Alt+Shift+P in the app.

About the Web IDE error message..

I noticed Web IDE showed Property "services" is not allowed error on line which contains "services": {.

If possible, update UI5 resources to one of the currently supported versions.
Except of the root _version, remove all other _versions in sap.app, sap.ui5, etc..
Set the root _version to something higher than 1.3.0 according to the table AppDescriptor Release and SAPUI5 Version.
Reload Web IDE.

"this.getService is not a function" when changing SAP Fiori title dynamically

webapp/view/S2Custom.controller.js

webapp/Component.js

1 Answers