Skip to Content
Technical Articles
Author's profile photo Jacky Liu

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

 

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Rohit Patil
      Rohit Patil

       

      hello, sir

      Jacky Liu

      nice blog 

      but 

      In pdf why QR code not shown?

       

      Author's profile photo Antothomasraja Poobalarayan
      Antothomasraja Poobalarayan

      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!

       

      Author's profile photo Jacky Liu
      Jacky Liu
      Blog Post Author

      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

      Author's profile photo Antothomasraja Poobalarayan
      Antothomasraja Poobalarayan

      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.

      Author's profile photo Jacky Liu
      Jacky Liu
      Blog Post Author

      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 .

       

                 var pdfcontent = {
                          embedFont: 0,
                          formLocale: "en_US",
                          formType: "print",
                          taggedPdf: 1,
                          xdpTemplate: "labelprint/PrintLabel",
                          xmlData: printdb64
                       };

       

      Best regards!

       

      Jacky Liu