In my blog Render and View PDF in SAP UI5 with Forms service by adobe in BTP , I have explained how to render PDF in a SAPUI5 application with SAP Forms Service by Adobe in BTP(ADS). SAP Forms Service by Adobe is charged by numbers of request . If the users always call ADS to render PDF for the same document, it will increase cost of customers .So if the rendered pdf can be uploaded into BTP SAP Document Management service(CMIS) in the first time and after that, if the users want to view the PDF document, they can download the document from CMIS, it will reduce cost for customers .
1, You have finished Initial Setup for Document Management Service, Integration Option.
2, You have finished Onboarding Repository.
The following is the service key information
The following is the destination for CMIS service key:
The following is the code :
The following is the code :
After mta application deployed , we can find the approuter application in BTP cockpit subaccount space .
The End
Thanks for your time to read!
Best regards!
Jacky Liu
Prerequisite
1, You have finished Initial Setup for Document Management Service, Integration Option.
2, You have finished Onboarding Repository.
Steps :
Step 1, Create destination for CMIS service key
The following is the service key information
The following is the destination for CMIS service key:
Step 2, Add filename and document ID and button in SAP UI5 View .
Step 3, Create service function for render and file upload in BAS .
The following is the code :
sap.ui.define("FileUpload", [
"sap/ui/base/Object"
], function (ui5Object) {
"use strict";
return ui5Object.extend("ui5applicationmodule.service.FileUpload", {
fileupload: function (blob, filename, fname) {
return new Promise((resolve, reject) => {
var data = new FormData();
data.append("cmisaction", "createDocument");
data.append("propertyId[0]", "cmis:name");
data.append("propertyValue[0]", filename);
data.append("propertyId[1]", "cmis:objectTypeId");
data.append("propertyValue[1]", "cmis:document");
data.append("filename", filename);
data.append("_charset", "UTF-8");
data.append("includeAllowableActions", "False");
data.append("succinct", "true");
data.append("media", blob,filename);
var xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange", function () {
if (this.readyState !== 2) {
console.log(this.status);
}
});
xhr.onload = () => {
if (xhr.status === 201) {
console.log('upload succeed')
return resolve(xhr.response)
}
return reject(xhr.response);
}
console.log(data);
xhr.open("POST", "/sdi/browser/f98b60e4-aed8-4e21-bd91-a64f0b3b4df8/root");
xhr.send(data);
})
},
render: function (content) {
return new Promise((resolve, reject) => {
var rendercont = btoa(content);
var pdfcontent = {
embedFont: 0,
formLocale: "en_US",
formType: "print",
taggedPdf: 1,
xdpTemplate: "labelprint/PrintLabel",
xmlData: rendercont
};
var xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange", function () {
if (this.readyState !== 2) {
// console.log(this.responseText);
}
});
xhr.onload = () => {
if (xhr.status === 200) {
return resolve(xhr.response);
}
return reject(xhr.response);
}
xhr.open("POST", "/adobeapi/v1/adsRender/pdf?templateSource=storageName&TraceLevel=0");
xhr.setRequestHeader("Content-Type", "application/json")
xhr.send(JSON.stringify(pdfcontent));
});
}
});
})Step 4, Realize the view button press function in controller:
The following is the code :
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageBox",
"sap/m/PDFViewer",
"sap/base/security/URLWhitelist",
"ui5applicationmodule/service/FileUpload"
],
/**
* @param {typeof sap.ui.core.mvc.Controller} Controller
*/
function (Controller, MessageBox, PDFViewer, URLWhitelist, FileUpload) {
"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 filename = this.getView().byId("filename").getValue();
if (!this._fileUpload) {
this._fileUpload = new FileUpload();
}
this._fileUpload.render(printd).then(renderedData=>{
var renderresult = JSON.parse(renderedData);
const deccont = atob(renderresult.fileContent);
var fname = renderresult.fileName;
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();
if (!this._fileUpload) {
this._fileUpload = new FileUpload();
}
this._fileUpload.fileupload(blob,filename,fname).then(result => {
var cmiscontS = JSON.stringify(result).replaceAll("cmis:","");
cmiscontS = cmiscontS.replaceAll("sap:","");
MessageBox.information(cmiscontS);
var cmiscontO= JSON.parse(cmiscontS);
console.log(typeof(cmiscontO));
var cmisid ="";
if(typeof(cmiscontO) === 'string'){
cmisid = JSON.parse(cmiscontO).succinctProperties.objectId;
}else{
cmisid = cmiscontO.succinctProperties.objectId;
}
this.getView().byId("dmsid").setValue(cmisid);
console.log('upload succeed');}).catch(err=>{
MessageBox.information(err);console.log(err);
});
}).catch(err=>{
MessageBox.information(JSON.stringify(err));
})
}
});
});
Step 5, Add router in xs-app.json under module of approuter
Step 6, Test
After mta application deployed , we can find the approuter application in BTP cockpit subaccount space .
The End
Thanks for your time to read!
Best regards!
Jacky Liu
- SAP Managed Tags:
| User | Count |
|---|---|
| 16 | |
| 11 | |
| 8 | |
| 7 | |
| 6 | |
| 6 | |
| 5 | |
| 5 | |
| 5 | |
| 5 |
