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