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

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.

Answers:

Answer

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

sapui5 sap.ui.core.Component#getService

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 _versions 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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.