Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
MarcHuber
Product and Topic Expert
Product and Topic Expert
Motivation

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

Prerequisites:

  • Access to an SAP Business Technology Platform Account

  • SAP Build Apps 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


 

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 Build an Application and afterwards Web & Mobile Application.


Lobby


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.


Authentication


And now select SAP BTP authentication.


SAP BTP Authentication


Confirm with OK.

Enable Authentication


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


Authentication enabled


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


Add Integration


Select BTP Destinations


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.


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 Browser


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.


Component Market



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.


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 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 preview


 

 

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.



 

Conclusion

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.

 
52 Comments