Media Data Handling with SAP CAP and SAP Build Apps with Custom JS

[Jay2]

Who should read this blog?

This blog is tailored for developers who are interested in using the capabilities of SAP CAP media types within SAP Build apps. It's best suited for individuals who have some familiarity with JavaScript, as we will be exploring the use of custom JavaScript scripts to enhance our SAP CAP and SAP Build Apps.

In the world of application development, there are frequent requirements for seamlessly handling media files like images, videos, PDFs, and more within the application workflow. Whether you're building a content-rich platform, a data repository, or a multimedia-intensive user interface, efficient media management is often at the core of delivering an exceptional user experience.

Why do we need a custom JS script for SAP CAP media data type?

SAP CAP indeed provides out-of-the-box support for serving media and other binary data. This is a valuable feature for managing media assets within the CAP framework. Media data types in CAP store data in binary format, and the framework takes care of this binary data storage efficiently.

However, when it comes to sending this binary media data directly from SAP Build Apps, there's a limitation. SAP Build Apps does not have a native mechanism to handle binary data streams, and this is where custom JavaScript scripts come into play. Custom JavaScript can serve as a bridge or intermediary layer between both. Thanks to SAP Build apps, you can plug in your custom JS script to have this functionality.

Objective: To demonstrate how a custom JavaScript script can be used to facilitate image uploading in an SAP CAP application with a SAP HANA Cloud database.

Prerequisites:

1. Set up an SAP CAP project with HANA Cloud as the database backend.
   

   entity CoverPageImage:managed, cuid{ 
   
     scenarioId: Integer;
   
     demoTitle : String;
   
     image : LargeBinary @Core.MediaType: 'image/png';
   
   }

   
   


2. Ensure you have access to your SAP CAP project's OData service endpoint.


3. Create SAP Build Apps project and have logic flow created on tap of button as shows below -

Creating a custom JS script - Select the JS node (highlighted in green color) and use the sample code provided below -

try {

var dataURL = inputs.filepath;



var body;

var blobres;

var response;

await fetch(dataURL)

  .then(res => res.blob())

  .then(res=> {

    console.log("blob: "+res)

    blobres = res;    

  });





const requestOptions = {

    method: 'PUT',

    headers: { 'Content-type': 'image/png' },

    body: blobres

};





var output_ = {};

await fetch('https://{END_POINT}/service/Service/CoverPage/031dc96e-c903-4e1d-8e29-d5e37ca44415/image', requestOptions)

    .then(res => {

        output_.status = res.status

        output_.message = "Image Uploaded Susccessfully"

      

      }).catch(error => {

        output_ = error

    });



return { result: output_ };





     

}catch (err) {

  const error = {

    code: 'unknownError',

    message: 'Something went wrong.',

    rawError: err,

  }



  return [1, { error }]

}

The SAP Build Apps logic flow with the above JS script worked as per expectation on web browsers and iOS mobile applications, yielding consistently positive results.

Observations 

1. We are sending the binary data as is without converting it to base64, which reduces the overhead task on the client application.


2. Saving media with Media type with CAP helps to optimize the storage on the database


3. Quicker response in terms of uploading and downloading the data.

We hope the information and experiences shared in this blog prove helpful in your own projects. We encourage you to share your thoughts, findings, and any additional tips or insights you may have. Let's continue learning and innovating together as a community.

References -
1. SAP CAP Media Type

2. Getting started with Build Apps