To allow you to focus on the key aspects of the integration, you will upload a project that is almost complete and you will configure the authentication and data integration. You will then preview the finished application and test that it is working as expected. Optionally, explore the implementation of the application.
Open the SAP Build Apps link if you have it already bookmarked. Otherwise, open it from the SAP BTP cockpit:
-
Open the SAP BTP cockpit, and navigate to your subaccount.
-
From the left-side of your subaccount menu, navigate to Services → Instances and Subscriptions.
-
In the Subscriptions tab, find SAP Build Apps and choose Go to Application.
-
If you are presented with a login screen, log in using your custom identity provider credentials.
Result: The Lobby of SAP Build Apps opens.
-
Download the template file.
-
In the Lobby, choose Import.
-
Choose Browse and select the template file.
-
Choose Import.
-
Select the project to open it in App Builder where you will finish configuring the application.
To consume data from your SAP backend system, which you configured as a destination in SAP BTP in the previous section, you need to enable authentication.
-
Choose AUTH at the top section of SAP Build Apps.
-
Choose Enable Authentication.
-
Select SAP BTP Authentication and choose OK. This enables authentication for the project.
To add a data source, you need to add the following steps to your project:
-
Choose the DATA tab at the top of SAP Build Apps.
-
Find the No systems integrated section and choose Add Integration.
-
On the next screen under SAP Systems, select BTP Destinations.
-
From the list of destinations, select the DWCMISSION_FARMTANKS destination that you have created earlier.
-
Choose Install Integration.
-
Under the Data entities, select Tanks, and then choose Enable Data Entity.
-
Select TankVolumes, and then choose Enable Data Entity.
-
Choose SAVE at top of the SAP Build Apps. This adds the data source to your project.
-
Choose BROWSE REAL DATA for each entity to see the data that you will be working with.
-
Choose UI Canvas to go back to the UI designer view.
If the application is behaving correctly, you can deploy it in the next step. Preview the application and test it.
-
Choose LAUNCH.
-
Choose OPEN PREVIEW PORTAL.
-
Choose Open web preview.
-
Select the application you have created.
The application is launched in the preview portal. Although it is a Web application, the UI is designed for mobile devices. You can get a better impression of how it would look on a phone or tablet if you resize your browser. In Chrome, for example, the Developer tools (F12) allows you to choose dimmensions corresponding to a specific device.
-
Choose Enter Tank Volume.
-
Enter values in the mandatory fields (marked with *), for example, T088, 100, Mbl, and choose Save.
-
Choose View Volume Details.
-
Choose the topmost tank to see its readings. You should see the entries that you have made.
-
Choose a record and then scroll down to the map to see the corresponding marker.
-
On the top left section, choose the name of your current page Home page, which is highlighted in light blue to open the page menu of SAP Build Apps.
You can see the pages of the application. This is where you select the page you want to work on.
-
Choose the Home page to go back to it.
On the UI canvas in the center of your screen, there are standard components (Title, Text, and two Buttons) that have been dragged from the CORE tab on the left of your screen.
-
Choose Enter Tank Volume.
Its properties are visible in the page on the right of the screen.
-
At the bottom of SAP Build Apps where you can see Add logic to BUTTON 1, choose the arrow to open the logic canvas.
The Open page component has been dragged to the canvas from the CORE tab and conected to the Component tap component.
-
Choose the Open page component to see its configuration in the PROPERTIES section.
On the UI canvas in the center of your screen, there are standard components (Title, Text, Dropdown field, three Input fields and two Buttons) that have been dragged from the CORE tab on the left of your screen.
-
From the UI canvas, choose the toggle button to switch from VIEW to VARIABLES.
-
Choose APP VARIABLES on the left side of SAP Build Apps.
The current_tankid application variable is available on all pages.
-
Choose PAGE VARIABLES on the left side of SAP Build Apps.
The pv_ndr_tankvolumes page variable is only available on this page and is used in the binding of the UI components to receive the user's input.
-
Choose DATA VARIABLES on the left side of SAP Build Apps.
A data variable is essentially the same as a page variable that exists in the context of the current page that is not accessible from other pages. The difference is that it gets its schema from the data resource it points to, and it comes with included default logic.
-
getTanks is filtered so that only the tanks that require manual registration are returned.
-
NewdrTankVolumes is for a new record and has no logic associated with it.
-
-
Toggle back to the VIEW mode.
A Page mounted event fills the pv_ndr_tankvolumes.tank_id page variable with the current_tankid application variable if the application variable is not empty.
-
At the bottom of SAP Build Apps where you can see Add logic to REGISTER TANK VOLUME when you select the page, choose the arrow to open the logic canvas.
The If condition evaluates the formula LENGTH(appVars.current_tankid.id) > 0 and is followed by the Set page variable component.
-
Select the dropdown field.
On the right side PROPERTIES section, the Option list uses the getTanks data variable as the source data and the Selected value is the pv_ndr_tankvolumes.tank_id page variable.
-
Select each Input field in turn. Each Value is bound to the corresponding value from pv_ndr_tankvolumes.
-
Choose View Volume Detail.
On the Logic canvas the Set app variable component resets the application variable before the Open page component navigates to Tank Details.
-
Choose Save.
On the Logic canvas, the Set data variable component sets NewdrTankVolumes with the values pv_ndr_tankvolumes and uses the function NOW() to provide a timestamp. The Create record component creates a new record in TankVolumes using the NewdrTankVolumes data variable. After saving the changes, the Set page variable component clears the page variable.
In the Properties panel, the Disabled property is determined by a formula that evaluates to true if any of the mandatory fields is empty.
On the UI canvas in the center of your screen, there are standard components (Two Texts and a Button) that have been dragged from CORE tab on the left of your screen. The Collapsible grouped basic list and Embedded map view (beta) have been installed from the marketplace and then dragged onto the canvas from the INSTALLED tab.
-
Select the button. On the Logic canvas, see that it navigates to the Register Tank Volume page.
-
Select the Collapsible grouped basic list to see its configuration in the PROPERTIES section.
Unlike the basic components, this components can consume a Data resource without the need for a Data variable. The data entity used here is TankVolumes. The Field Configuration is as follows:
- content LOOKUP(source.record, "VOLUME") + " " + LOOKUP(source.record, "UOM")
- groupBy TANK_ID
- id TANK_ID
- label COMMENT
- title FORMAT_DATETIME_LOCAL(LOOKUP(source.record, "TIME_STAMP"), "DD.MM.YYYY")
Under Properties → OPTIONAL, as sort option for the timestamps in descending order has been configured.
On the Logic canvas, the Set data variable component sets the current_tankid app variable to the value of the id of the Most recently tapped item.
-
Select the Embedded map view (beta) to see its configuration in the PROPERTIES section.
On the Logic canvas, the Set data variable component sets the pv_latitude and pv_longitude page variables to the values from the onPress event. These variables are used to set the Your location marker on the map.
You have now a working application that can be used to read and write data to the backend system. In the next exercise you will deploy it as an HTML5 application in SAP BTP.