Extend Upload Set with Table to Fiori Elements and utilize Object Store

[KazuhikoTakata]

Overview

In this article, I will introduce a sample program for SAP BTP that manages both text and file information. This guide should prove useful for those new to SAP BTP, like myself. Previously I posted Extend Upload Set to Fiori Elements and utilize Document Management Service with minimum TypeScript implementation.

Recently SAP CAP team was implemented @cap-js/attachments plugin that provides out-of-box attachment files support with SAP Object Store service. We do not need TypeScript implementation above using this plugin.

It is quite convenient for us, but I had some trouble in deployment. I would like to note how can I resolve deployment trouble for my follower to prevent such pitfall.

screenshot of sample program

• Text is stored to SAP HANA Cloud database and file is stored to SAP Object Store service respectively.
• Backend service is implemented by Cloud Application Programming Model (CAP) Node.js project.
• User interface is implemented by Fiori Elements (List Report and Object Page), then automatically extend Object Page with SAPUI5 Upload Set with Table control. 

Sample code is hosted on a GitHub repository, and you are free to copy and experiment with it.

Note: Currently Object Store is available only in Free Tier environment, not in trial environment.

Note: I tested this on AWS subaccount. Maybe not working for other hyper scalers in current plugin version.

Development

Most of steps are same as my instruction post Instruction of implement-test-deploy flow for SAPUI5 plus CAP integrated with another services. And it is not difficult for you to follow instruction of @cap-js/attachments plugin. Key differences are:

• Local testing by `cds watch` is utilizing in-memory database for both text and file. You do not need to setup for hybrid testing. 
• Custom section to Fiori Elements is not required. Attachment section is automatically extended.
• Need to use specific SAPUI5 version `1.121`. Both older (1.120.14) and newer (1.124.0) version are not working for the moment. (Memo).

Deployment to Cloud Foundry

Deployment configuration is also similar to my previous artifacts.

In production (Cloud Foundry) environment, we will store file object to Object Store (this is Simple Storage Service, aka S3 in AWS). To do this, we will describe Object Store service instance and bind it to Node.js application in `mta.yaml` file.

One more thing to care is `package.json` CDS configuration. To connect to above service instance with CDS, I will write cds properties:

  "cds": {
    "requires": {
      "kinds": {
        "attachments-db": {
          "impl": "@cap-js/attachments/lib/basic"
        },
        "attachments-s3": {
          "impl": "@cap-js/attachments/lib/aws-s3"
        }
      },
      "[production]":{
        ...,
        "attachments": {
          "kind": "s3",
          "vcap": {
            "name": "sap-sample-fiori-elements-uploadset-object-store"
          }
        }
      }
    }
  }

• `kinds` property is for telling implementation of each kind (`db` is for local development, and `s3` is for production). I copied from here.
• `vcap` under `attachments` property is for accessing service instance in Cloud Foundry (refer to CAP documentation). Service name should be matched with resource name in `mta.yaml` file. 

After setup configuration has done, you can `mbt build` and `cf deploy` to deploy to Cloud Foundry. You can upload and download files in Fiori Elements like below.

Upload and donwload file

Conclusion

It is quite convenient even this plugin is still beta version for the moment, and this is what I am wanting for years to quickly implement program dealing both text and file. I highly expect GA version.

If you have any feedback, please post reply and discuss with me.