RAP - Fiori elements com Extend utilizando script XLSX.js para Upload arquivo excel

1 - MÉTODO MAIS TRABALHOSO - A SEGUNDO OPÇÃO É MAIS FÁCIL.

 A principio dá para usar quase tudo q está aqui, 

https://community.sap.com/t5/technology-blogs-by-members/excel-upload-using-rap-part-1/ba-p/13545399

mas para mim não funcionou 100%, foi necessário alguns ajustes.

- a parte do fiori guide development pode seguir igual

- pode criar o fragment

- pode atualizar o controller conforme está no blog

Agora a parte de alterar os arquivos 
- ui5.yaml 
- package.json

Não acho necessário.. 

depois do importe do arquivo utilizando o NPM INSTALL XLXS

copiar o arquivo xlxs.js  que fica criado dentro da pasta xlsx no node_modules

Criar uma pasta tipo "lib" ou "util" dentro da pasta do ext e colar os arquivos
- xlxs.js 

- jzip.js

No arquivo manifest.json incluir a biblioteca dentro de rescursos.

No Controller NÃO pode declarar o objeco XLSX pois dentro do arquivo xlsx.js esse objetos está global.

É possível q tenha erros de conversão na planilha então tem q fazer a conversão.

Conversão quando é campo numérico null.

========= 2 OPÇÃO UTILIZANDO OUTRA BIBLIOTECA 

Seguindo esse site.
https://docs.spreadsheet-importer.com/pages/GettingStarted/

Criei uma tabela Z

@EndUserText.label : 'teste'

@AbapCatalog.enhancement.category : #NOT_EXTENSIBLE

@AbapCatalog.tableCategory : #TRANSPARENT

@AbapCatalog.deliveryClass : #A

@AbapCatalog.dataMaintenance : #ALLOWED

define table zszk {

key mandt : mandt not null;

key matnr : matnr not null;

kunnr : kunnr;

tipo : char20;

budat : budat;

@Semantics.amount.currencyCode : 'bkpf.waers'

netwr : netwr;

}

Criei a ROOT e PROJECTION view

@AbapCatalog.viewEnhancementCategory: [#NONE]

@AccessControl.authorizationCheck: #NOT_REQUIRED

@EndUserText.label: 'teste'

@Metadata.ignorePropagatedAnnotations: true

@ObjectModel.usageType:{

serviceQuality: #X,

sizeCategory: #S,

dataClass: #MIXED

}

define root view entity ZSZK_TESTE

as select from zszk

{

key matnr as Matnr,

kunnr as Kunnr,

tipo as Tipo,

budat as Budat,

cast( 0 as abap.dec(15,2) ) as Netwr

}

=============================

@EndUserText.label: 'Projec V'

@AccessControl.authorizationCheck: #NOT_REQUIRED

define root view entity ZSZK_TESTE_V

provider contract transactional_query as projection on ZSZK_TESTE

{

@UI.lineItem: [{ position: 10 }]

key Matnr,

@UI.lineItem: [{ position: 20 }]

Kunnr,

@UI.lineItem: [{ position: 30 }]

Tipo,

@UI.lineItem: [{ position: 40 }]

Budat,

@UI.lineItem: [{ position: 50 }]

Netwr

}

Criei o behavior managed 

managed implementation in class zbp_szk_teste unique;

strict ( 2 );

define behavior for ZSZK_TESTE //alias <alias_name>

persistent table zszk

lock master

authorization master ( instance )

//etag master <field_name>

{

create;

update;

delete;

field ( readonly : update ) Matnr;

mapping for zszk {

Kunnr = kunnr;

Matnr = matnr;

Tipo = tipo;

Budat = budat;

Netwr = netwr;

}

}

===============================

projection;

strict ( 2 );

define behavior for ZSZK_TESTE_V //alias <alias_name>

{

use create;

use update;

use delete;

}

Criei os serviços e binding.

- Passo VS code

1. Install from npm

npm install ui5-cc-spreadsheetimporter

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

"resourceRoots": {

  "cc.spreadsheetimporter.v1_1_1": "./thirdparty/customcontrol/spreadsheetimporter/v1_1_1"

}

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 your manifest.json under sap.ui5

updating the module. (Explanation here: Version Namespace )

"componentUsages": {

  "spreadsheetImporter": {

    "name": "cc.spreadsheetimporter.v1_1_1"

  }

}

5. Optional Avoid error component does not exist

If you deploy your app to a SAP System (S/4 On-Premise or SAP BTP ABAP environment), you may get the error component does not exist.

To avoid this error, you can add the following to your manifest.json file:

"sap.app": {

  "embeds": ["thirdparty/customcontrol/spreadsheetimporter/v1_1_1"]

}

6. Adicionando botão customizado

 após SNIPPET

7 Inserir código controller.

sap.ui.define([

    "sap/m/MessageToast"

], function(MessageToast) {

    'use strict';

    return {

        importexcel: async function (event) {

            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);

          }

    };

});

MANIFEST.JSON

