Using UI5 custom theme with standalone UI5 apps on SAP CF

[Steven_UM]

Hi,

I installed the custom UI5 theme designer on SAP CF and created a couple of new themes. I managed to publish those and use them within a SAP Fiori Launchpad site running on CF.

Now I want to use the same theme(s) within a couple of standalone UI5 apps running within the same space on CF.

I followed the guidelines as per the SAP help documentation to provide some bootstrap configuration but it does not seem to work .. the theme cannot be found as the requested library url does not point to the correct location.

Now the doc talks about setting up a target in the 'neo-app'.json file - which seems to be a bit weird when talking about Cloud Foundry right ?

I suspect that there needs to be a route definition in the 'xs-app' file which directs the '/themes' folder towards the portal theme service ... but I am not sure how to setup a destination towards that service and/or how to get it configured ...

Is that help doc correct or is that info not correctly adjusted for CF ? Anyone succeeded in doing the same ?

Thanks,

Steven

[vfweiss3]

Documentation still mentions the Neo parts....

Did you get it working steven.desaeger ?

[vfweiss · Accepted solution]

It took quite some debugging of the Portal and Theme Designer service, but I finally got it working.

What I did was:

1. Bind the theming service in the mta.yaml to my web module

2. Added the following route to my xs-app.json

 {		"source": "^/themerun/(.*)$",
		"target": "$1",
		"service": "com.sap.ui.theming",
		"endpoint": "runtime"	}

3. Added the following code in the index.html

data-sap-ui-versionedLibCss="true"
data-sap-ui-theme="<themename>"
data-sap-ui-theme-roots='{"<themename>" : "/themerun/themeroot/v1/UI5"}'

Hopefully somebody from SAP can confirm that this is the correct way to do so and update the documentation.

[Steven_UM · Accepted solution]

Unfortunately not ... and haven't looked into the CF FLP& theming since ... a bit a shame SAP still hasn't updated this.

[Steven_UM · Accepted solution]

Thanks Vincent ! Will try this out soon and let you know if it works for me 🙂

[Steven_UM · Accepted solution]

Hi Vincent,

It took a while to try but I can confirm this works perfectly ! Thanks for that.

Important bit - as you mentioned - is to bind the 'UI Theme Designer' service in the mta.yaml into the MTA subproject which holds the app router / web content of the MTA project in which you want to use the custom theme.

I initially skipped that as I had the 'Theme designer' running in a different MTA project but then (obviously) you get an error like this:

xs-app.json/routes/4: Format validation failed (A route requires access to com.sap.ui.theming service but the service is not bound.)

It is a bit 'weird' to bind the 'designer' service into a project that simply wants to use the custom theme ( and not design it ) but I reckon that is just a matter of the name of the provided SAP service - it actually serves both design and usage.

[hschaefer123 · Accepted solution]

Hi Vincent,
thanks for the tip.

Right now, it is working for me, but the performance for loading 5 libs tooks 2400ms!!! which is quite slow!
And the badest thing is, that the themes are not cached in browser?!?

I am a little bis disappointed about that.

To fix the ugly ui glitch if rendering is started before themes are loaded you can use

data-sap-ui-xx-waitForTheme="true"

but this kills all benefits of async loading!

In NEO, the libs has been loaded in 100ms and also cached.

By the way, do you have a solution of controlling /resources of index.html used sapui5 library?

In neo, they used a route with a service, but i thing this service is currently not available.
I am also thinking about using a destination for this, but be scared about performance.

I will not use akamai (ui5.sap.com) directly, to be able to switch ui5 version and theme from outside without the need to redeploy the used html5 app.

In case of ux issues, we just have to rebuild theme for new target and change the used destination/proxy path.

Best Regards

Holger