[Bug]: Issue with deploying html apps into BTP build workzone

[TravelTechCode]

OData Version

OData V4

Draft

No

Scenario

Flexible programming model

Environment

BAS

UI5 Spreadsheet Component

0.33.0

What happened?

Hi Marian,
I am deploying a cap based fiori app to cloud foundry . The app is successfully deployed and the app is available at the html Applications , but due to some weird reasons the app isnt available in content explorer of build workzone.
Regards,
Priyanka

Relevant log output

.

Spreadsheet Component Init

openSpreadsheetUploadDialog: async function (event) {
                this.editFlow.getView().setBusyIndicatorDelay(0);
                this.editFlow.getView().setBusy(true);
                this.spreadsheetUpload = await this.editFlow.getView()
                    .getController()
                    .getAppComponent()
                    .createComponent({
                        usage: "spreadsheetimporter",
                        async: true,
                        componentData: {
                            context: this,
                            columns: ["SAP_MATNR", "EXT_MATNR", "Distributor_code"],
                            spreadsheetFileName: "External Material Mapping Template.xlsx",
                            mandatoryFields: ["SAP_MATNR", "EXT_MATNR", "Distributor_code"],
                            batchSize: 100,
                            //createActiveEntity: true,
                            i18nModel: this.getModel("i18n"),
                            //  useTableSelector: true
                        },
                    });
                this.spreadsheetUpload.openSpreadsheetUploadDialog();
                this.editFlow.getView().setBusy(false);
            }
        });

Manifest

{
  "_version": "1.59.0",
  "sap.app": {
    "id": "com.bsci.latam.externalmaterialmap",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
      "version": "0.0.1"
    },
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "resources": "resources.json",
    "sourceTemplate": {
      "id": "@sap/generator-fiori:fpm",
      "version": "1.13.6",
      "toolsId": "3100caf3-9fdf-4cb3-8d4b-095bcd281f01"
    },
    "embeds": ["thirdparty/customControl/spreadsheetImporter/v0_33_0"],
    "dataSources": {
      "mainService": {
        "uri": "/odata/v4/catalog/",
        "type": "OData",
        "settings": {
          "annotations": [],
          "odataVersion": "4.0"
        }
      }
    },
    "crossNavigation": {
      "inbounds": {
        "externalmaterialmapping-maintain": {
          "semanticObject": "externalmaterialmapping",
          "action": "maintain",
          "title": "{{flpTitle}}",
          "signature": {
            "parameters": {},
            "additionalParameters": "allowed"
          }
        }
      }
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "icons": {
      "icon": "",
      "favIcon": "",
      "phone": "",
      "phone@2": "",
      "tablet": "",
      "tablet@2": ""
    },
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "flexEnabled": false,
    "dependencies": {
      "minUI5Version": "1.124.1",
      "libs": {
        "sap.m": {},
        "sap.ui.core": {},
        "sap.ushell": {},
        "sap.fe.templates": {}
      },
      "components": {
        "cc.spreadsheetimporter.v0_33_0": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "com.bsci.latam.externalmaterialmap.i18n.i18n"
        }
      },
      "": {
        "dataSource": "mainService",
        "preload": true,
        "settings": {
          "operationMode": "Server",
          "autoExpandSelect": true,
          "earlyRequests": true
        }
      },
      "@i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "uri": "i18n/i18n.properties"
      }
    },
    "resources": {
      "css": []
    },
    "resourceRoots": {
      "cc.spreadsheetimporter.v0_33_0": "./thirdparty/customControl/spreadsheetImporter/v0_33_0"
    },
    "componentUsages": {
      "spreadsheetimporter": {
        "name": "cc.spreadsheetimporter.v0_33_0"
      }
    },
    "routing": {
      "config": {},
      "routes": [
        {
          "name": "MaterialMappingMain",
          "pattern": ":?query:",
          "target": "MaterialMappingMain"
        }
      ],
      "targets": {
        "MaterialMappingMain": {
          "type": "Component",
          "id": "MaterialMappingMain",
          "name": "sap.fe.core.fpm",
          "options": {
            "settings": {
              "viewName": "com.bsci.latam.externalmaterialmap.ext.main.Main",
              "contextPath": "/MaterialMapping"
            }
          }
        }
      }
    }
  },
  "sap.cloud": {
    "public": true,
    "service": "ExternalMaterialMapping"
  }
}

[FabienHenique]

I do have the same issue, I've raised an incident to SAP.

