Forms By Adobe Service in SAP Cloud Platform using SAPUI5 – Part 2

INTRODUCTION:

This document tries to answer about using Forms By Adobe Service in SAP Cloud Platform using SAPUI5. Many developers find difficult in using Standard or Custom forms in SAPUI5. We have already configured the destinations, adobe forms service in SAP Cloud Platform services in my previous Blog post. To check the Part – 1, find my Forms By Adobe Service in SAP Cloud Platform using SAPUI5 – Part 1 in the below link.

https://blogs.sap.com/2020/03/17/forms-by-adobe-service-in-sap-cloud-platform-using-sapui5-part-1/

In this Blog post, we will look how to enable and consume the Forms by Adobe Service in Master – Detail Application using SAP Webide service from SAP Cloud Platform.

SOLUTION:

The user logs on to the SAP cloud platform account using the valid credentials.

1. Enabling the SAP Web IDE Full-Stack

On the left side of the pane, click on Services and search for SAP Web IDE Full stack.

Check if the service is enabled. To enable the SAP Web IDE full stack, click on the “Enable” button.

Once the service is enabled, The user clicks on the SAP WEB IDE Full – Stack Service and clicks on go to service.

2. Enabling the Master – Detail Application:

The User selects the SAP Fiori Master- Details tile and fills the Basic information.

The user enters the project name, title, namespace, descriptions and clicks next.

3. Configure the Service URL:

To configure data connection, select the destination and enter the Service URL and click on test.

$.ajax({
url: "/ads.restapi/v1/forms/GRFORM_PM",
method: "GET",
type: "GET",
dataType: "json",
async: false,
success: function (data, textStatus, jqXHR) {
getdata = data;
token = jqXHR.getResponseHeader("X-CSRF-Token");
},
error: function (data, textStatus, jqXHR) {
sap.m.MessageToast.show("No data");
}
});
this.getRouter().getRoute("object").attachPatternMatched(this._onObjectMatched, this);
this.setModel(oViewModel, "detailView");

var that = this;
$.ajax({
url: "/ads.restapi/v1/adsRender/pdf",
method: "POST",
type: "POST",
headers: {
'X-CSRF-Token': token
},
contentType: "application/json",
data: payloadEmploymentSummary,
success: function (data, textStatus, jqXHR) {
console.log("success");
console.log(data);
sap.m.MessageToast.show("Done");
postdata = data;
var base64EncodedPDF = postdata.fileContent;
if (base64EncodedPDF === undefined) {
return;
}
var decodedPdfContent = atob(base64EncodedPDF);
var byteArray = new Uint8Array(decodedPdfContent.length)
for (var i = 0; i < decodedPdfContent.length; i++) {
byteArray[i] = decodedPdfContent.charCodeAt(i);
}
var blob = new Blob([byteArray.buffer], {
type: 'application/pdf'
});
_pdfurl = URL.createObjectURL(blob);
if (!that._PDFViewer) {
jQuery.sap.addUrlWhitelist(undefined, _pdfurl); // register blob url as whitelist
}
that.oModel = new JSONModel({
Source: _pdfurl,
});
that.getView().byId("page3").setModel(that.oModel);
},
error: function (data, textStatus, jqXHR) {
sap.m.MessageToast.show("No data posted");
}
});

In the above code snippet, We will convert the template to base64 and get the data.

4. Render the PDF by Post the data using adsRender:

Once the code is done, Run the component.js folder.

The Master – Detail application is done and click on the Reservation Number on the left pane.

We can download or print the form as done in ECC system. The corresponding details for the reservation are displayed in the PDF form.

Conclusion:

Thus, from this blog post hope you would SAPUI5 (Master – Detail) application to display an adobe form is done by enabling the service, adding the standard or custom template in Template Store UI and adding the OAuth in Destinations. In the Part – 1, We discussed about how to Configure the Forms By Adobe Service in SAP Cloud Platform. Feel free to share your views or ideas for the same and share your thoughts if you have any workarounds for this blog post.