Using BTP Authentication and Destinations with SAP AppGyver *and deploy it to BTP
Maybe some of you experienced that it was not very easy to access SAP data sources with 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
- SAP AppGyver service running on this BTP account (Guide to run the booster)
- 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 AppGyver Project.
Now the new project is created. To consume BTP destinations in SAP AppGyver, we go directly to the AUTH tab at the top of the UI and click on Enable Authentication.
And now select SAP BTP authentication.
Confirm with OK.
SAP BTP Authentication is now enabled. What does that mean:
An additional page is added to your AppGyver project, 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 (you will need SAP Mobile Services on your BTP subaccount for it).
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:
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.
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.
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.
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.
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.
Install the new component by clicking INSTALL.
Now drag & drop the component into the 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.
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.
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”.
With the new BTP Authentication and Destination support in SAP AppGyver, 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: