fix: component-preload.js and componentUsages in examples apps

README.md

@@ -1,9 +1,12 @@
 # UI5 custom control `ui5-cc-excelupload`
 
-> :warning: **This control is still in beta**: It fundamently works, but the APIs are still changing and lot of bugs still be there!
+> :warning: **This control is still in beta**: Basic functionality is given, but bugs may still occur and APIs may change!
 
 A UI5 Module to integrate a Excel Upload for Fiori Element Apps.  
-The module focuses on making integration into existing Fiori element apps as easy as possible, with as little code and configuration as possible.
+This control simply enables the mass upload of data, independent of the backend, OData version and Fiori scenario.  
+This is made possible by reading the Excel file and using the standard APIs.  
+The control will submit not the file, but just the data from the Excel File.  
+The integration of the control is designed to be as simple as possible and, in the best case, requires no configuration.
 
 The aim is to support as many Fiori Scenarios and UI5 Versions as possibile.  
 See here for all currently [supported Versions](https://marianfoo.github.io/ui5-cc-excelUpload/pages/SupportVersions/).
@@ -53,7 +56,9 @@ A few examples:
 
 Run `pnpm install`.  
 For developing, you need to run `npm run build:watch` to have always the latest changes in the `dist` folder.  
-Run the test app (CAP and UI5 Apps) with `npm run start:sample`
+Run the test app (CAP Server and the V4 Fiori Element UI5 App) with `npm start`.  
+Look in the `package.json` for more start scripts.  
+To use other versions than 1.108, you need to copy the apps with `npm run copyTestApps`.
 
 #### Docs
 

dev/replace-string.js

@@ -14,5 +14,5 @@ const yamlPromise = util.replaceYamlFile(versionSlash);
 
 if (!develop) {
 	let ui5Apps = ["ordersv2fe", "ordersv2fenondraft", "ordersv2freestyle", "ordersv4fe", "ordersv4fpm"];
-	util.replaceVersionInExamples(versionSlash, ui5Apps);
+	util.replaceVersionInExamples(versionSlash, version, ui5Apps);
 }

dev/util.js

@@ -29,7 +29,7 @@ function replaceYamlFile(versionSlash) {
 		from: [/XXXnamespaceSlashXXX/g],
 		to: [versionSlash],
 	};
-	return replace(optionsYaml);
+	return replace.sync(optionsYaml);
 }
 
 function replaceWebappFolder(version, versionSlash) {
@@ -40,11 +40,11 @@ function replaceWebappFolder(version, versionSlash) {
 		from: [/XXXnamespaceXXX/g, /XXXnamespaceSlashXXX/g],
 		to: [version, versionSlash],
 	};
-	return replace(options);
+	return replace.sync(options);
 }
 
 // replace version in examples folder
