Setting custom theme for Sap Cloud UI5 application

Question

I have tried to follow every single guide and tutorial on setting a custom theme online without any luck.

I have a simple UI5 app set up in SAP Cloud Platform and a custom theme also set up in SAP Cloud Platform in the theme designer service. The app has been linked with a '/doorway/' link (not the actual deployed SCP link) and I can see a preview in the theme designer which looks correct.

My problem is linking the theme to my app. The theme is published and running, but using a URL or bootstrap script linkage in the UI5 app does not get the theme into my app.

This is the bootstrap script in the index.html file:

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

This is the neo-app.json file:

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

Answer 1

Normally SAP UI5 application has default themes blue_crystal and gold_reflection themes. But If want to apply different theme, you can create one theming file and directly can apply the same to App.

The steps to apply custom theme follows:

1. Create folder resources into WebContent folder in you app;
2. The custom theme zip file should have a "Base" and "UI5" folders;
3. Upload the contents of UI5 folder (should be a folder named "sap");
4. Copy above files into resources folder created;

5. Change the theme name from sap_bluecrystal to CustomTheme in 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. Add route to you neo-app.json if you haven't done it already.

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

Hope that helps!