вступление

Эта история объясняет способ динамического изменения названия приложения SAPUI5, интегрированного в SAP Fiori Launchpad.

С этой задачей связаны два основных понятия:

  1. Событие изменения заголовка, связанное с маршрутизацией.
  2. Сервис, который фактически позволяет изменить заголовок SAP Fiori для нашего приложения.

Название и конфигурация маршрутизации

Проще говоря, вы можете назначить динамический заголовок каждой цели, которая есть в вашей конфигурации маршрутизации.

{
    ...,
    "routes": [{
        "pattern": "products/overview",
        "name": "ProductsOverview",
        "target": "products"
    },
    ...
    ],
    "targets": {
        "products": {
            "viewPath": "shop.products",
            "viewName": "Products",
            "title": "Products Overview"
        },
        "productsDetail": {
            "viewPath": "shop.products",
            "viewName": "ProductDetails",
            "title": "Product {ID}"
        },
    },
    ...
}

В предыдущем коде мы видим три примера.

  1. Статический заголовок: мы просто назначаем статический текст заголовку цели.
  2. Динамический заголовок: аналогично тому, как мы можем делать это в представлениях, мы можем ссылаться на значения в наших моделях.

Это до сих пор звучит неприятно, но есть одно «но». Это не работает, потому что нам нужно интегрировать модификацию заголовка в Fiori Launchpad.

Изменить название события

Когда мы настраиваем заголовок для цели, каждый раз, когда выполняется навигация по этой цели, возникает событие changeTitle (как только мы находимся в цели и привязка обновляется, событие также возникает).

Ниже приведен простой пример, определенный, например, в контроллере компонента (Component.js) для получения нового заголовка и применения некоторой логики для изменения заголовка приложения:

this.getRouter().attachTitleChanged( oEvent => {
    let sTitle = oEvent.getParameter("title");
    document.title = sTitle;
});

В приведенном выше примере мы видим, что мы получаем новый заголовок из параметра объекта события и изменяем заголовок окна, но как мы можем применить это изменение более независимым от платформы способом? (примечание: это изменяет только заголовок окна, но не меняет основной заголовок SAP Fiori).

ShellUIService

Ответ заключается в использовании службы, которая позволяет нашему приложению взаимодействовать с SAP Fiori Launchpad. Это ShellUIService. Поэтому наш предыдущий код следует изменить на следующий (Component.js):

this.getRouter().attachTitleChanged( async(oEvent) => {
    let sTitle = oEvent.getParameter("title"); //1
    let oService = await this.getService("ShellUIService"); //2
    oService.setTitle(sTitle); //3
});

Позвольте мне объяснить, что здесь происходит.

  1. Получаем новое название.
  2. Получаем объект ShellUIService. this.getService возвращает обещание, поэтому, используя оператор await, мы получаем фактическую услугу в oService.
  3. Устанавливаем новый заголовок.

Но, опять же, есть одно «но», это не сработает. Почему?

ShellUIService Injection

Чтобы использовать ShellUIService, нам нужно внедрить его в наше приложение. Способ добиться этого - настроить эту службу в manifest.json:

{
   ...
   "sap.ui5": {
      "services" : {
         "ShellUIService": {
             "factoryName": "sap.ushell.ui5service.ShellUIService"
         }
      }
   }
   ...
}

Вывод

Как мы видим, динамически изменить заголовок несложно, но нужно помнить о многих деталях.

Надеюсь, вам понравится читать эту историю, и вы сочтете ее полезной для решения вашей проблемы.

Пожалуйста, не стесняйтесь обращаться ко мне, если у вас есть какие-либо вопросы.

использованная литература

Эта история основана на официальной документации SAP для текущей версии LTS.

Я рекомендую прочитать эту документацию, если вас интересуют другие полезные подробности.