Some logs from the HTML5 importer:
{"status":"PARTIAL","contents":
{"total":11,"failed":2,"status":"PARTIAL","messages":
{"xxxxxx":{"error":["Failed to search xxxxxx"],"warning":[]},"AppId_cc.spreadsheetimporter.v1_0_0":
{"error":["Replication failed for HTML5 app 'xxxxxx' and manifest 'thirdparty/customcontrol/spreadsheetimporter/v1_0_0/manifest.json'","Service name 'spreadsheetimporter_v1_0_0' and public setting 'true' in embedded manifest.json have to be equal to service name 'xxxxxxx' and public setting 'true' of root manifest.json"],"warning":[]}},"correlationId":"xxxxxx"},"reportId":{"contextId":"SUB_ACCOUNT","subdomain":"xxxxxx","instanceId":"SAAS_APPROUTER_HTML5_APP_REPO","providerId":"saas_approuter","contextType":"sub_account","identityZoneId":"xxxxxx"},"correlationId":"xxxxxx","providerTitle":"HTML5 Apps","statusText":"Une partie du contenu a été mise à jour."}

[TravelTechCode]

@FabienHenique How are your accessing this log?? Is your app getting deployed to html5 repository?? In my case the app is deployed to html5 repo but not available in channel manager of build workzone

[marianfoo]

"Service name 'spreadsheetimporter_v1_0_0' and public setting 'true' in embedded manifest.json have to be equal to service name 'xxxxxxx' and public setting 'true' of root manifest.json"]

@FabienHenique
Had this issue reported before but i am not able to raise a ticket with SAP. Please report back what SAP will respond to this issue.

@TravelTechCode do you have the same issue? If yes, you can also raise a issue ticket with SAP

Current workaround (and recommended) is to deploy the component not in the app itself. This helps with the ABAP Stack and BTP deployment.
https://docs.spreadsheet-importer.com/pages/CentralDeployment/#deployment-to-html5-repository-on-btp

[FabienHenique]

@marianfoo, this is answer from SAP:
Hi Fabien,

Could you change below setting, rebuild and deploy again? Then update content in workzone content channel and see if issue is resolved.

./thirdparty/customcontrol/spreadsheetimporter/v1_0_0/manifest.json

Old:

"sap.cloud": {
"public": true,
"service": "spreadsheetimporter_v1_0_0"
}

New:

"sap.cloud": {
"public": true,
"service": "mycloudservicename"
}

[FabienHenique]

@FabienHenique How are your accessing this log?? Is your app getting deployed to html5 repository?? In my case the app is deployed to html5 repo but not available in channel manager of build workzone

When you refresh your HTML5 repo, you can download the report and you should see any partial import in the json file.

[marianfoo]

@FabienHenique the service name mycloudservicename is your servicename or a generic one?
Is it the same as your name?
I am not sure how to make it possible that every customer can change that

[FabienHenique]

@marianfoo our cloud service name is nagarro.xxx.xxx. I've put mycloudservicename as an example.
If we go with a global deployment, we'll not face any issue?

[marianfoo]

@FabienHenique just i understand correct:
SAP want you to have the cloud service name in the spreadsheet importer manifest as in the app?
Or what is the problem with "spreadsheetimporter_v1_0_0"?

[dguess]

I ran into this issue and resolved it by using the SAP suggestion above of manually updating the below file: ./thirdparty/customcontrol/spreadsheetimporter/v1_0_0/manifest.json

"sap.cloud": {
"public": true,
"service": "mycloudservicename"
}

