Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 

This document tries to answer about using Forms By Adobe Service in SAP Cloud Platform using SAPUI5. Many developers find difficult in using Standard or Custom forms in SAPUI5. We have already configured the destinations, adobe forms service in SAP Cloud Platform services in my previous Blog post. To check the Part - 1, find my Forms By Adobe Service in SAP Cloud Platform using SAPUI5 – Part 1 in the below link.

In this Blog post, we will look how to enable and consume the Forms by Adobe Service in Master - Detail Application using SAP Webide service from SAP Cloud Platform.



The user logs on to the SAP cloud platform account using the valid credentials.


1. Enabling the SAP Web IDE Full-Stack


On the left side of the pane, click on Services and search for SAP Web IDE Full stack.

Check if the service is enabled. To enable the SAP Web IDE full stack, click on the “Enable” button.



Once the service is enabled, The user clicks on the SAP WEB IDE Full - Stack Service and clicks on go to service.



2. Enabling the Master - Detail Application:


The User selects the SAP Fiori Master- Details tile and fills the Basic information.


The user enters the project name, title, namespace, descriptions and clicks next.

3. Configure the Service URL:


To configure data connection, select the destination and enter the Service URL and click on test.


url: "/ads.restapi/v1/forms/GRFORM_PM",
method: "GET",
type: "GET",
dataType: "json",
async: false,
success: function (data, textStatus, jqXHR) {
getdata = data;
token = jqXHR.getResponseHeader("X-CSRF-Token");
error: function (data, textStatus, jqXHR) {"No data");
this.getRouter().getRoute("object").attachPatternMatched(this._onObjectMatched, this);
this.setModel(oViewModel, "detailView");


var that = this;
url: "/ads.restapi/v1/adsRender/pdf",
method: "POST",
type: "POST",
headers: {
'X-CSRF-Token': token
contentType: "application/json",
data: payloadEmploymentSummary,
success: function (data, textStatus, jqXHR) {
postdata = data;
var base64EncodedPDF = postdata.fileContent;
if (base64EncodedPDF === undefined) {
var decodedPdfContent = atob(base64EncodedPDF);
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'
_pdfurl = URL.createObjectURL(blob);
if (!that._PDFViewer) {, _pdfurl); // register blob url as whitelist
that.oModel = new JSONModel({
Source: _pdfurl,
error: function (data, textStatus, jqXHR) {"No data posted");


In the above code snippet, We will convert the template to base64 and get the data.




4. Render the PDF by Post the data using adsRender:


Once the code is done, Run the component.js folder.



The Master - Detail application is done and click on the Reservation Number on the left pane.



We can download or print the form as done in ECC system. The corresponding details for the reservation are displayed in the PDF form.



Thus, from this blog post hope you would SAPUI5 (Master - Detail) application to display an adobe form is done by enabling the service, adding the standard or custom template in Template Store UI and adding the OAuth in Destinations. In the Part – 1, We discussed about how to Configure the Forms By Adobe Service in SAP Cloud Platform. Feel free to share your views or ideas for the same and share your thoughts if you have any workarounds for this blog post.


1 Comment
Labels in this area