Skip to content

Getting Started

Deployment Strategy

There are two ways to use the Spreadsheet Upload Control. Since a Reuse Component (library) is basically utilised, this results in two deployment strategies that can be used.

Decentralized deployment

The library is attached directly to each app and deployed with it.

Note

It is possible when you deploy the app you get the error:
SAPUI5 library/component cc.spreadsheetimporter.v0_29_0 used in application Z_********* not exists
Even though the fiori tools say the app is not deployed, it is deployed.

Central deployment

The Spreadsheet upload is stored directly as a library centrally, e.g. in the on-premise ABAP system.
For more information, please see the Page Central Deployment.

Setup

Here are the manual steps how to integrate the ui5-cc-spreadsheetimporter component. For a simplified integration, a yo generator is also available.

Requirements

  • Node.js Version v16.18.0, v18.12.0 or higher
  • npm Version v8.0.0 or higher
  • UI5 CLI v3.0.0 or higher

Setup Decentralized deployment

1. Install from npm

npm install ui5-cc-spreadsheetimporter

2. Add resourceRoots to you manifest.json under sap.ui5

⚠️ You must always keep your ui5-cc-spreadsheetimporter version up to date here when updating the module.

"resourceRoots": {
    "cc.spreadsheetimporter.v0_29_0": "./thirdparty/customControl/spreadsheetImporter/v0_29_0"
},

3. Add --all to your build script in the package.json

"scripts": {
// ...
"build": "ui5 build --config=ui5.yaml --all --clean-dest --dest dist",
// ...
},

4. Add componentUsages to you manifest.json under sap.ui5

⚠️ You must always keep your ui5-cc-spreadsheetimporter version up to date here when updating the module.

"componentUsages": {
    "spreadsheetImporter": {
        "name": "cc.spreadsheetimporter.v0_29_0"
    }
},

Setup Central deployment

1. Execute the deployment with the version you like to use, see here Central Deployment.

2. Add componentUsages to you manifest.json under sap.ui5

⚠️ You must always keep your ui5-cc-spreadsheetimporter version up to date here when updating the module.

"componentUsages": {
    "spreadsheetImporter": {
        "name": "cc.spreadsheetimporter.v0_29_0"
    }
},

There are different implementations for Fiori Elements depending on the OData Version

Starting with the Fiori Elements Application

To start the Spreadsheet Upload Dialog, you need in your Fiori Elements App a Button.
The best way is start with the Guided Development Extension to add a custom action:

Guided Development

If you have done that, you can continue with the implementation of your Custom Code either with V2 or V4.
You can also use a controller extension in Fiori Elements. A example can be found with the Fiori Elements V4 Example App.

Starting with Fiori Elements (OData V4)

Extension in manifest.json

As a example, here is how your custom action can look like.
This example is from the sample app 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 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.

"OrdersObjectPage": {
  "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"
            }
          }
        }
      }
    }
  }
},

Custom Code

This will set the busy indicator and create the component if it is not already created.
Then the Dialog will be opened.
The attribute context is mandatory and must be set so the component can access the context of the app, including binding paths and the model.
You can also pass the options (like context) to the method openSpreadsheetUploadDialog if you like pass the options on runtime. A use case would be that if you have multiple tables on the object page and you like to open the dialog for a specific table (see TableSelector)

openSpreadsheetUploadDialog: async function (oEvent) {
    this.getView().setBusyIndicatorDelay(0)
    this.getView().setBusy(true)
    this.spreadsheetUpload = await this.getView().getController().getAppComponent().createComponent({
        usage: "spreadsheetImporter",
        async: true,
        componentData: {
            context: this
        }
    });
    this.spreadsheetUpload.openSpreadsheetUploadDialog()
    this.getView().setBusy(false)
}

How could this look like

see also this at the live demo https://livedemo.spreadsheet-importer.com/

Object Page with Buttons

Starting with Fiori Elements (OData V2)

Extension in manifest.json

As a example, here is how your custom action can look like.
This example is from the sample app for the object page.

"extends": {
    "extensions": {
        "sap.ui.controllerExtensions": {
            "sap.suite.ui.generic.template.ObjectPage.view.Details": {
                "controllerName": "ui.v2.ordersv2.ext.controller.ObjectPageExt",
                "sap.ui.generic.app": {
                    "Orders": {
                    "EntitySet": "Orders",
                    "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
                                }
                            }
                        }
                    }
                },
                }
            }
        }
    }
}

Custom Code

openSpreadsheetUploadDialog: async function (oEvent) {
    this.getView().setBusyIndicatorDelay(0)
    this.getView().setBusy(true)
    this.spreadsheetUpload = await this.getView().getController().getOwnerComponent().createComponent({
        usage: "spreadsheetImporter",
        async: true,
        componentData: {
            context: this
        }
    });
    this.spreadsheetUpload.openSpreadsheetUploadDialog()
    this.getView().setBusy(false)
}

Deployment of your app

For deployment for your app, a few things should be considered:

1. Add --all to your build script in the package.json

"scripts": {
// ...
"build": "ui5 build --config=ui5.yaml --all --clean-dest --dest dist",
// ...
},

2. File unkown when deploying the app

It is possible that the ABAP system does not know how to handle ts files.
If you use the deploy-to-abap command, you can add the exclude option to your ui5.yaml file to exclude the files from the deployment:

  customTasks:
  - name: deploy-to-abap
    afterTask: replaceVersion
    configuration:
      target:
        url: https://XYZ.sap-system.corp:44311
        client: 200
        auth: basic
      credentials:
        username: env:XYZ_USER
        password: env:XYZ_PASSWORD
      app:
        name: /TEST/SAMPLE_APP
        package: /TEST/UPLOAD
        transport: XYZQ300582
      exclude:
      - .*\.ts
      - .*\.ts.map

3. Config if you use ui5-task-zipper

If you use the ui5-task-zipper task, the ui5-cc-spreadsheetimporter should be included in the zip file.

builder:
    customTasks:
        - name: ui5-task-zipper
          afterTask: generateComponentPreload
          configuration:
            archiveName: uimodule
            includeDependencies:
            - ui5-cc-spreadsheetimporter

4. Error: library/component used in application does not exist

When deploying the app to your ABAP system, you may get the error like this: SAPUI5 library/component cc.spreadsheetimporter.v0_29_0 used in application Z*** does not exist

The application is deployed, but the Service returns an error.
Currently there is no workaround.