[Bug]: attachChangeBeforeCreate -> oEvent.preventDefault() not working as expected in the Extension Controller

jaydeepgirigoswami commented 7 months ago

OData Version

OData V2

Draft

Yes

Scenario

Freestyle

Environment

BAS

UI5 Spreadsheet Component

1.120.4

What happened?

Hello Marian,

I have used Spreadsheet uploader to upload Excel file in my Fiori Freestyle application.

While Uploading i check duplicates in the method attachCheckBeforeRead and provide error message which is working fine.

But when user clicks on Continue ayway and tries to upload the data by clicking on Upload button, i want to add a check on the upload button and provide the error there as well.

So i checked the event -> attachChangeBeforeCreate -> but i was not able to add message or prevent the data from being upload using oEvent.preventDefault().

Could you let me know what way i can add message and prevent user from uploading the data in database?

Relevant log output

Data is saved in draft once user clicks on Upload button.
Instead we want it to prevent from upload if duplicate records are available.

Spreadsheet Component Init

sap.ui.define([], function () {
    "use strict";
    return {
        onExcelUpload: async function (oEvent) {
            let flag_clear = false;
            this._view.setBusyIndicatorDelay(0)
            this._view.setBusy(true)
            this.spreadsheetUpload = await this._view.getController().getAppComponent().createComponent({
                usage: "spreadsheetImporter",
                async: true,
                componentData: {
                    context: this,
                    mandatoryFields: ["Material_No"],
                    activateDraft: true,
                    hidePreview: true
                }
            });

            this.spreadsheetUpload.attachCheckBeforeRead(function (oEvent) {
                let errorArray = [];
                const PreviousData = oEvent.getSource().spreadsheetUpload.binding.aPreviousData;
                const sheetdata = oEvent.getParameter("sheetData");
                for (const [index, row] of sheetdata.entries()) {
                    // Check for invalid price
                    for (const key_sheet in row) {

                        let flag = true;

                        if (key_sheet.endsWith("[Material_No]")) {

                            for (const [index_p, row_p] of PreviousData.entries()) {
                                for (const key_p in row_p) {
                                    let result_p = row_p.includes(row[key_sheet].rawValue);
                                    if (result_p == true && flag == true) {
                                        flag = false;
                                        flag_clear = true;
                                        const error = {
                                            title: "Duplicate Data, Please Delete the Duplicate data before Uploading or else Data would be saved in Draft",
                                            row: index + 1,
                                            group: true,
                                            rawValue: row[key_sheet].rawValue,
                                            ui5type: "Error"
                                        };
                                        errorArray.push(error);
                                    }
                                }
                            }

                        }

                    }
                }
                oEvent.getSource().addArrayToMessages(errorArray);
            }, this);

            this.spreadsheetUpload.attachChangeBeforeCreate(function (oEvent) {
                let payload = oEvent.getParameter("payload");
                payload.Characteristics_1 = payload.Characteristics_1.toUpperCase();
                payload.Characteristics_2 = payload.Characteristics_2.toUpperCase();
                payload.Characteristics_3 = payload.Characteristics_3.toUpperCase();
                payload.Characteristics_4 = payload.Characteristics_4.toUpperCase();
                payload.Characteristics_5 = payload.Characteristics_5.toUpperCase();
                payload.Characteristics_6 = payload.Characteristics_6.toUpperCase();
                payload.Characteristics_7 = payload.Characteristics_7.toUpperCase();
                payload.Characteristics_8 = payload.Characteristics_8.toUpperCase();
                payload.Characteristics_9 = payload.Characteristics_9.toUpperCase();
                payload.Characteristics_10 = payload.Characteristics_10.toUpperCase();
                payload.Characteristics_11 = payload.Characteristics_11.toUpperCase();
                payload.Characteristics_12 = payload.Characteristics_12.toUpperCase();
                payload.Characteristics_13 = payload.Characteristics_13.toUpperCase();
                payload.Characteristics_14 = payload.Characteristics_14.toUpperCase();
                payload.Characteristics_15 = payload.Characteristics_15.toUpperCase();
                payload.Characteristics_16 = payload.Characteristics_16.toUpperCase();
                payload.Characteristics_17 = payload.Characteristics_17.toUpperCase();
                payload.Characteristics_18 = payload.Characteristics_18.toUpperCase();
                payload.Characteristics_19 = payload.Characteristics_19.toUpperCase();
                payload.Characteristics_20 = payload.Characteristics_20.toUpperCase();
                oEvent.getSource().setPayload(payload);
            }, this);

            this.spreadsheetUpload.attachChangeBeforeCreate(function (oEvent) {
                // Prevent data from being sent to the backend
                oEvent.preventDefault();
                // Get payload
                const payload = oEvent.getParameter("payload");
            }, this);

            this.spreadsheetUpload.openSpreadsheetUploadDialog();
            this._view.setBusy(false)

        }
    };
});

Manifest

