Typescript

Since the component is written in Typescript, we can also provide the generated types. The GitHub repository contains a sample Typescript application created with the Fiori Generator.
You can find the example app in the example folder.

Setup¶

Generate a app with the Fiori Tools Generator in Typescript or use the Easy UI5 TS Generator.

ts-config.json¶

You can consume the types from the @sapui5/ts-types-esm and the ui5-cc-spreadsheetimporter package.

    "types": [ "@sapui5/ts-types-esm", "ui5-cc-spreadsheetimporter" ],
    "typeRoots": ["./node_modules"]

manifest.json¶

Add the component usage and the resource roots to the manifest.json as described in the Getting Started Section.

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

Custom Action¶

This is a example how you could create the component and attach a event handler to the checkBeforeRead event with the types Component and Component$CheckBeforeReadEventParameters for the Event Parameters with a OData V4 Fiori Elements Application and UI5 Version 1.116.

import Component, { Component$ChangeBeforeCreateEvent, Component$CheckBeforeReadEvent, Component$UploadButtonPressEvent } from "cc/spreadsheetimporter/v0_29_0/Component";
import BaseController from "sap/fe/core/BaseController";
import ExtensionAPI from "sap/fe/core/ExtensionAPI";

export async function openSpreadsheetUploadDialog(this: ExtensionAPI) {
    const view = this.getRouting().getView();
    const controller = view.getController() as BaseController;
    view.setBusyIndicatorDelay(0);
    view.setBusy(true);
    const spreadsheetUpload = (await controller.getAppComponent().createComponent({
        usage: "spreadsheetImporter",
        async: true,
        componentData: {
            context: this,
            activateDraft: true
        }
    })) as Component;
    // event to check before uploaded to app
    spreadsheetUpload.attachCheckBeforeRead(function (event: Component$CheckBeforeReadEvent) {
        // example
        const sheetData = event.getParameter("sheetData") as any;
        event.getParameters().messages
        let errorArray = [];
        for (const [index, row] of sheetData.entries()) {
            //check for invalid price
            for (const key in row) {
                if (key.endsWith("[price]") && row[key].rawValue > 100) {
                    const error = {
                        title: "Price too high (max 100)",
                        row: index + 2,
                        group: true,
                        rawValue: row[key].rawValue,
                        ui5type: "Error"
                    };
                    errorArray.push(error);
                }
            }
        }
        (event.getSource() as Component).addArrayToMessages(errorArray);
    }, this);

    // event example to prevent uploading data to backend
    spreadsheetUpload.attachUploadButtonPress(function (event: Component$UploadButtonPressEvent) {
        //event.preventDefault();
        //event.getParameter("payload");
    }, this);

    // event to change data before send to backend
    spreadsheetUpload.attachChangeBeforeCreate(function (event: Component$ChangeBeforeCreateEvent) {
        let payload = event.getParameter("payload") as any;
        // round number from 12,56 to 12,6
        if (payload.price) {
            payload.price = Number(payload.price.toFixed(1));
        }
        (event.getSource() as Component).setPayload(payload);
    }, this);
    spreadsheetUpload.openSpreadsheetUploadDialog();
    view.setBusy(false);
}