Name	Name	Last commit message	Last commit date
parent directory ..
images	images
.DS_Store	.DS_Store
README.md	README.md

Overview

In this exercise, you will build your app in SAP Build Apps to upload invoices.

Create a Build Apps Project

From SAP Build Lobby, click on Create and then select Build Apps Project.

Username Password

AD160_XXX
where XXX is the user number
like AD160_000, AD160_001 etc. Acce$$teched22

Username	Password
AD160_XXX where XXX is the user number like AD160_000, AD160_001 etc.	Acce$$teched22

Under Project Name, enter "Invoice AD160-XXX", replace XXX with your user ID. For example, "Invoice AD160-087".
Click on Create to start building your application.

Create UI

You will be redirected to Build Apps Composer, which is like an IDE for SAP Build Apps. On the canvas, you can already see a Title and a Text component.
Click on “Headline” on the canvas to select the Title component. Now, the PROPERTIES tab on the right-hand side will show the properties of the Title component where you can modify it.
Under Content, enter “Invoice Approval.”
Select the Text component, modify the Content under the PROPERTIES tab on the right-hand side to "Enter your name and upload your invoice".
Drag and drop an Input field from the UI Component library into the canvas.
Under the PROPERTIES tab of the Input field, clear the Label and change the Placeholder text to "Enter your name".
Drag and drop a Button component from the component library on the left-hand side into the canvas.
Change the Label on the button in the PROPERTIES tab of the button component to “Upload your Invoice”.
Drag and drop an Image component into the canvas.
Switch to VARIABLES view.

In Variables view, you can create variables which can store information temporarily.
Create an App variable by clicking on ADD APP VARIABLE and rename it to "name".
Add another App variable and rename it to "Invoicescan".
Change the Variable value type of Invoicescan to Local filesystem path.
Add another App variable and rename it to filename.
Switch back to VIEW.
Under the PROPERTIES tab of the Input field component, open the binding menu for Value by clicking on the "X" icon.
The binding menu will pop-up. Select Data and Variables.
Select App variable.
Select name in the list of App variable available.
Click on the SAVE button to save the binding to the component value.
A variable can be binded to this image component. Open the binding menu of the Image component under PROPERTIES on the right-hand side.
The binding menu will pop-up. Select Data and Variables.
Select App variable.
Select Invoicescan under the list of available app variables and click on SAVE to save the binding to the Image component.
Drag and drop another Button component from the component library into the canvas and rename the Label to Submit.
The Submit button should be visible only after the invoice is selected. Click on ADVANCED PROPERTIES to change the visibility properties of the button. Open the binding menu for the visibility properties.
Select Formula.
In the formula bar enter the following formula:
```
IF(IS_EMPTY(appVars.Invoicescan),false,true)
```
This formula checks if the InvoiceScan page variable is empty, then the output will be false and component will be disabled. If the InvoiceScan page variable has some value, the output will change to true, and the component will be displayed.

Click on SAVE.
Click on SAVE.
Click on SAVE on the top right corner to save the UI created so far.

Data Connection

Now, your application will be connected to Document Management System and SAP Process Automation. First, you should enable BTP authentication to connect your app to SAP Process Automation via Destinations.

Choose AUTH tab on the top of the screen.
Select ENABLE AUTHENTICATION.
Select SAP BTP authentication.
Click on the OK button to enable the BTP authentication to your application.
Click on DATA tab.
Under SAP AppGyver classic data entities, click on CREATE DATA ENTITY and select SAP BTP destination REST API integration.
As the BTP destination name, select AppGyver_SPA.
Under Data resource name, a name can be given to this data connection, like "SendtoSPA".
Under Resource schema, click on + ADD NEW to create a schema. Name the new schema to "filename" and select the Field type as Text. Choose ADD.

Schema is structure of the data. A schema is created which is similar to the Data base. In this scenario the data base is Document Management System (DMS), and schema should be created matching the schema in DMS.
Similarly, add three other schema with the following names:

"foldername"
"employeename"
"employeemail"

Select the Field type for all of them as Text.

Select the create tab, and enable it.
Open the binding menu for Request headers by clicking on the X icon.
In the binding menu, select List of values.
Click on Add value, and enter the following values:
- Header name: Content-Type
- Header value: application/json
Click on SAVE.
Request body mapper value will be binded after creating the process using SAP BUILD PROCESS AUTOMATION.

Click on SAVE DATA RESOURCE. The connection between your Application and Process is created using Destinations.
Add another data entity to store the invoice in Document Management Service.

