fix(framework): support older OpenUI5 getThemeRoot API (#7202)

Theming.getThemeRoot is recently added OpenUI5 API, but not released yet (available on nightly snapshot). To support currently released OpenUI5 versions we need to use the older API "Configuration#getThemeRoot". - Fetch Theming only for OpenUi5 versions since 1.116.0 and onward - For OpenUi5 versions prior to 1.116.0 use Configuration#getThemeRoot API - For the version processing, use the global util "sap/base/util/Version" Fixes: #7199
SAP · Jun 15, 2023 · 4aae2db · 4aae2db
1 parent 3c06b86
commit 4aae2db
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 7 deletions.
diff --git a/packages/base/src/features/OpenUI5Support.ts b/packages/base/src/features/OpenUI5Support.ts
@@ -19,6 +19,7 @@ type OpenUI5CoreConfiguration = {
 	getAnimationMode: () => string,
 	getLanguage: () => string,
 	getTheme: () => string,
+	getThemeRoot: () => string,
 	getRTL: () => string,
 	getTimezone: () => string,
 	getCalendarType: () => string,
@@ -41,6 +42,10 @@ type Locale = {
 	_get: () => CLDRData,
 };
 
+type VersionUtil = (version: string) => {
+	compareTo: (version: string) => number,
+};
+
 const getCore = () => {
 	return window.sap?.ui?.getCore?.() as OpenUI5Core;
 };
@@ -57,10 +62,19 @@ class OpenUI5Support {
 		}
 
 		return new Promise<void>(resolve => {
-			core.attachInit(() => {
-				window.sap.ui.require(["sap/ui/core/Popup", "sap/ui/core/LocaleData", "sap/ui/core/Theming"], (Popup: OpenUI5Popup) => {
-					Popup.setInitialZIndex(getCurrentZIndex());
-					resolve();
+			const deps: Array<string> = ["sap/ui/core/Popup", "sap/ui/core/LocaleData"];
+			const version: string = window.sap.ui.version || "";
+
+			window.sap.ui.require(["sap/base/util/Version"], (VersionUtil: VersionUtil) => {
+				if (VersionUtil(version).compareTo("1.116.0") >= 0) { // for versions since 1.116.0 and onward, use the Theming module
+					deps.push("sap/ui/core/Theming");
+				}
+
+				core.attachInit(() => {
+					window.sap.ui.require(deps, (Popup: OpenUI5Popup) => {
+						Popup.setInitialZIndex(getCurrentZIndex());
+						resolve();
+					});
 				});
 			});
 		});
@@ -80,7 +94,7 @@ class OpenUI5Support {
 			animationMode: config.getAnimationMode(),
 			language: config.getLanguage(),
 			theme: config.getTheme(),
-			themeRoot: Theming.getThemeRoot(),
+			themeRoot: config.getThemeRoot ? config.getThemeRoot() : Theming.getThemeRoot(), // Theming is the newer API, but not released yet (available on nightly snapshot). Remove "config.getThemeRoot" after Theming is released.
 			rtl: config.getRTL(),
 			timezone: config.getTimezone(),
 			calendarType: config.getCalendarType(),

diff --git a/packages/main/test/pages/OpenUI5.html b/packages/main/test/pages/OpenUI5.html
@@ -4,10 +4,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta charset="utf-8">
 
-    <title>OpenUI5 + UI5 Web Components</title>
+    <title>OpenUI5 Latest Stable + UI5 Web Components</title>
 
     <script id='sap-ui-bootstrap'
-            src='https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js'
+            src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
             data-sap-ui-theme='sap_belize_hcb'
             data-sap-ui-libs='sap.m, sap.ui.core'
             data-sap-ui-preload="async"

diff --git a/packages/main/test/pages/OpenUI5Nightly.html b/packages/main/test/pages/OpenUI5Nightly.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta charset="utf-8">
+
+    <title>OpenUI5 Nightly + UI5 Web Components</title>
+
+    <script id='sap-ui-bootstrap'
+            src='https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js'
+            data-sap-ui-theme='sap_belize_hcb'
+            data-sap-ui-libs='sap.m, sap.ui.core'
+            data-sap-ui-preload="async"
+    ></script>
+
+    <script>
+        sap.ui.getCore().attachInit(function() {
+			const dialog = new sap.m.Dialog({
+                content: [
+                    new sap.ui.core.HTML({
+                        content: '<ui5-date-picker id="myDatepicker" value="Aug 14, 2018" data-sap-ui-integration-popup-content></ui5-date-picker>'
+                    }),
+                ]
+            });
+
+            const dialog2 = new sap.m.Dialog({
+                content: [
+                    new sap.ui.core.HTML({
+                        content: '<ui5-calendar id="myCalendar" value="Aug 14, 2018"></ui5-calendar>'
+                    }),
+                ]
+            });
+
+			const btn = new sap.m.Button({
+				text: "DialogWithDatePicker",
+				press: function() {
+					dialog.open();
+				},
+			});
+
+			const btn2 = new sap.m.Button({
+				text: "DialogWithCalendar",
+				press: function() {
+					dialog2.open();
+				},
+			});
+
+            const page = new sap.m.Page({
+                content: [
+                    dialog, dialog2, btn, btn2
+                ],
+            });
+
+			page.placeAt('content');
+        });
+    </script>
+
+    <script data-ui5-config type="application/json">
+        {
+            "language": "de",
+            "noConflict": {
+                "events": ["click"]
+            },
+            "compactSize": true,
+            "calendarType": "Islamic"
+        }
+    </script>
+
+    <script src="../../bundle.esm.js" type="module"></script>
+
+	<link rel="stylesheet" type="text/css" href="./styles/OpenUI5.css">
+</head>
+
+<body class="openui51auto">
+
+	<ui5-button icon="download">Web Component</ui5-button>
+	<ui5-datepicker></ui5-datepicker>
+
+	<div id='content'></div>
+</body>
+</html>