(where mycloudservicename is the same as what's in your deployed app)

When you try and update the HTML5 'Content Channels' so the apps are available in the Content Manager, SAP is running this check (not sure why) to make sure that the sap.cloud.service name in the manifest of the component matches that sap.cloud.service name in the manifest of the app.

[marianfoo]

Ok, i try to fix this with #587
Let me see if that helps so you dont have to do that manually

[marianfoo]

@dguess @FabienHenique @TravelTechCode
can you please try this custom task https://github.com/spreadsheetimporter/ui5-task-btp-manifest

It worked in my test setup.
It gets the name from the ["sap.cloud].service and replaces that with the ["sap.cloud].service in the spreadsheetimporter manifest.

Sample App manifest.json

Spreadsheet Importer manifest.json in dist folder

ui5.yaml to build

# yaml-language-server: $schema=https://sap.github.io/ui5-tooling/schema/ui5.yaml.json

specVersion: "2.5"
metadata:
  name: ui.v4.ordersv4fe
type: application
builder:
  customTasks:
    - name: ui5-task-btp-manifest
      afterTask: replaceVersion
      configuration:
        prefix: "test"
server:
  customMiddleware:
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        ignoreCertError: false # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted
        ui5:
          path:
            - /resources
            - /test-resources
          url: https://ui5.sap.com
        backend:
          - path: /odata/v4/Orders
            url: http://localhost:4004
    - name: ui5-middleware-ui5
      afterMiddleware: compression
      configuration:
        modules:
          ui5-cc-spreadsheetimporter:
            configFile: "ui5-serve.yaml"
    - name: ui5-tooling-modules-middleware
      afterMiddleware: compression
      configuration:
        debug: "verbose"
        addToNamespace: true
        prependPathMappings: true
    - name: fiori-tools-appreload
      afterMiddleware: compression
      configuration:
        port: 35730
        path: webapp
        delay: 300
    - name: fiori-tools-preview
      afterMiddleware: fiori-tools-appreload
      configuration:
        component: ui.v4.ordersv4fe
        ui5Theme: sap_horizon

[FabienHenique]

Hello @marianfoo , is there any specificity with MTA deployment?
I got an error message:
taskRepository: Unknown Task ui5-task-btp-manifest

[marianfoo]

Need to install it, see the readme
https://github.com/spreadsheetimporter/ui5-task-btp-manifest?tab=readme-ov-file#ui5-task-to-change-spreadsheet-importer-manifest

[TravelTechCode]

Hi @marianfoo . I tried this approach , But getting the same issue.
Though one hack i found is that ,if i deploy my app first without the ui5 spreadsheet component and then add and deploy the ui5 spreadsheet component in the second deployment, then it's not causing any deployment error and can be access in the content explorer too.

[marianfoo]

@TravelTechCode can you please check if the service name in the spreadsheet importer and build output change?

[TravelTechCode]

Hi @marianfoo yeah so i noticed that there are two manifests file in the /thirdparty/customcontrol/spreadsheetimporter/v33_0_0/manifest.json
one where the service name is "spreadsheetimporter_v0_33_0" and the second one where the service name is "myservicename".

[marianfoo]

I see, please update spreadsheet importer to v1

[TravelTechCode]

@marianfoo I need to use importer v0.33.0 version only as the user needs the button icons. Is it not possible to address this issue in version 0.33.0

[marianfoo]

@TravelTechCode i updated the task so it supports your version as well
https://www.npmjs.com/package/ui5-task-btp-manifest/v/0.2.0

[marianfoo]

a influence was created to change that. SAP dont see an error here
https://influence.sap.com/sap/ino/#/idea/326299

[stockbal]

Hi @marianfoo,

I am facing the same issue as @TravelTechCode. I am using version 1.0.0 in embedded mode. The generated zip file contains 2 manifest.json files at location /thirdparty/customControl/spreadsheetimporter/v1_0_0.

My ui5-deploy.yaml looks like that:

specVersion: '2.4'
metadata:
  name: myAppName
type: application
resources:
  configuration:
    propertiesFileSourceEncoding: UTF-8
builder:
  resources:
    excludes:
      - "/test/**"
      - "/localService/**"
  customTasks:
  - name: webide-extension-task-updateManifestJson
    afterTask: replaceVersion
    configuration:
      appFolder: webapp
      destDir: dist
  - name: ui5-task-zipper
    afterTask: generateCachebusterInfo
    configuration:
      archiveName: myAppName
      includeDependencies:
      - ui5-cc-spreadsheetimporter-v1-0-0
      additionalFiles:
      - xs-app.json
  - name: ui5-task-btp-manifest
    afterTask: replaceVersion
    configuration:
      service: "myService"
      debug: true        
  - name: ui5-tooling-transpile-task
    afterTask: replaceVersion
    configuration:
      debug: true
      removeConsoleStatements: true
      transpileAsync: true
      transpileTypeScript: true 

[marianfoo]

@stockbal please try again with my fixes https://github.com/spreadsheetimporter/ui5-task-btp-manifest/releases/tag/v0.2.1
if that does not work we talk this afternoon

[marianfoo]

@stockbal please try again with my fixes https://github.com/spreadsheetimporter/ui5-task-btp-manifest/releases/tag/v0.2.1 if that does not work we talk this afternoon

@stockbal as i showed you, i did work in my setup, but maybe run my task after transpile like:

  - name: ui5-task-btp-manifest
    afterTask: ui5-tooling-transpile-task
    configuration:
      service: "myService"
      debug: true