Maybe some of you experienced that it was not very easy to access SAP data sources with SAP Build Apps (formerly SAP AppGyver) because of some CORS issues (Cross-origin resource sharing (CORS) protects your backend by allowing only the allowed domains to access your system).
Additionally, weren’t you also looking for an easy built-in authentication for your app?
Then you should read this blog. I am going to show you, how you can enable the new SAP BTP authentication feature in AppGyver and also how to use BTP destinations as data sources for your app:
With the SAP BTP authentication, a log on page is pushed automatically in front of your app which checks for the credentials of the end user of the app
The BTP destinations as new data sources allows you to easily consume data coming from any cloud or on-premise SAP system
Update 27.07.2022 - I also added guide how to deploy the app to BTP
Access to an SAP Business Technology Platform Account
A configured destination on this BTP account and also access to this destination. The destination needs the property DynamicDestination=true and WebIDEEnabled=true
We are accessing the Low Code / No Code (LCNC) entry point called ‘Lobby’ on the BTP account to create a new AppGyver project by clicking the Create button and select Build an Application and afterwards Web & Mobile Application.
Now the new project is created. To consume BTP destinations in SAP Build Apps, we go directly to the AUTH tab at the top of the UI and click on Enable Authentication.
And now select SAP BTP authentication.
SAP BTP Authentication
Confirm with OK.
SAP BTP Authentication is now enabled. What does that mean:
An additional page is added to your SAP Build APpsproject, which will be automatically opened if a user opens your app. This page checks the credentials of this user coming from the SAP BTP account. After a successful logon the initial screen will be closed automatically. You don’t have to do anything further on this page. Currently, only web apps are supported by the SAP BTP authentication. Mobile apps will be coming soon.
Additional Page added automatically
Now we have authenticated BTP and can use BTP destinations as data sources. Of course, you need the necessary rights to access destinations. These rights can be typically provided by an IT administrator. Additionally, the destinations needs the property HTML5.DynamicDestination=true and WebIDEEnabled=true. If this property is missing, you will receive the following error message:
Missing destination property error
If you have the necessary rights and the destination is configured correctly, the data can now be accessed by clicking on the DATA tab and selecting ADD INTEGRATION
Select BTP Destinations
Now a list of all your destinations from your subaccount should appear. You can also use the search field to find the destination of your choice.
List of destination from your subaccount
Select the destination you want to use. Now you will get an overview of all data entities on the left side of this destination. On the right-hand side, you will see all capabilities and fields of this specific data entity.
Data entities of the destination
We are going to install the data source by clicking INSTALL INTEGRATION.
Let’s have a look on the data from on entity. In my example I use the email addresses of the business partners coming from a S/4 HANA Cloud system. We will use the Data Browser to preview the data.
This will show us a preview of the data and if we really want to use it in our app.
Preview of the data with the data browser
The data seems to be right for our app, so we will enable this data entity by clicking ENABLE DATA ENTITY.
That’s it! Now we can use the Business Partner Data in our App.
Data entity enabled
To display the data we will use the component “scrollable basic list” from the component market. There close the data tab and search in the component market for the list.
Scrollable Basic List
Install the new component by clicking INSTALL.
Install scrollable basic list
Now drag & drop the component into the UI.
Drag and Drop list to UI
Last thing we have to do is to bind the data from the BTP destination to the component. Click on Configure on the properties page.
Configure the data binding
And select the data resource.
Now drag & drop the fields you want to use in the basic list. Afterwards click Save & Exit. We have connected our data to the basic list.
Map the fields
That’s it. Now you can preview your app. Click on the LAUNCH tab and preview the app on the web preview portal.
Update 27.07.2022 Deploy the AppyGver App to BTP
In the Launch Tab go to DISTRIBUTE and open the Build Service
Now you have to configure the web app.
Select any AppGyver Hosted Domain and select build scheme "MTAR" during the configuration.
After you have finished the configuration, press the BUILD button
Select File Type MTAR, define a version like 1.0.0. and press the build button.
After 10-30 minutes your MTAR should be available for download. Press the download button.
Now go back to the lobby and create an empty Business Application Studio Project. Choose a name of your choice. The initial set up of the BAS project can take some minutes.
Now just enable the explorer.
And drag&drop your AppGyver mtar to the project.
Open a new terminal
Run the command "cf login" and log in you Cloud Foundry space.
Afterwards just run the command "cf deploy yourmtar.mtar".
That's it. Now you should see your AppGyver app in your HTML5 applications on your BTP subaccount.
With the new BTP Authentication and Destination support in SAP Build Apps, we have an easy way to create a secured app which can consume data from any SAP systems with a few clicks. Additionally with these features we can use it as a great governance feature that IT administrators can control which data sources (destinations) are available for the citizen developers.
You can also find the whole setup process in this video:
Do you want to learn more:
Find out how to build software applications, side-by-side extensions, and integrations from and to cloud applications by exploring SAP’s free learning content on SAP BTP. It is made for both integration designers and extension developers from all levels of expertise and will help you stay up to date with the latest SAP BTP innovations. Check out even more role-based learning resources and opportunities to get certified in one place on SAP Learning site.