Technical Articles
Render and View PDF in SAP UI5 with Forms service by adobe in BTP
In my blog Configure the SAP BTP Cloud Foundry Environment Subaccount with SAP Forms Service by Adobe and Test with Postman , we can get the base64 encoded adobe content in postman. In this blog, I will explain how to view the rendered pdf content in SAP UI5 application .
Prerequisites
You have a subaccount on SAP BTP, Cloud Foundry environment and the subaccount has entitlement of service Forms service by Adobe .
The following is the detailed steps :
Step 1. Creat destination base on service key adobeapikey in mentioned blog in BTP subaccount cockpit
Step 2. Create a button in sap ui5 application view
Step 3. Create the function in controller used in the view button in previous step.
The following is the code :
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageBox",
"sap/m/PDFViewer",
"sap/base/security/URLWhitelist",
],
/**
* @param {typeof sap.ui.core.mvc.Controller} Controller
*/
function (Controller,MessageBox,PDFViewer,URLWhitelist) {
"use strict";
return Controller.extend("ui5applicationmodule.controller.appsingleview", {
onInit: function () {
},
pdfRender:function(){
var printd = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><form1><LabelForm><DeliveryId>Mirum est ut animus agitatione motuque corporis excitetut.</DeliveryId><Position>Ego ille</Position><MaterialNo>Si manu vacuas</MaterialNo><Quantity>Apros tres et quidem</Quantity><Package>Mirum est</Package><QRCode>01234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789</QRCode></LabelForm><LabelForm><DeliveryId>Ad retia sedebam: erat in proximo non venabulum aut lancea, sed stilus et pugilares:</DeliveryId><Position>Licebit auctore</Position><MaterialNo>Proinde</MaterialNo><Quantity>Am undique</Quantity><Package>Ad retia sedebam</Package><QRCode>01234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789</QRCode></LabelForm><LabelForm><DeliveryId>meditabar aliquid enotabamque, ut, si manus vacuas, plenas tamen ceras reportarem.</DeliveryId><Position>Vale</Position><MaterialNo>Ego ille</MaterialNo><Quantity>Si manu vacuas</Quantity><Package>Apros tres et quidem</Package><QRCode>01234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789</QRCode></LabelForm></form1>";
var printdb64 = btoa(printd);
var pdfcontent = {
embedFont: 0,
formLocale: "en_US",
formType: "print",
taggedPdf: 1,
xdpTemplate: "labelprint/PrintLabel",
xmlData: printdb64
};
$.ajax({
url: "/adobeapi/v1/adsRender/pdf?templateSource=storageName&TraceLevel=0",
type: "POST",
data: JSON.stringify(pdfcontent),
headers: {
"Content-Type": "application/json"
},
async: false,
success: function (data) {
const deccont = atob(data.fileContent);
const byteNumbers = new Array(deccont.length);
for (let i = 0; i < deccont.length; i++) {
byteNumbers[i] = deccont.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], {type: "application/pdf"});
var pdfDocumentURL = URL.createObjectURL(blob);
if (!this._pdfViewer) {
this._pdfViewer = new PDFViewer();
this._pdfViewer.attachError(event => ErrorHandlerSingleton.getInstance().onError(event));
URLWhitelist.add("blob");
}
this._pdfViewer.setSource(pdfDocumentURL);
this._pdfViewer.open();
},
error: function (err) {
console.log(err);
MessageBox.information(JSON.stringify(err));
} });
}
});
});
Step 4, Add route in xs-app.json in app router module .
Step 5, Test
After the MTA project deployed , we will find the application in BTP subaccount space .
Note: If you need more information about MTA project creation, you can refer to my blog
The End.
Thanks for your time !
Best Regards!
Jacky Liu
hello, sir
Jacky Liu
nice blog
but
In pdf why QR code not shown?
Hi Jacky Liu
Very helpful article
Can you please tell me is there a way to pass json data to the form from the UI ?
Also wanted to understand how to utilize the scema associated to a form template ?
Thank you!
Hi, Poobalarayan
We can not pass in JSON data to render pdf document . The xml format is defined by adobe form service . You can refer to the following blog
https://blogs.sap.com/2022/01/24/configure-the-sap-btp-cloud-foundry-environment-subaccount-with-sap-forms-service-by-adobe/
Best regards!
Jacky Liu
Hi Jacky Liu,
Thank you for your response! 🙂
I have followed all your blogs with respect to "Forms Service by Adobe API (adsrestapi)" service and was able to replicate the steps without any issues. Thanks again for sharing the material.
One last question, Can you please tell me the significance of the schema that we attach to a form template using "Manage Template Storage" UI ?
Thanks and Regards,
Anto.
Hi, Anto,
The following information xdpTemplate come from the templates you uploaded by using "Manage Template Storage" UI . We don't have to define schema .
Best regards!
Jacky Liu