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
– Complete Part 1 and Part 2 of this blog series tutorial.
– SAP Build Apps subscription(with SAP AppGyver Classic feature)
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.
*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.
Save your progress.
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.
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.
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 |
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
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.
- SAP Managed Tags:
2 Comments