For this data connection, Destinations are not used because, the response from Document Management Service is in XML format. AppGyver can only read JSON responses.
Because of this reason Document Management Service is connected using DIRECT REST API.

Click on CREATE DATA ENTITY and now select REST API direct integration.
In the BASE tab of the API configuration enter the following values:

Resource ID : Documentupload
Resource URL: https://end-to-end-demo-lcnc-trial.integrationsuitetrial-apim.eu10.hana.ondemand.com/end-to-end-demo-lcnc/httpjsonv2/docrepouploadteched

Select the CREATE RECORD tab and enable it.
Switch to the SCHEMA tab.
Under Create record (POST) request schema use the drop down list and select Custom schema.
Click on ADD PROPERTY. Rename the Key in PROPERTIES to “base64”.
Add another property and rename it to “fileName” and click on SAVE DATA ENTITY.
Click on SAVE on the top right corner of the screen.

Create Logic for Upload button

Go to the UI CANVAS. Select the Upload your Invoice button and click on the grey bar on the bottom to open the logic composer.
By default, the trigger event will be Component tap.
Now you will download a new component from the MARKETPLACE.

MARKETPLACE contains hundreds of pre-built visual and logic components, which can be installed and used with minimum or no customization. Find more information on MARKETPLACE here.
Click on the MARKETPLACE search bar. You may search for “pick image”. Select the Pick image from library component.
Click on INSTALL to install the logic component in the library.
Drag and drop the Pick image from library under the INSTALLED tab into the logic canvas. Connect output node of the Component tap logic component with the Pick image from library component.

To do so, click on the node of the Pick image from library component. Now pull the node, creating a line that you can link to the node of the Component tap logic component.
From the CORE tab of the component library drag and drop the Set app variable component into the canvas. In the same way, connect the node of the Pick image from library component to the Set app variable component.
In the PROPERTIES tab of the Set app variable, select the variable Invoicescan.
Open the binding menu for Assigned value.
Select Output value of another node.
You can see the available nodes in the canvas. Select Pick image from library node. A list of outputs from node will appear. Select path.
Click on SAVE.

Create Logic for Submit button

Select the Submit button and click on the grey bar on the bottom to open the logic composer.
You will download a new component from the MARKETPLACE.
In the search bar, search for “base64” and select Convert file to base64 and install it.
Drag and drop Convert file to base64 into the logic canvas.
Connect the nodes of Component tap and Convert file to base64. Open the binding menu for Source file URL of the Convert file to base64 logic component.
In the binding menu select Data and Variables and select App variable.
Select Invoicescan and click on SAVE.
From the CORE tab, drag and drop Set app variable component from the component library and connect the node with Convert file to base64.
In the PROPERTIES tab, make sure the variable is filename, and now open the binding menu for the Assigned value.
Select Formula in the binding menu.
Open the formula editor. Select App variables and double click on appVars.name to use the function.
Add the following values.
```
+TIMESTAMP()+".png"
```
The overall formula will look like the following:
```
appVars.name+TIMESTAMP()+".png"
```
Click on SAVE.
Drag and drop Create record logic component into the logic canvas and connect the nodes with Set app variable component. In the PROPERTIES tab of the logic component check if the Resource name is Documentupload. Open the binding menu of Record properties.
In the binding menu, select Object with properties.
Open the binding menu for base64.
In the binding menu select Formula and open the formula editor. In the formula editor, enter the following formula:
```
REPLACE_ALL(outputs["Convert file to base64"].base64,"data:image/png;base64,","")
```
Click on SAVE button.
Open the binding menu for fileName.
In the binding menu, select Data and Variables and select App variable. Select the variable filename and click on SAVE.
Save the bindings.
Drag and drop another Create record logic component into the logic canvas and connect the nodes with Create record component. Change the Resource name to SendtoSPA. Open the binding menu for Record properties.
In the binding menu, select Object with properties.
Open the binding menu for filename.
In the binding menu, select Data and Variables, then choose App variable and finally the variable filename.
Click on SAVE.
The folder name will be static, enter the value “Invoices”.
Open the binding menu for the employeename.
In the binding menu, select Data and Variables. Select App variables and then choose name.
The employeemail will be static, enter the email provided to you "[email protected]". For example: "[email protected]"
Save the bindings.
Drag and drop a Toast component.

This component displays a message.

Connect the nodes of the Create record component to the Toast component. Under the properties of the Toast component, enter "Your Invoice has been submitted" as the Toast message.
Save your work.