动态更改 SAP Fiori 标题时“this.getService 不是函数”

Question

I am trying to change SAP Fiori title dynamically ie 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.

Answer 1

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": { .

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