fix: remove spreadsheet button from list report template (#322)

* chore: remove spreadsheet button from header * fix: change list report to table * chore: update docs * test: fix ids * test: fix opa5 test * test: fix
spreadsheetimporter · Jul 21, 2023 · 85aa4c1 · 85aa4c1
1 parent 8e581ac
commit 85aa4c1
Show file tree

Hide file tree

Showing 14 changed files with 88 additions and 164 deletions.
diff --git a/docs/pages/GettingStarted.md b/docs/pages/GettingStarted.md
@@ -101,35 +101,41 @@ If you have done that, you can continue with the implementation of your Custom C
 ### Extension in manifest.json
 
 As a example, here is how your custom action can look like.  
-This example is from the [sample app](https://github.com/marianfoo/ui5-cc-spreadsheetimporter/blob/main/examples/packages/ordersv4fe/webapp/manifest.json) for the object page and will add the button to the object page header.  
-You can also add the button on the object page table directly. A example is also in this manifest.
+This example is from the [sample app](https://github.com/marianfoo/ui5-cc-spreadsheetimporter/blob/main/examples/packages/ordersv4fe/webapp/manifest.json) for the object page and will add the button to the object pages order items table.  
 It is important to always specify the relevant option [`tableId`](Configuration.md#tableid  ) if there are multiple tables on the object page.  
 Using `"enabled": "{ui>/isEditable}"` will automatically disable the button if the object page is not in edit mode.
 
 ````json
 "OrdersObjectPage": {
-    "type": "Component",
-    "id": "OrdersObjectPage",
-    "name": "sap.fe.templates.ObjectPage",
-    "options": {
-        "settings": {
-            "editableHeaderContent": false,
-            "entitySet": "Orders",
-            "content": {
-                "header": {
-                    "actions": {
-                        "spreadsheetImporter": {
-                            "id": "spreadsheetUploadButton",
-                            "text": "Spreadsheet Upload",
-                            "enabled": "{ui>/isEditable}",
-                            "press": "ui.v4.orders.ext.ObjectPageExtController.openSpreadsheetUploadDialog",
-                            "requiresSelection": false
-                        }
-                    }
-                }
+  "type": "Component",
+  "id": "OrdersObjectPage",
+  "name": "sap.fe.templates.ObjectPage",
+  "options": {
+    "settings": {
+      "editableHeaderContent": false,
+      "entitySet": "Orders",
+      "navigation": {
+        "Items": {
+          "detail": {
+            "route": "Orders_ItemsObjectPage"
+          }
+        }
+      },
+      "controlConfiguration": {
+        "Items/@com.sap.vocabularies.UI.v1.LineItem": {
+          "actions": {
+            "ObjectPageExtController": {
+              "press": "ui.v4.ordersv4fe.ext.ObjectPageExtController.openSpreadsheetUploadDialogTable",
+              "visible": true,
+              "requiresSelection": false,
+              "enabled": "{ui>/isEditable}",
+              "text": "Spreadsheet Upload"
             }
+          }
         }
+      }
     }
+  }
 },
 ````
 
@@ -167,7 +173,7 @@ see also this at the live demo https://livedemo.spreadsheet-importer.com/
 ### Extension in manifest.json
 
 As a example, here is how your custom action can look like.  
-This example is from the [sample app](https://github.com/marianfoo/ui5-cc-spreadsheetimporter/blob/47d22cdc42aa1cacfd797bdc0e025b830330dc5e/examples/packages/ordersv2fe/webapp/manifest.json#L115-L135) for the object page.
+This example is from the [sample app](https://github.com/marianfoo/ui5-cc-spreadsheetimporter/blob/main/examples/packages/ordersv2fe/webapp/manifest.json) for the object page.
 
 ````json
 "extends": {
@@ -177,8 +183,10 @@ This example is from the [sample app](https://github.com/marianfoo/ui5-cc-spread
                 "controllerName": "ui.v2.ordersv2.ext.controller.ObjectPageExt",
                 "sap.ui.generic.app": {
                     "Orders": {
-                        "EntitySet": "Orders",
-                        "Header": {
+                    "EntitySet": "Orders",
+                    "Sections": {
+                        "Items::com.sap.vocabularies.UI.v1.LineItem": {
+                            "id": "Items::com.sap.vocabularies.UI.v1.LineItem",
                             "Actions": {
                                 "spreadsheetImporter": {
                                     "id": "spreadsheetUploadButton",
@@ -190,6 +198,7 @@ This example is from the [sample app](https://github.com/marianfoo/ui5-cc-spread
                             }
                         }
                     }
+                },
                 }
             }
         }

diff --git a/examples/packages/ordersv2fe/webapp/manifest.json b/examples/packages/ordersv2fe/webapp/manifest.json
@@ -117,14 +117,17 @@
             "sap.ui.generic.app": {
               "Orders": {
                 "EntitySet": "Orders",
-                "Header": {
-                  "Actions": {
-                    "spreadsheetImporter": {
-                      "id": "spreadsheetUploadButton",
-                      "text": "Spreadsheet Upload",
-                      "applicablePath": "ui>/editable",
-                      "press": "openSpreadsheetUploadDialog",
-                      "requiresSelection": false
+                "Sections": {
+                  "Items::com.sap.vocabularies.UI.v1.LineItem": {
+                    "id": "Items::com.sap.vocabularies.UI.v1.LineItem",
+                    "Actions": {
+                      "spreadsheetImporter": {
+                        "id": "spreadsheetUploadButton",
+                        "text": "Spreadsheet Upload",
+                        "applicablePath": "ui>/editable",
+                        "press": "openSpreadsheetUploadDialog",
+                        "requiresSelection": false
+                      }
                     }
                   }
                 }
@@ -151,17 +154,11 @@
               "Orders": {
                 "EntitySet": "Orders",
                 "Actions": {
-                  "spreadsheetImporter": {
-                    "id": "spreadsheetUploadButton",
+                  "spreadsheetUploadButton": {
+                    "id": "spreadsheetUploadButtonButton",
                     "text": "Spreadsheet Upload",
                     "press": "openSpreadsheetUpload",
-                    "global": true
-                  },
-                  "submit": {
-                    "id": "submitButton",
-                    "text": "submit",
-                    "press": "submit",
-                    "global": true
+                    "requiresSelection": false
                   }
                 }
               }

diff --git a/examples/packages/ordersv2fenondraft/webapp/manifest.json b/examples/packages/ordersv2fenondraft/webapp/manifest.json
@@ -117,14 +117,17 @@
             "sap.ui.generic.app": {
               "OrdersND": {
                 "EntitySet": "OrdersND",
-                "Header": {
-                  "Actions": {
-                    "spreadsheetImporter": {
-                      "id": "spreadsheetUploadButton",
-                      "text": "Spreadsheet Upload",
-                      "press": "openSpreadsheetUploadDialog",
-                      "applicablePath": "ui>/editable",
-                      "requiresSelection": false
+                "Sections": {
+                  "Items::com.sap.vocabularies.UI.v1.LineItem": {
+                    "id": "Items::com.sap.vocabularies.UI.v1.LineItem",
+                    "Actions": {
+                      "spreadsheetImporter": {
+                        "id": "spreadsheetUploadButton",
+                        "text": "Spreadsheet Upload",
+                        "applicablePath": "ui>/editable",
+                        "press": "openSpreadsheetUploadDialog",
+                        "requiresSelection": false
+                      }
                     }
                   }
                 }
@@ -141,7 +144,7 @@
                     "id": "spreadsheetUploadButtonListReport",
                     "text": "Spreadsheet Upload",
                     "press": "openSpreadsheetUpload",
-                    "global": true
+                    "requiresSelection": false
                   }
                 }
               }

diff --git a/examples/packages/ordersv4fe/webapp/ext/ObjectPageExtController.js b/examples/packages/ordersv4fe/webapp/ext/ObjectPageExtController.js
@@ -5,7 +5,7 @@ sap.ui.define([], function () {
 		 * Create Dialog to Upload Spreadsheet and open it
 		 * @param {*} oEvent
 		 */
-		openSpreadsheetUploadDialog: async function (oEvent) {
+		openSpreadsheetUploadDialogTable: async function (oEvent) {
 			this.editFlow.getView().setBusyIndicatorDelay(0);
 			this.editFlow.getView().setBusy(true);
 			// prettier-ignore
@@ -74,27 +74,6 @@ sap.ui.define([], function () {
 			this.spreadsheetUpload.openSpreadsheetUploadDialog();
 			this.editFlow.getView().setBusy(false);
 		},
-		openSpreadsheetUploadDialogTable: async function (oEvent) {
-			this.editFlow.getView().setBusyIndicatorDelay(0);
-			this.editFlow.getView().setBusy(true);
-			// prettier-ignore
-			this.spreadsheetUploadTable = await this.editFlow.getView()
-					.getController()
-					.getAppComponent()
-					.createComponent({
-						usage: "spreadsheetImporter",
-						async: true,
-						componentData: {
-							context: this,
-							columns: ["product_ID", "quantity", "title", "price", "validFrom", "timestamp", "date", "time", "boolean", "decimal"],
-							mandatoryFields: ["product_ID", "quantity"],
-							spreadsheetFileName: "Test.xlsx",
-							tableId: "ui.v4.ordersv4fe::OrdersObjectPage--fe::table::Items::LineItem-innerTable"
-						}
-					});
-			this.spreadsheetUploadTable.openSpreadsheetUploadDialog();
-			this.editFlow.getView().setBusy(false);
-		},
 		openSpreadsheetUploadDialogTableShipping: async function (oEvent) {
 			this.editFlow.getView().setBusyIndicatorDelay(0);
 			this.editFlow.getView().setBusy(true);

diff --git a/examples/packages/ordersv4fe/webapp/manifest.json b/examples/packages/ordersv4fe/webapp/manifest.json
@@ -141,12 +141,6 @@
               "content": {
                 "header": {
                   "actions": {
-                    "spreadsheetUploadListReport": {
-                      "id": "spreadsheetUploadListReportButton",
-                      "text": "Spreadsheet Upload",
-                      "press": "ui.v4.ordersv4fe.ext.ListReportExtController.openSpreadsheetUploadDialog",
-                      "requiresSelection": false
-                    },
                     "openDocs": {
                       "id": "spreadsheetUploadListReportButton",
                       "text": "Open Documentation",
@@ -185,19 +179,6 @@
             "settings": {
               "editableHeaderContent": false,
               "entitySet": "Orders",
-              "content": {
-                "header": {
-                  "actions": {
-                    "spreadsheetImporter": {
-                      "id": "spreadsheetUploadButton",
-                      "text": "Spreadsheet Upload",
-                      "enabled": "{ui>/isEditable}",
-                      "press": "ui.v4.ordersv4fe.ext.ObjectPageExtController.openSpreadsheetUploadDialog",
-                      "requiresSelection": false
-                    }
-                  }
-                }
-              },
               "navigation": {
                 "Items": {
                   "detail": {

diff --git a/examples/packages/ordersv4fe/webapp/test/integration/FirstJourney.js b/examples/packages/ordersv4fe/webapp/test/integration/FirstJourney.js
@@ -26,7 +26,7 @@ sap.ui.require(
 				errorMessage: "Can not select 'sap.m.Button'"
 			});
 			Then.waitFor({
-				id: "ui.v4.ordersv4fe::OrdersList--fe::CustomAction::spreadsheetUploadListReport",
+				id: "ui.v4.ordersv4fe::OrdersList--fe::table::Orders::LineItem::CustomAction::test",
 				controlType: "sap.m.Button",
 				visible: true,
 				actions: new Press(),

diff --git a/examples/packages/ordersv4fets/webapp/ext/ObjectPageExtController.ts b/examples/packages/ordersv4fets/webapp/ext/ObjectPageExtController.ts
@@ -7,7 +7,7 @@ import ExtensionAPI from "sap/fe/core/ExtensionAPI";
  * @param this reference to the 'this' that the event handler is bound to.
  * @param pageContext the context of the page on which the event was fired
  */
-export async function openSpreadsheetUploadDialog(this: ExtensionAPI) {
+export async function openSpreadsheetUploadDialogTable(this: ExtensionAPI) {
 	const view = this.getRouting().getView();
 	const controller = view.getController() as BaseController;
 	view.setBusyIndicatorDelay(0);

diff --git a/examples/packages/ordersv4fets/webapp/manifest.json b/examples/packages/ordersv4fets/webapp/manifest.json
@@ -161,25 +161,25 @@
             "settings": {
               "editableHeaderContent": false,
               "entitySet": "Orders",
-              "content": {
-                "header": {
-                  "actions": {
-                    "spreadsheetImporter": {
-                      "id": "spreadsheetUploadButton",
-                      "text": "Spreadsheet Upload",
-                      "enabled": "{ui>/isEditable}",
-                      "press": "ui.v4.ordersv4fe.ext.ObjectPageExtController.openSpreadsheetUploadDialog",
-                      "requiresSelection": false
-                    }
-                  }
-                }
-              },
               "navigation": {
                 "Items": {
                   "detail": {
                     "route": "Orders_ItemsObjectPage"
                   }
                 }
+              },
+              "controlConfiguration": {
+                "Items/@com.sap.vocabularies.UI.v1.LineItem": {
+                  "actions": {
+                    "ObjectPageExtController": {
+                      "press": "ui.v4.ordersv4fe.ext.ObjectPageExtController.openSpreadsheetUploadDialogTable",
+                      "visible": true,
+                      "requiresSelection": false,
+                      "enabled": "{ui>/isEditable}",
+                      "text": "Spreadsheet Upload"
+                    }
+                  }
+                }
               }
             }
           }
@@ -210,10 +210,10 @@
                   }
                 }
               },
-              "content": {
-                "header": {
+              "controlConfiguration": {
+                "@com.sap.vocabularies.UI.v1.LineItem": {
                   "actions": {
-                    "spreadsheetUploadListReport": {
+                    "test": {
                       "id": "spreadsheetUploadListReportButton",
                       "text": "Spreadsheet Upload",
                       "press": "ui.v4.ordersv4fe.ext.ListReportExtController.openSpreadsheetUploadDialog",

diff --git a/examples/packages/server/app/ordersv4fecds/webapp/ext/ObjectPageExtController.js b/examples/packages/server/app/ordersv4fecds/webapp/ext/ObjectPageExtController.js
@@ -5,7 +5,7 @@ sap.ui.define([], function () {
 		 * Create Dialog to Upload Spreadsheet and open it
 		 * @param {*} oEvent
 		 */
-		openSpreadsheetUploadDialog: async function (oEvent) {
+		openSpreadsheetUploadDialogTable: async function (oEvent) {
 			this.editFlow.getView().setBusyIndicatorDelay(0);
 			this.editFlow.getView().setBusy(true);
 			this.spreadsheetUpload = await this.editFlow
@@ -60,27 +60,6 @@ sap.ui.define([], function () {
 			this.spreadsheetUpload.openSpreadsheetUploadDialog();
 			this.editFlow.getView().setBusy(false);
 		},
-		openSpreadsheetUploadDialogTable: async function (oEvent) {
-			this.editFlow.getView().setBusyIndicatorDelay(0);
-			this.editFlow.getView().setBusy(true);
-			this.spreadsheetUploadTable = await this.editFlow
-				.getView()
-				.getController()
-				.getAppComponent()
-				.createComponent({
-					usage: "spreadsheetImporter",
-					async: true,
-					componentData: {
-						context: this,
-						columns: ["product_ID", "quantity", "title", "price", "validFrom", "timestamp", "date", "time", "boolean", "decimal"],
-						mandatoryFields: ["product_ID", "quantity"],
-						spreadsheetFileName: "Test.xlsx",
-						tableId: "ui.v4.ordersv4fe::OrdersObjectPage--fe::table::Items::LineItem-innerTable"
-					}
-				});
-			this.spreadsheetUploadTable.openSpreadsheetUploadDialog();
-			this.editFlow.getView().setBusy(false);
-		},
 		openSpreadsheetUploadDialogTableShipping: async function (oEvent) {
 			this.editFlow.getView().setBusyIndicatorDelay(0);
 			this.editFlow.getView().setBusy(true);

diff --git a/examples/packages/server/app/ordersv4fecds/webapp/manifest.json b/examples/packages/server/app/ordersv4fecds/webapp/manifest.json
@@ -138,30 +138,6 @@
                   }
                 }
               },
-              "content": {
-                "header": {
-                  "actions": {
-                    "spreadsheetUploadListReport": {
-                      "id": "spreadsheetUploadListReportButton",
-                      "text": "Spreadsheet Upload",
-                      "press": "ui.v4.ordersv4fe.ext.ListReportExtController.openSpreadsheetUploadDialog",
-                      "requiresSelection": false
-                    },
-                    "openDocs": {
-                      "id": "spreadsheetUploadListReportButton",
-                      "text": "Open Documentation",
-                      "press": "ui.v4.ordersv4fe.ext.ListReportExtController.openDocs",
-                      "requiresSelection": false
-                    },
-                    "openLanding": {
-                      "id": "spreadsheetUploadListReportButton",
-                      "text": "More Info about UI5 Spreadsheet Upload",
-                      "press": "ui.v4.ordersv4fe.ext.ListReportExtController.openLanding",
-                      "requiresSelection": false
-                    }
-                  }
-                }
-              },
               "controlConfiguration": {
                 "@com.sap.vocabularies.UI.v1.LineItem": {
                   "actions": {

diff --git a/examples/test/specs/Objects/FEV2.js b/examples/test/specs/Objects/FEV2.js
@@ -8,11 +8,11 @@ class FEV2 {
 		this.listReportId = this.rootId + "ListReport.view.ListReport::Orders--";
 		this.objectPageId = this.rootId + "ObjectPage.view.Details::Orders--";
 		this.listReportGoButton = this.listReportId + "listReportFilter-btnGo";
-		this.listReportSpreadsheetuploadButton = this.listReportId + "action::spreadsheetUploadButton";
+		this.listReportSpreadsheetuploadButton = this.listReportId + "spreadsheetUploadButtonButton";
 		this.listReportDynamicPageTitle = this.listReportId + "template:::ListReportPage:::DynamicPageTitle";
 		this.listReportTable = this.listReportId + "responsiveTable";
 		this.objectPageEditButton = this.objectPageId + "edit";
-		this.objectPageSpreadsheetuploadButton = this.objectPageId + "action::spreadsheetUploadButton";
+		this.objectPageSpreadsheetuploadButton = this.objectPageId + "spreadsheetUploadButton";
 		this.objectPageSaveButton = this.objectPageId + "activate";
 		this.objectPageOrderItems = this.objectPageId + "Items::com.sap.vocabularies.UI.v1.LineItem::responsiveTable";
 		this.listReportUploadFilename = "test/testFiles/ListReportOrdersNoErros.xlsx";