вступление
Эта история объясняет способ динамического изменения названия приложения SAPUI5, интегрированного в SAP Fiori Launchpad.
С этой задачей связаны два основных понятия:
- Событие изменения заголовка, связанное с маршрутизацией.
- Сервис, который фактически позволяет изменить заголовок 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}" }, }, ... }
В предыдущем коде мы видим три примера.
- Статический заголовок: мы просто назначаем статический текст заголовку цели.
- Динамический заголовок: аналогично тому, как мы можем делать это в представлениях, мы можем ссылаться на значения в наших моделях.
Это до сих пор звучит неприятно, но есть одно «но». Это не работает, потому что нам нужно интегрировать модификацию заголовка в 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 });
Позвольте мне объяснить, что здесь происходит.
- Получаем новое название.
- Получаем объект ShellUIService. this.getService возвращает обещание, поэтому, используя оператор await, мы получаем фактическую услугу в oService.
- Устанавливаем новый заголовок.
Но, опять же, есть одно «но», это не сработает. Почему?
ShellUIService Injection
Чтобы использовать ShellUIService, нам нужно внедрить его в наше приложение. Способ добиться этого - настроить эту службу в manifest.json:
{ ... "sap.ui5": { "services" : { "ShellUIService": { "factoryName": "sap.ushell.ui5service.ShellUIService" } } } ... }
Вывод
Как мы видим, динамически изменить заголовок несложно, но нужно помнить о многих деталях.
Надеюсь, вам понравится читать эту историю, и вы сочтете ее полезной для решения вашей проблемы.
Пожалуйста, не стесняйтесь обращаться ко мне, если у вас есть какие-либо вопросы.
использованная литература
Эта история основана на официальной документации SAP для текущей версии LTS.
Я рекомендую прочитать эту документацию, если вас интересуют другие полезные подробности.