Render and Sign PDF Document In a UI5 Application With BTP Form Service by Adobe

In my blog PDF Digital Signature with BTP SAP Forms Service by Adobe and Test with Postman, I have demoed how to render and sign a PDF document with BTP ADS by using postman. In this blog, I will demo how to render and sign a PDF document in a UI5 application with BTP ADS and deploy it in BTP cloud foundry runtime .

Step 1. Creat destination base on service key adobeapikey in mentioned blog in BTP subaccount cockpit

Step 2, generate a ui5 application with yo easy-ui5 as step 1 in blog .

Step 3, change the MainView.view.xml as the following:

<mvc:View controllerName="com.sap.adssign.controller.MainView"
    xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" displayBlock="true"
    xmlns="sap.m" >
    <Page id="page" title="{i18n>title}">
        <content>
        <VBox id="buttonarea">
        <HBox id="hboxbutton1"><Button id="button1" press="pressRender" text="Display Document" /></HBox>
        <HBox id="hboxbutton2"><Button id="button2" press="pressRenderSign" text="RenderAndSignature" /></HBox>
        
        </VBox>

          <VBox id="vbox">
             <ScrollContainer id="scrollcontainer"
             height="100%"
             width="100%"
             horizontal="true"
             vertical="true">
             <FlexBox id="flexbox" direction="Column" renderType="Div" class="sapUiSmallMargin">
               <PDFViewer id="pdfview" source="{/Source}" title="{/Title}" height="{/Height}">
                 <layoutData>
                   <FlexItemData growFactor="1"  id="flexitemdata" />
                 </layoutData>
               </PDFViewer>
             </FlexBox>
           </ScrollContainer>
          </VBox>
        </content>
    </Page>
</mvc:View>

Step 4, change the MainView.controller.js as the following:

sap.ui.define(
    ["./BaseController","sap/m/MessageBox", "sap/base/Log", "sap/ui/model/json/JSONModel", "sap/base/security/URLWhitelist"],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller, MessageBox, Log, JSONModel, URLWhitelist) {
        "use strict";

        return Controller.extend("com.sap.adssign.controller.MainView", {
            onInit: function () {},
              pressRenderSign: function () {
                  const 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>";
                  const printdb64 = btoa(printd);
                 const pdfcontent = JSON.stringify( {
                      embedFont: 0,
                      formLocale: "en_US",
                      formType: "interactive",
                      taggedPdf: 1,
                      xdpTemplate: "labelprint3/labelprint3",
                      xmlData: printdb64
                   });
                   const myHeaders = new Headers();
                   myHeaders.append("Content-Type", "application/json");
                   let requestOptions = {
                    method: 'POST',
                    headers: myHeaders,
                    body: pdfcontent,
                    redirect: 'follow'
                  };
                  fetch("/adobeapi/v1/adsRender/pdf?templateSource=storageName", requestOptions).then(response => response.json() ).then( jbody => {
                    const signBody = {
                      "credentialAlias": "jackysignature",
                      "signatureFieldName": "signature",
                       "reasonInfo": "approval",
                       "locationInfo": "Shanghai",
                       "contactInfo": "<youremail>",
                       "pdf":  jbody.fileContent
                    };
                    requestOptions = {
                      method: 'POST',
                      headers: myHeaders,
                      body: JSON.stringify(signBody),
                      redirect: 'follow'
                    };
                    fetch("/adobeapi/v1/pdf/adsSet/signature",requestOptions).then(response1 => response1.json() ).then( jbody1 => {
                      const deccont = atob(jbody1.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"});
                      const pdfDocumentURL = URL.createObjectURL(blob);
                      this._pdfModel = new JSONModel({
                        Source: pdfDocumentURL,
                        Title: "pdf document",
                        Height: "600px"
                      });
                      URLWhitelist.add("blob");
                      this.byId("pdfview").setModel(this._pdfModel);
                     }).catch( error => {
                       console.log('error', error);
                    });
                    })
                },
              pressRender: function () {
                const 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>";
                const printdb64 = btoa(printd);

               const pdfcontent = JSON.stringify( {
                    embedFont: 0,
                    formLocale: "en_US",
                    formType: "interactive",
                    taggedPdf: 1,
                    xdpTemplate: "labelprint3/labelprint3",
                    xmlData: printdb64
                 });

                 const myHeaders = new Headers();
                 myHeaders.append("Content-Type", "application/json");

                 const requestOptions = {
                  method: 'POST',
                  headers: myHeaders,
                  body: pdfcontent,
                  redirect: 'follow'
                };

                fetch("/adobeapi/v1/adsRender/pdf?templateSource=storageName", requestOptions).then(response => response.json() ).then( jbody => {
                  const deccont = atob(jbody.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"});
                  const pdfDocumentURL = URL.createObjectURL(blob);
                  this._pdfModel = new JSONModel({
                    Source: pdfDocumentURL,
                    Title: "pdf document",
                    Height: "600px"
                  });
                  URLWhitelist.add("blob");
                  this.byId("pdfview").setModel(this._pdfModel);
                 }).catch( error => {
                   console.log('error', error);
                });
              }


        });
    },
);

Step 5, change the file approuter/xs-app.json as the following:

{
  "welcomeFile": "uimodule/index.html",
  "authenticationMethod": "none",
  "logout": {
    "logoutEndpoint": "/do/logout"
  },
  "routes": [
    {
      "source": "^/adobeapi/(.*)$",
      "target": "$1",
      "authenticationType": "xsuaa",
      "csrfProtection": false,
      "destination": "adobeapi"
    },
    {
      "source": "^/uimodule/(.*)$",
      "target": "$1",
      "authenticationType": "none",
      "localDir": "uimodule/webapp"
    }
  ]
}