Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Jacky_Liu
Product and Topic Expert
Product and Topic Expert
1,992
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"
}
]
}

 

Step 6, build and deploy the ui5 application into BTP cloud foundry runtime .





Step 7,  test the deployed UI5 application .






The end.

Thank you for your time!

Best regards!

Jacky Liu

 

 

 

 
2 Comments