[JAM][Workzone] Support custom theme in theming service

[TinaC]

Feature Request Description

In UI5 web component, when the user wants to use a custom theme in theming service, they need to download the zip file and find the css_varaible.css file, which is very inconvenient. https://sap.github.io/ui5-webcomponents/playground/customizing/theme/

Proposed Solution

In UI5, theming service location can be passed as a parameter(such as sap-ui-theme=custom-theme@https://my-theming-service-host), UI5 will handle css_varaible.css fetch for us. Can UI5 web component do the same? https://sapui5.hana.ondemand.com/#/topic/e9fc648661d84ed89360bbec3ae02611

Additional Context

In our product SAP Workzone, we already integrate with theming service, but when we pass custom theme to UI5 web component, it will fall back to sap_fiori_3

Priority

• [ ] Low
• [x] Medium
• [ ] High
• [ ] Very High

A clear and concise description of the impact/urgency of the required feature.

Stakeholder Info (if applicable)

• Organization: {SAP Workzone}
• Business impact: {User complains about theming fall back to sap_fiori_3 when using custom theme}

[ndeshev]

Hello @SAP/ui5-webcomponents-topic-core, could you please evaluate this feature request regarding the custom theming functionality

[ilhan007]

Hello @TinaC do you happen to have a working test page/snippix with SAPUI5/OpenUI5 with sap-ui-theme=custom-theme@https://my-theming-service-host set and working

[TinaC]

Hello @ilhan007, sorry, I just have our product test env which includes many logic we added, not suitable for testing. You can check here for UI Theme Designer introduction: https://help.sap.com/docs/SAP_NETWEAVER_750/ab06dedc873746eaba1c041200c068e0/a118094264684230bb6510045b5b5b7c.html?version=7.5.6&locale=en-US

[ilhan007]

Hello @TinaC I see, do you have at least a working theming service that returns data, so that I can test with?

[ilhan007]

Also @TinaC , are you using UI5 Web Components in mix with OpenUI5, because if this the case OpenUI5 will load the css vars and to make UI5 Web Components working - (1) they should not fallback to the default theme (this can be either via config or the framework can detect that theming service is used), and on more thing (2) we must know the base theme that the custom one is created upon to load specific internal variables related to sizes, paddings, other metrics which differ between sap_fiori_3 and sap_horizon for example. The (2) second part is what we are looking into, we will create our own service to get familiar what data it outputs and how it's structured.

[TinaC]

Hello @TinaC I see, do you have at least a working theming service that returns data, so that I can test with?

Sorry for the late reply, It needs an SAP BTP account, and you need to subscribe a theming service: https://help.sap.com/docs/SAP_BUILD/f05e8ade5f4c43bebcac344a72243fb4/f8b210e4f01a468ab578a224e2844b98.html?version=Cloud&locale=en-US

[TinaC]

Also @TinaC , are you using UI5 Web Components in mix with OpenUI5, because if this the case OpenUI5 will load the css vars and to make UI5 Web Components working - (1) they should not fallback to the default theme (this can be either via config or the framework can detect that theming service is used), and on more thing (2) we must know the base theme that the custom one is created upon to load specific internal variables related to sizes, paddings, other metrics which differ between sap_fiori_3 and sap_horizon for example. The (2) second part is what we are looking into, we will create our own service to get familiar what data it outputs and how it's structured.

(1) Yes, that's the case, actually we use SAP Card( Integrate with SAPUI5) in our app, but in some page, it might not have a SAP Card, but it have UI5 Web component, so in this case, we want UI5 web component to handle custom theme, or just like we requested in https://github.com/SAP/ui5-webcomponents/issues/5783 (that's my colleague), do not use a false fallback.

(2) Answered in https://github.com/SAP/ui5-webcomponents/issues/5783

[nnaydenow]

Hi @TinaC,

I've tested it locally and if I add data-sap-ui-xx-cssVariables="true" to bootstrap parameters of OpenUI5 / SAPUI5 seems to work. Could you please check if this works for you until we provide solution? With current implementation we are looking for these css variables, which are not loaded if parameters is not provided or it is provided with false value.

[ilhan007]

Resolved with: https://github.com/SAP/ui5-webcomponents/pull/5887