Consume ‘SAP Forms by Adobe’ from SAP UI5 applications

Edited on 19/11/2019 – Removed token generation from within the UI5 application and handled it in the destination.

After publishing the blog on how to generate PDFs in the cloud using Java application, I received few comments and a number of messages on how to consume the SAP Forms by Adobe service from a SAP UI5 application. This blog will cover the steps to do the same.

Please refer my other blog: https://blogs.sap.com/2018/11/08/generate-pdfs-in-the-cloud-sap-forms-by-adobe/#, on how this can be done using a Java application.

As I mentioned in my previous blog, SAP standard documentation covers most of the steps in detail and I will be referring to the official document directly for those steps.

In order to call the Rest API to generate the PDF forms from SAP UI5 application, we need the following:

a. Form Template – PDF Layout

b. Data to be displayed in the form – Invoice data

Pass these two parameters while calling the Rest API and get the PDF form back.[For the sake of simplicity, I used the same PDF layout (Form Template) I used in the other blog].

SAP has introduced ‘Template Stores’ to store the Form templates. They can be referred easily when the PDF rendering API is called. Unlike the other blog in which I passed the XDP template in the API call, I have stored and referred the Form template from template store here.

Some steps are well documented here by SAP. So, I will be covering the additional steps in a more detailed manner.

1. Enable the ‘SAP Forms by Adobe’ in your trial subaccount. Refer link
2. Assign roles to users and update the destination. Refer link
3. Register an oAuth client in the cloud platform subaccount and create a destination pdf render API by following the steps in the link . Use URL as https://adsrestapiformsprocessing-s0008289464trial.hanatrial.ondemand.com/ads.restapi

Now we are all set to call the REST APIs from the ui5 application.

5. UI5 application

Maintain entries in Neo-app.json to access both the destinations configured above.

{
  "welcomeFile": "/webapp/index.html",
  "authenticationMethod": "saml",
  "routes": [
    {
      "path": "/resources",
      "target": {
        "type": "service",
        "name": "sapui5",
        "entryPath": "/resources"
      },
      "description": "SAPUI5 Resources"
    },
    {
      "path": "/test-resources",
      "target": {
        "type": "service",
        "name": "sapui5",
        "entryPath": "/test-resources"
      },
      "description": "SAPUI5 Resources"
    }
     {
      "path": "/render",
      "target": {
        "type": "destination",
        "name": "pdf_render_oAuth"
      },
      "description": "pdf_render_oAuth"
    },
    {
      "path": "/webapp/resources",
      "target": {
        "type": "service",
        "name": "sapui5",
        "entryPath": "/resources"
      },
      "description": "SAPUI5 Resources"
    },
    {
      "path": "/webapp/test-resources",
      "target": {
        "type": "service",
        "name": "sapui5",
        "entryPath": "/test-resources"
      },
      "description": "SAPUI5 Test Resources"
    }
  ],
  "sendWelcomeFileRedirect": true
}

When you have to call the print functionality, use the code below. I have tried to give comments in line for easy understanding.

To know more about the API calls, refer Rest API  documentation

	renderPDF: function () {
			//Generate the token
			var modeldata = this.getView().getModel().getData();
			//Build the xml data with the data from the model
			var xmldata =
				"<?xml version=\"1.0\" encoding=\"UTF-8\"?><form1><InvoiceNo>" + modeldata.Invoices[0].Invoiceno + "</InvoiceNo><InvoiceTo>" +
				modeldata.Invoices[0].Invoiceaddress + "</InvoiceTo><InvoiceTotal>" + modeldata.Invoices[0].Invoiceamount +
				"</InvoiceTotal></form1>";
			var encdata = btoa(xmldata);
			//prepare the render API call. Pick up the template from template store
			var jsondata = "{  " + "\"xdpTemplate\": \"" + "InvoiceData/Invoice" + "\", " + "\"xmlData\": \"" + encdata + "\"}";
			var url_render = "/render/v1/adsRender/pdf?templateSource=storageName";
			//make the API call
			$.ajax({
				url: url_render,
				type: "post",
				contentType: "application/json",
				data: jsondata,
				success: function (data, textStatus, jqXHR) {
					//once the API call is successfull, Display PDF on screen
					var decodedPdfContent = atob(data.fileContent);
					var byteArray = new Uint8Array(decodedPdfContent.length);
					for (var i = 0; i < decodedPdfContent.length; i++) {
						byteArray[i] = decodedPdfContent.charCodeAt(i);
					}
					var blob = new Blob([byteArray.buffer], {
						type: 'application/pdf'
					});
					var _pdfurl = URL.createObjectURL(blob);

					if (!this._PDFViewer) {
						this._PDFViewer = new sap.m.PDFViewer({
							width: "auto",
							source: _pdfurl
						});
						jQuery.sap.addUrlWhitelist("blob"); // register blob url as whitelist
					}

					this._PDFViewer.open();

				},
				error: function (data) {

				}
			});

		}

Here is the output of the UI5 application.

1. Execute the application from SCP

2. Click on Edit and change the details (just to make sure that the data is being picked up dynamically)

3.Click on Print. API calls will be made and the PDF is shown in the PdfViewer control

As always, please feel free to comment if you have any feedback or questions.