{
    "_version": "1.59.0",
    "sap.app": {
        "id": "my.cpqui",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "embeds": [
            "thirdparty/customControl/spreadsheetImporter/v0_31_1"
        ],
        "applicationVersion": {
            "version": "0.0.1"
        },
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "resources": "resources.json",
        "sourceTemplate": {
            "id": "@sap/generator-fiori:lrop",
            "version": "1.12.1",
            "toolsId": "5629affd-9ae7-401b-a4c4-2483df5dc69a"
        },
        "dataSources": {
            "mainService": {
                "uri": "/odata/v4/catalog/",
                "type": "OData",
                "settings": {
                    "annotations": [],
                    "localUri": "localService/metadata.xml",
                    "odataVersion": "4.0"
                }
            }
        }
    },
    "sap.ui": {
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        }
    },
    "sap.ui5": {
        "flexEnabled": true,
        "dependencies": {
            "minUI5Version": "1.120.4",
            "libs": {
                "sap.m": {},
                "sap.ui.core": {},
                "sap.ushell": {},
                "sap.fe.templates": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "my.cpqui.i18n.i18n"
                }
            },
            "": {
                "dataSource": "mainService",
                "preload": true,
                "settings": {
                    "synchronizationMode": "None",
                    "operationMode": "Server",
                    "autoExpandSelect": true,
                    "earlyRequests": true
                }
            },
            "@i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "uri": "i18n/i18n.properties"
            }
        },
        "resources": {
            "css": []
        },
        "resourceRoots": {
            "cc.spreadsheetimporter.v0_31_1": "./thirdparty/customControl/spreadsheetImporter/v0_31_1"
        },
        "componentUsages": {
            "spreadsheetImporter": {
                "name": "cc.spreadsheetimporter.v0_31_1"
            }
        },
        "routing": {
            "routes": [
                {
                    "pattern": ":?query:",
                    "name": "PlanningCharList",
                    "target": "PlanningCharList"
                },
                {
                    "pattern": "PlanningChar({key}):?query:",
                    "name": "PlanningCharObjectPage",
                    "target": "PlanningCharObjectPage"
                }
            ],
            "targets": {
                "PlanningCharList": {
                    "type": "Component",
                    "id": "PlanningCharList",
                    "name": "sap.fe.templates.ListReport",
                    "options": {
                        "settings": {
                            "contextPath": "/PlanningChar",
                            "variantManagement": "Page",
                            "navigation": {
                                "PlanningChar": {
                                    "detail": {
                                        "route": "PlanningCharObjectPage"
                                    }
                                }
                            },
                            "controlConfiguration": {
                                "@com.sap.vocabularies.UI.v1.LineItem": {
                                    "actions": {
                                        "listPageExtController": {
                                            "press": "my.cpqui.ext.listPageExtController.listPageExtController.onExcelUpload",
                                            "visible": true,
                                            "enabled": true,
                                            "requiresSelection": false,
                                            "text": "Spreadsheet Upload"
                                        }
                                    }
                                }
                            }
                        }
                    }
                },
                "PlanningCharObjectPage": {
                    "type": "Component",
                    "id": "PlanningCharObjectPage",
                    "name": "sap.fe.templates.ObjectPage",
                    "options": {
                        "settings": {
                            "editableHeaderContent": false,
                            "contextPath": "/PlanningChar"
                        }
                    }
                }
            }
        }
    },
    "sap.fiori": {
        "registrationIds": [],
        "archeType": "transactional"
    },
    "sap.cloud": {
        "public": true,
        "service": "com.sap.oneplanning"
    }
}

marianfoo commented 7 months ago

Hi, The documentation was wrong. the prevent default is only available for press upload button. This was fixed yesterday https://docs.spreadsheet-importer.com/pages/Events/#event-when-the-upload-button-is-pressed https://docs.spreadsheet-importer.com/pages/CHANGELOGSPREADSHEETIMPORTER/#0313-2024-01-30 Please use this event and the latest version 0.31.4

marianfoo commented 7 months ago

Hi @jaydeepgirigoswami can you confirm that the new version fixed it for you?

jaydeepgirigoswami commented 7 months ago

Hello Marian,

Yes, the new version fix worked, The data is being Prevented from inserting into Database. Thanks for the update.

Quick question: I had a internal meeting with my Team regarding the BTP development, there was a question from the security team asking:

If the Library ( npm install ui5-cc-spreadsheetimporter ) which is being used is Secured ?
And how do we confirm that it is a secured library?

marianfoo commented 7 months ago

Hi @jaydeepgirigoswami , what do you mean with secure? In what context?

The good thing about being Open Source is that you can check yourself and look at the whole code.
The only external library is use is SheetJS. Everything else is UI5 APIs. In my opinion this component makes your system more secure because you´re not sending files to your backend system but do everything only on the frontend and send only data to the backend.

spreadsheetimporter / ui5-cc-spreadsheetimporter