Create No-Code PDF generation app in SAP Build Apps(AppGyver App)

[aoyang]

In the previous blogs, we got started with Forms service by Adobe REST API and wrapped the contents as your own custom API.

In this last blog, we will consume the API in SAP Build Apps as classic AppGyver application.

Blog series

Part1 –  Get ready for Form Service by Adobe API in BTP

Part2 – Wrapping Form Service API into your own consumable API

Part3 –  Create No-Code PDF generation app in SAP Build Apps(AppGyver App) <- This blog

Architecture

1. Prerequisites

– Complete Part 1 and Part 2 of this blog series tutorial.

– SAP Build Apps subscription(with SAP AppGyver Classic feature)

2. Creating AppGyver Classic application

Access SAP Build Apps lobby. Choose Create -> Build an application -> Choose "Looking for AppGyver Classic? Click here!" at the bottom of the screen. Give a Project name of your choice and Create the application.

AppGyver platform will open and you can start the your no-code development.

From the left pane, drag and drop Input fields for the Invoice PDF into the main screen. I've added Customer, Customer Address, State/Province, Phone, Item, Item Description, Quantity, Unit Price and Amount. At the end of the screen, drag and drop button and label it "Generate PDF".

Next, switch to Variable view and create app variables for each input fields. In addition, create variable "base64_data" and make sure that it's with type text.

Go back to UI View and assign each app variables to each input fields.

 

Next, double click the Button "Generate PDF" and open the logic pane. Add the logic component as follows. "HTP request" and "Download Base64" is not initially installed so you have to install them from the marketplace.

 

Enter the following parameters for the logic components.

HTTP Request

The request body must be in json format. The formula populates input data from app variables in json format.

URL	Your custom API created in the last blog
HTTP Method	POST
Request Body	{ "company": appVars.Customer, "address": appVars.Customer_Address, "state": appVars.State, "phone": appVars.Phone, "item": appVars.Item, "description": appVars.Description, "quantity": appVars.Quantity, "unitprice": appVars.UnitPrice, "amount": appVars.Amount}
Request Body Type	json

Set app variable

Variable name	base64_data
Assigned value	outputs["HTTP request"].resBodyParsed['fileContent']

*Note that the formula will be recognized as invalid shown in red. This is because the formula cannot comprehend that "fileContent" of the response body of HTTP request is in text format. The formula can only understand that response body of HTTP request is in json format. Therefore it's giving the warning. But we're specifying the field "fileContent" and the file content is in text format so it will work without any issue.

Download Base64 text as file (web only)

Base64 text	base64_data
Filename	Invoice.pdf
MIME type	PDF

Save your progress.

3. Testing the application

Launch your application on your browser. Unfortunately,  Download Base64 text as file logic component only works on web so testing on the mobile device would not work.

Enter all the fields in your application and click on "Generate PDF" button. An invoice PDF document should be downloaded. It might take few seconds before the document is downloaded.

Conclusion

Congratulations!😃 You've completed all three blog tutorials and created an No-Code application to generate Invoice document in PDF format.

The front-end is completely No-Code, however, the backend API needs to be created with coding ABAP. So the whole architecture is not 100% No-Code. But I hope this is a good integration use-case within BTP and good application use-case if your No-Code application needs to handle PDF process.

This is probably the simplest way to generate PDF with minimum of coding. I hope in the future, handling Forms service REST API will become No-Code as well, so both front-end and back-end become completely No-Code.