Using BTP Authentication and Destinations with SAP AppGyver

Motivation

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

Prerequisites:

  • 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

Getting Started

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.

Lobby

Lobby

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.

Authentication

Authentication

And now select SAP BTP authentication.

SAP%20BTP%20Authentication

SAP BTP Authentication

Confirm with OK.Enable%20Authentication

Enable Authentication

SAP BTP Authentication is now enabled. What does that mean:

Authentication%20enabled

Authentication enabled

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).

Additional%20Page%20added

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. If this property is missing, you will receive the following error message:

Missing%20destination%20property%20error

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

Add%20Integration

Add Integration

Select BTP Destinations

BTP%20Destinations

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%20of%20destination%20from%20your%20subaccount

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%20entities%20of%20the%20destination

Data entities of the destination

We are going to install the data source by clicking INSTALL INTEGRATION.

Install%20Integration

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.

Data%20Browser

Data Browser

This will show us a preview of the data and if we really want to use it in our app.

Preview%20of%20the%20data%20with%20the%20data%20browser

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%20entity%20enabled

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.

Component%20Market

Component Market

Scrollable%20Basic%20List

Scrollable Basic List

Install the new component by clicking INSTALL.

Install%20scrollable%20basic%20list

Install scrollable basic list

Now drag & drop the component into the UI.

Drag%20and%20Drop%20list%20to%20UI

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%20the%20data%20binding

Configure the data binding

And select the data resource.

Data%20source

Data source

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%20the%20fields

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.

App%20preview

App preview

Conclusion

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.