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