Настройка пользовательской темы для приложения Sap Cloud UI5

Question

Я пытался следовать каждому руководству и учебнику по настройке пользовательской темы в Интернете без какой-либо удачи.

У меня есть простое приложение UI5, настроенное в SAP Cloud Platform, и настраиваемая тема, также настроенная в SAP Cloud Platform в службе дизайнера тем. Приложение было связано со ссылкой '/doorway/' (не фактической развернутой ссылкой SCP), и я вижу предварительный просмотр в конструкторе тем, который выглядит правильно.

Моя проблема связана с привязкой темы к моему приложению. Тема опубликована и запущена, но использование ссылки на URL-адрес или сценарий начальной загрузки в приложении UI5 не приводит к добавлению темы в мое приложение.

Это скрипт начальной загрузки в файле index.html:

<script id="sap-ui-bootstrap"
        src="https://sapui5.hana.ondemand.com/1.48.9/resources/sap-ui-cachebuster/sap-ui-core.js"
        data-sap-ui-appCacheBuster="./"
        data-sap-ui-libs="sap.m"
        data-sap-ui-theme="customethemename"
        data-sap-ui-theme-roots='{"customethemename" : "https://customethemename-accountid.dispatcher.hana.ondemand.com/UI5/"}'
        data-sap-ui-compatVersion="edge"
        data-sap-ui-resourceroots='{"my.app.name": ""}'>
</script>

Это файл neo-app.json:

{ "path": " /themedesigner",
    "target": {
        "type": "application",
        "name": "themedesigner"
    },
    "description": "Route for theme designer"
}

Answer 1

Обычно приложение SAP UI5 имеет темы по умолчанию blue_crystal и gold_reflection themes. Но если вы хотите применить другую тему, вы можете создать один файл темы и напрямую применить его к приложению.

Шаги для применения пользовательской темы следующие:

1. Создать ресурсы папки в папке WebContent в вашем приложении;
2. Пользовательский zip-файл темы должен иметь папки "Base" и "UI5";
3. Загрузите содержимое папки UI5 (должна быть папка с именем "sap");
4. Скопируйте вышеуказанные файлы в созданную папку ресурсов;

5. Измените имя темы с sap_bluecrystal на CustomTheme в index.html;

   <script id="sap-ui-bootstrap"
       src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
       data-sap-ui-libs="sap.m"
       data-sap-ui-theme="CustomThemeName"
       data-sap-ui-compatVersion="edge"
       data-sap-ui-resourceroots='{"ResourceRoots": ""}'>
   </script>
   

6. Добавьте маршрут к вам neo-app.json, если вы еще этого не сделали.

  "routes": [
  {
    "path": "/resources",
    "target": {
      "type": "service",
      "name": "sapui5",
      "version":"1.52.6",
      "preferLocal":true,
      "entryPath": "/resources"
    },
    "description": "SAPUI5 Resources"
  }   
  ]

Надеюсь, это поможет!