{

    "_version": "1.53.0",

    "sap.app": {

        "embeds": [

            "thirdparty/customcontrol/spreadsheetimporter/v1_1_1"

        ],

        "id": "br.szk.testeupload",

        "type": "application",

        "i18n": "i18n/i18n.properties",

        "applicationVersion": {

            "version": "0.0.1"

        },

        "title": "{{appTitle}}",

        "description": "{{appDescription}}",

        "resources": "resources.json",

        "sourceTemplate": {

            "id": "@sap/generator-fiori:lrop",

            "version": "1.12.4",

            "toolsId": "25a472ea-7893-4fde-81c2-bd5918aed745"

        },

        "dataSources": {

            "mainService": {

                "uri": "/sap/opu/odata/sap/ZSZK_TESTE/",

                "type": "OData",

                "settings": {

                    "annotations": [

                        "ZSZK_TESTE_VAN",

                        "annotation"

                    ],

                    "localUri": "localService/metadata.xml",

                    "odataVersion": "2.0"

                }

            },

            "ZSZK_TESTE_VAN": {

                "uri": "/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations(TechnicalName='ZSZK_TESTE_VAN',Version='0001')/$value/",

                "type": "ODataAnnotation",

                "settings": {

                    "localUri": "localService/ZSZK_TESTE_VAN.xml"

                }

            },

            "annotation": {

                "type": "ODataAnnotation",

                "uri": "annotations/annotation.xml",

                "settings": {

                    "localUri": "annotations/annotation.xml"

                }

            }

        }

    },

    "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.114.12",

            "libs": {

                "sap.m": {},

                "sap.ui.core": {},

                "sap.ushell": {},

                "sap.f": {},

                "sap.ui.comp": {},

                "sap.ui.generic.app": {},

                "sap.suite.ui.generic.template": {}

            }

        },

        "contentDensities": {

            "compact": true,

            "cozy": true

        },

        "models": {

            "i18n": {

                "type": "sap.ui.model.resource.ResourceModel",

                "settings": {

                    "bundleName": "br.szk.testeupload.i18n.i18n"

                }

            },

            "": {

                "dataSource": "mainService",

                "preload": true,

                "settings": {

                    "defaultBindingMode": "TwoWay",

                    "defaultCountMode": "Inline",

                    "refreshAfterChange": false,

                    "metadataUrlParams": {

                        "sap-value-list": "none"

                    }

                }

            },

            "@i18n": {

                "type": "sap.ui.model.resource.ResourceModel",

                "uri": "i18n/i18n.properties"

            }

        },

        "resources": {

            "css": []

        },

        "routing": {

            "config": {},

            "routes": [],

            "targets": {}

        },

        "resourceRoots": {

            "cc.spreadsheetimporter.v1_1_1": "./thirdparty/customcontrol/spreadsheetimporter/v1_1_1"

        },

        "componentUsages": {

            "spreadsheetImporter": {

                "name": "cc.spreadsheetimporter.v1_1_1"

            }

        },

        "extends": {

            "extensions": {

                "sap.ui.controllerExtensions": {

                    "sap.suite.ui.generic.template.ListReport.view.ListReport": {

                        "controllerName": "br.szk.testeupload.ext.controller.ListReportExt",

                        "sap.ui.generic.app": {

                            "ZSZK_TESTE_V": {

                                "EntitySet": "ZSZK_TESTE_V",

                                "Actions": {

                                    "create1": {

                                        "id": "create1Button",

                                        "text": "Importar Excel",

                                        "press": "importexcel",

                                        "requiresSelection": false

                                    }

                                }

                            }

                        }

                    }

                }

            }

        }

    },

    "sap.ui.generic.app": {

        "_version": "1.3.0",

        "settings": {

            "forceGlobalRefresh": false,

            "objectPageHeaderType": "Dynamic",

            "considerAnalyticalParameters": true,

            "showDraftToggle": false

        },

        "pages": {

            "ListReport|ZSZK_TESTE_V": {

                "entitySet": "ZSZK_TESTE_V",

                "component": {

                    "name": "sap.suite.ui.generic.template.ListReport",

                    "list": true,

                    "settings": {

                        "condensedTableLayout": true,

                        "smartVariantManagement": true,

                        "enableTableFilterInPageVariant": true,

                        "filterSettings": {

                            "dateSettings": {

                                "useDateRange": true

                            }

                        },

                        "dataLoadSettings": {

                            "loadDataOnAppLaunch": "ifAnyFilterExist"

                        }

                    }

                },

                "pages": {

                    "ObjectPage|ZSZK_TESTE_V": {

                        "entitySet": "ZSZK_TESTE_V",

                        "defaultLayoutTypeIfExternalNavigation": "MidColumnFullScreen",

                        "component": {

                            "name": "sap.suite.ui.generic.template.ObjectPage"

                        }

                    }

                }

            }

        }

    },

    "sap.fiori": {

        "registrationIds": [],

        "archeType": "transactional"

    }

}

É só executar...  fazer o download do template.
- testei com data e valor e funciona sem erro.

- Alguns detalhes dessa solução, só deixa fazer o upload depois q vc tenta carregar os dados (clicar no botão GO), isso dá para resolver colocando a instrução no manifest para executar a lista ao carregar o APP. 

        "pages": {

            "ListReport|ZSZK_TESTE_V": {

                "entitySet": "ZSZK_TESTE_V",

                "component": {

                    "name": "sap.suite.ui.generic.template.ListReport",

                    "list": true,

                    "settings": {

                        "condensedTableLayout": true,

                        "smartVariantManagement": true,

                        "enableTableFilterInPageVariant": true,

                        "filterSettings": {

                            "dateSettings": {

                                "useDateRange": true

                            }

                        },

                        "dataLoadSettings":{

                        "loadDataOnAppLaunch": "always" }