-function replaceVersionInExamples(versionSlash, ui5Apps) {
+function replaceVersionInExamples(versionSlash, version, ui5Apps) {
 	let manifests = [];
 	ui5Apps.forEach((app) => {
 		let path = "examples/packages/" + app + "/webapp/manifest.json";
@@ -53,7 +53,16 @@ function replaceVersionInExamples(versionSlash, ui5Apps) {
 		// Parse the JSON content
 		let manifestData = JSON.parse(manifest);
 		// Replace with current version
-		manifestData["sap.ui5"].resourceRoots["cc.excelUpload"] = `./thirdparty/customControl/excelUpload/${versionSlash}`;
+		const resourceRoots = manifestData["sap.ui5"].resourceRoots;
+		const updatedResourceRoots = {};
+		Object.keys(resourceRoots)
+			.filter(key => !key.startsWith("cc.excelUpload"))
+			.forEach(key => {
+				updatedResourceRoots[key] = resourceRoots[key];
+			});
+		updatedResourceRoots[`cc.excelUpload.${version}`] = `./thirdparty/customControl/excelUpload/${versionSlash}`;
+		manifestData["sap.ui5"].resourceRoots = updatedResourceRoots
+		manifestData["sap.ui5"]["componentUsages"]["excelUpload"].name = `cc.excelUpload.${version}`;
 		// Stringify manifest data back to string
 		manifestData = JSON.stringify(manifestData, null, 2);
 		// Write back manifest file
@@ -102,31 +111,31 @@ function searchAndReplace(inputFile, search, replace) {
 	fs.writeFileSync(inputFile, result, "utf8");
 }
 
-function getTestappObject(scenario,version){
+function getTestappObject(scenario, version) {
 	const testApps = fs.readFileSync(path.resolve(__dirname, 'testapps.json'), 'UTF-8');
 	// const testApps = fs.readFileSync("./dev/testapps.json", "utf8");
 	let json_data = JSON.parse(testApps);
 	version = parseInt(version)
 
 	for (let index = 0; index < json_data.length; index++) {
 		const element = json_data[index];
-		if(element.rootAppName === scenario){
+		if (element.rootAppName === scenario) {
 			const rootObject = element;
-			if(rootObject.versionMinor === version){
+			if (rootObject.versionMinor === version) {
 				return rootObject;
 			} else {
 				const rootVersions = rootObject.copyVersions
 				for (let index = 0; index < rootVersions.length; index++) {
 					const subObject = rootVersions[index];
-					if(subObject.versionMinor === version){
+					if (subObject.versionMinor === version) {
 						return subObject;
 					}
 				}
 			}
 			break;
 		}
 	}
-	
+
 
 
 }

docs/index.md

@@ -1,11 +1,13 @@
 # UI5 Tooling
 
 !!! warning 
-        **This control is still in beta**: It fundamently works, but the APIs are still changing and lot of bugs still be there!
+        **This control is still in beta**: Basic functionality is given, but bugs may still occur and APIs may change!
 
 
-A UI5 Module to integrate a Excel Upload for Fiori Element Apps.  
-The module focuses on making integration into existing Fiori element apps as easy as possible, with as little code and configuration as possible.
+This control simply enables the mass upload of data, independent of the backend, OData version and Fiori scenario.  
+This is made possible by reading the Excel file and using the standard APIs.  
+The control will submit not the file, but just the data from the Excel File.  
+The integration of the control is designed to be as simple as possible and, in the best case, requires no configuration.
 
 [**Get Started**](./pages/GettingStarted.md){: .md-button .md-button--primary .sap-icon-initiative }
 

docs/pages/GettingStarted.md

@@ -24,17 +24,29 @@ npm install ui5-cc-excelupload
 }
 ````
 
-3\. Add `resourceRoots` to you `manifest.json`
+3\. Add `resourceRoots` to you `manifest.json` under `sap.ui5`
 
 ⚠️ You must always keep your ui5-cc-excelUpload version up to date here when updating the module.
 
 ````json
 "resourceRoots": {
-    "cc.excelUpload": "./thirdparty/customControl/excelUpload/v0/3/5"
+    "cc.excelUpload.v0.6.0": "./thirdparty/customControl/excelUpload/v0/6/0"
 },
 ````
 
-4\. Add `--all` to your build script in the package.json
+4\. Add `componentUsages` to you `manifest.json` under `sap.ui5`
+
+⚠️ You must always keep your ui5-cc-excelUpload version up to date here when updating the module.
+
+````json
+"componentUsages": {
+    "excelUpload": {
+        "name": "cc.excelUpload.v0.6.0"
+    }
+},
+````
+
+5\. Add `--all` to your build script in the package.json
 ````json
 "scripts": {
 // ...
@@ -97,9 +109,9 @@ openExcelUploadDialog: async function (oEvent) {
     this._view.setBusyIndicatorDelay(0)
     this._view.setBusy(true)
     if (!this.excelUpload) {
-        this.excelUpload = await sap.ui.getCore().createComponent({
-            name: "cc.excelUpload",
-            async: false,
+        this.excelUpload = await this._controller.getAppComponent().createComponent({
+            usage: "excelUpload",
+            async: true,
             componentData: {
                 context: this
             }
@@ -153,9 +165,9 @@ openExcelUploadDialog: async function (oEvent) {
     this.getView().setBusyIndicatorDelay(0)
     this.getView().setBusy(true)
     if (!this.excelUpload) {
-        this.excelUpload = await sap.ui.getCore().createComponent({
-            name: "cc.excelUpload",
-            async: false,
+        this.excelUpload = await this.getView().getController().getOwnerComponent().createComponent({
+            usage: "excelUpload",
+            async: true,
             componentData: {
                 context: this
             }

examples/packages/ordersv2fe/webapp/ext/controller/ListReportExt.controller.js

@@ -5,9 +5,9 @@ sap.ui.define([], function () {
 			this.getView().setBusyIndicatorDelay(0);
 			this.getView().setBusy(true);
 			if (!this.excelUpload) {
-				this.excelUpload = await sap.ui.getCore().createComponent({
-					name: "cc.excelUpload",
-					async: false,
+				this.excelUpload = await this.getView().getController().getOwnerComponent().createComponent({
+					usage: "excelUpload",
+					async: true,
 					componentData: {
 						context: this,
 						activateDraft: true

examples/packages/ordersv2fe/webapp/ext/controller/ObjectPageExt.controller.js

@@ -9,9 +9,9 @@ sap.ui.define(["sap/ui/core/mvc/Controller"], function (Controller) {
 			this.getView().setBusyIndicatorDelay(0);
 			// this.getView().setBusy(true)
 			if (!this.excelUpload) {
-				this.excelUpload = await sap.ui.getCore().createComponent({
-					name: "cc.excelUpload",
-					async: false,
+				this.excelUpload = await this.getView().getController().getOwnerComponent().createComponent({
+					usage: "excelUpload",
+					async: true,
 					componentData: {
 						context: this,
 						columns: ["product_ID", "quantity", "title", "price", "validFrom", "timestamp", "date", "time"],

examples/packages/ordersv2fe/webapp/manifest.json

@@ -97,8 +97,13 @@
     "resources": {
       "css": []
     },
+    "componentUsages": {
+      "excelUpload": {
+        "name": "cc.excelUpload.v0.6.0"
+      }
+    },
     "resourceRoots": {
-      "cc.excelUpload": "./thirdparty/customControl/excelUpload/v0/6/0"
+      "cc.excelUpload.v0.6.0": "./thirdparty/customControl/excelUpload/v0/6/0"
     },
     "routing": {
       "config": {},

examples/packages/ordersv2fenondraft/webapp/ext/controller/ListReportExt.controller.js

@@ -5,7 +5,7 @@ sap.ui.define([], function () {
 			this.getView().setBusyIndicatorDelay(0);
 			this.getView().setBusy(true);
 			if (!this.excelUpload) {
-				this.excelUpload = await sap.ui.getCore().createComponent({
+				this.excelUpload = await this.getController().getAppComponent().createComponent({
 					name: "cc.excelUpload",
 					async: false,
 					componentData: {

examples/packages/ordersv2fenondraft/webapp/ext/controller/ObjectPageExt.controller.js

@@ -5,7 +5,7 @@ sap.ui.define([], function () {
 			this.getView().setBusyIndicatorDelay(0);
 			// this.getView().setBusy(true)
 			if (!this.excelUpload) {
-				this.excelUpload = await sap.ui.getCore().createComponent({
+				this.excelUpload = await this.getController().getAppComponent().createComponent({
 					name: "cc.excelUpload",
 					async: false,
 					componentData: {

examples/packages/ordersv2fenondraft/webapp/manifest.json

@@ -97,8 +97,13 @@
     "resources": {
       "css": []
     },
+    "componentUsages": {
+      "excelUpload": {
+        "name": "cc.excelUpload.v0.6.0"
+      }
+    },
     "resourceRoots": {
-      "cc.excelUpload": "./thirdparty/customControl/excelUpload/v0/6/0"
+      "cc.excelUpload.v0.6.0": "./thirdparty/customControl/excelUpload/v0/6/0"
     },
     "routing": {
       "config": {},

examples/packages/ordersv2freestyle/webapp/controller/List.controller.js

@@ -62,7 +62,7 @@ sap.ui.define(
 				this.getView().setBusyIndicatorDelay(0);
 				this.getView().setBusy(true);
 				if (!this.excelUpload) {
-					this.excelUpload = await sap.ui.getCore().createComponent({
+					this.excelUpload = await this.getController().getAppComponent().createComponent({
 						name: "cc.excelUpload",
 						async: false,
 						componentData: {

examples/packages/ordersv2freestyle/webapp/manifest.json

@@ -78,8 +78,13 @@
     "resources": {
       "css": []
     },
+    "componentUsages": {
+      "excelUpload": {
+        "name": "cc.excelUpload.v0.6.0"
+      }
+    },
     "resourceRoots": {
-      "cc.excelUpload": "./thirdparty/customControl/excelUpload/v0/6/0"
+      "cc.excelUpload.v0.6.0": "./thirdparty/customControl/excelUpload/v0/6/0"
     },
     "routing": {
       "config": {

examples/packages/ordersv4fe/webapp/ext/ListReportExtController.js

@@ -9,9 +9,9 @@ sap.ui.define([], function () {
 			this._view.setBusyIndicatorDelay(0);
 			this._view.setBusy(true);
 			if (!this.excelUpload) {
-				this.excelUpload = await sap.ui.getCore().createComponent({
-					name: "cc.excelUpload",
-					async: false,
+				this.excelUpload = await this._controller.getAppComponent().createComponent({
+					usage: "excelUpload",
+					async: true,
 					componentData: {
 						context: this,
 						activateDraft: true

examples/packages/ordersv4fe/webapp/ext/ObjectPageExtController.js

@@ -9,9 +9,9 @@ sap.ui.define([], function () {
 			this._view.setBusyIndicatorDelay(0);
 			this._view.setBusy(true);
 			if (!this.excelUpload) {
-				this.excelUpload = await sap.ui.getCore().createComponent({
-					name: "cc.excelUpload",
-					async: false,
+				this.excelUpload = await this._controller.getAppComponent().createComponent({
+					usage: "excelUpload",
+					async: true,
 					componentData: {
 						context: this,
 						columns: ["product_ID", "quantity", "title", "price", "validFrom", "timestamp", "date", "time"],

examples/packages/ordersv4fe/webapp/manifest.json

@@ -92,8 +92,13 @@
     "resources": {
       "css": []
     },
+    "componentUsages": {
+      "excelUpload": {
+        "name": "cc.excelUpload.v0.6.0"
+      }
+    },
     "resourceRoots": {
-      "cc.excelUpload": "./thirdparty/customControl/excelUpload/v0/6/0"
+      "cc.excelUpload.v0.6.0": "./thirdparty/customControl/excelUpload/v0/6/0"
     },
     "routing": {
       "routes": [

examples/packages/ordersv4fpm/webapp/ext/main/Main.controller.js

@@ -6,7 +6,7 @@ sap.ui.define(["sap/fe/core/PageController"], function (PageController) {
 			this.getView().setBusyIndicatorDelay(0);
 			this.getView().setBusy(true);
 			if (!this.excelUpload) {
-				this.excelUpload = await sap.ui.getCore().createComponent({
+				this.excelUpload = await this.getController().getAppComponent().createComponent({
 					name: "cc.excelUpload",
 					async: false,
 					componentData: {

examples/packages/ordersv4fpm/webapp/manifest.json

@@ -92,8 +92,13 @@
     "resources": {
       "css": []
     },
+    "componentUsages": {
+      "excelUpload": {
+        "name": "cc.excelUpload.v0.6.0"
+      }
+    },
     "resourceRoots": {
-      "cc.excelUpload": "./thirdparty/customControl/excelUpload/v0/6/0"
+      "cc.excelUpload.v0.6.0": "./thirdparty/customControl/excelUpload/v0/6/0"
     },
     "routing": {
       "config": {},

package.json

@@ -44,7 +44,6 @@
     "build:dev": "ui5 build --config=ui5-build.yaml --all --clean-dest --dest dist  --exclude-task=replaceCopyright replaceVersion generateFlexChangesBundle generateVersionInfo minify escapeNonAsciiCharacters",
     "replaceString": "node ./dev/replace-string.js",
     "build:watch": "node ./dev/chokidar.js",
-    "setupExamplespnpm": "cd examples && pnpm install",
     "updateChromedriver": "cd examples && pnpm add chromedriver@latest --save-dev -w",
     "copyTestApps": "node ./dev/copy-example-apps.js create && pnpm i",
     "deleteTestApps": "node ./dev/copy-example-apps.js  delete"