Technical Articles
Using BTP Authentication and Destinations with SAP Build Apps (formerly AppGyver) *and deploy it to BTP
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”.
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.
Hi Marc,
Very good to see that the long awaited authentication and destination capabilities are now available with AppGyver. I have a couple of questions:
1. Which identity provider does the Authentication feature integrate with for obtaining the user information? I am assuming it is the identity provider configured in the trust configuration of the subaccount to which the AppGyver app has been deployed. Is that right?
2. Are there any prerequisites for using the Destination feature of AppGyver, such as whether the communication protocol is REST or SOAP? This is relevant for use cases such as integrating an AppGyver app with S/4HANA Cloud which provides both REST and SOAP based APIs.
Thanks,
Mustafa.
Hi Mustafa,
Best regards,
Marc
Hi Marc,
Can you please let me know if only OData APIs can be used with destinations and not REST APIs or is there any other configuration to mention the destination I want to use when I try to make a direct REST connection ?
Thanks and Best Regards,
Rama.
Can I use S/4HANA on-premise destination?
When I do I get a red circle saying "Destination Unavailable" -- I assume this has nothing to do whether AppGyver can reach the system since (1) I have set up the destination correctly; (2) I have set up a bogus S/4HANA Cloud destination without a proper user ID and AppGyver still goes to the next page (it still cannot see any data and says invalid format)
Hi Daniel, today I got the same error with a red circle saying "Destination Unavailable" in my BTP authentication. Any luck finding the cause and solution?
Make sure your destination is pointing to an odata service and that it is actually connecting
Thanks it worked😃 My destination was pointing to the general system URL(BTP ABAP Environment) so changed that to specific OData and then created communication arrangement for that.
One thing I struggled with was that, for some reason, having WebIDEUsage='xxxx' in the property interfered with BTP authentication in APpGyver and kept giving me error. After it's removed, it finally worked.
Strange … you set it to true?
It’s WebIDEUsage I had trouble with. I had it because I thought I needed it but it turns out caused problem.
WebIDEEnabled=true is set in the destination to make it work.
Sorry I got the ENabled and Usage mixed up ... yes for AppGyver you do not need to set Usage, but you have to set Enabled to true. If there are conflicts between what you need for Usage and what prevents AppGyver from seeing such destinations, worth reporting the issue.
Just a note, maybe this is obvious, but it seems destinations need to have WebIDEEnabled = true to appear in AppGyver list of destinations
yes, you need to set the properties DynamicDestination=true and WebIDEEnabled=true in the properties of the destinations
Please see a video as well: BTP authentication and destinations for AppGyver
I've been trying to setup a Northwind destination to try this out, but I get an "Incompatible Format" when I try to add as a BTP Destination
These are my settings:
Name: Northwind
Type: HTTP
URL: https://services.odata.org
Proxy Type: internet
Authentication:NoAuthentication
AppgyverEnabled: true
HTML5.DynamicDestination: true
WebIDEEnabled: true
Use default JDK truststore is checked
Northwind Destination Settings
Next time make this a question so I can get another question answered
AppGyver (currently) is expecting an OData service from the destination, so that when you specify the destination it will read the metadata and show you what entities you can select to be exposed in your app. So for Northwind that would be:
This URL gives some metadata and AppGyver can add $metadata to get more.
If you just use base URL, you get some stuff specific to Northwind site and AppGyver is lost:
Wonderful news!!! Previous integration wasn't easy.
I've followed your instruction and everything worked!
But if I go to to the appGyver preview app in the mobile device I've got an authentication message error.
authentication error
I've reinstalled the app (just to have the last version). But the error is still there.
To login in into the App I've chosen the BTP option and I've scanned the QR code.
What am I doing wrong?
Thank you very much
Mobile Apps are not supported at them moment, only web apps. But this feature will come soon.
any news about BTP Destinations and Mobile Apps?
Thanks a lot
Hello Marc,
Does any update from BTP Authentication on Mobile Apps?
Thanks in advance.
In the queue to understand if there is any new about.
There is nothing about in the road map
SAP Road Map Explorer SAP Build Apps
re-pinging on this, also to Daniel Wroblewski, as this is a major awaited feature for connecting mobile apps to existing backends!
is there any current state to share from the both of you?
I have no update (I'm not in PM or development 😺) but I'm sure there will be a big announcement you won't miss when it is available.
Please also see https://blogs.sap.com/2022/07/05/my-first-steps-with-btp-destinations-s-4hana-in-appgyver/ to learn:
Hey Marc Huber ,
could you also add the steps to export and deploy to BTP CF?
Thanks
Hey Jan,
thank you for the feedback. I will update the blog post.
In summary 3 steps are necessary at the moment to deploy the app to BTP.
Dear Marc,
Can you please help me with this, my destination are reachable but still this error.
Regards
Naveen Jain
Hi Naveen,
I guess you try to access https://services.odata.org/
If you change it to https://services.odata.org/v2/northwind/northwind.svc/ in your destination it should work.
Best regards
Hi Marc,
I'm currently looking into this and was wondering, whether it's possible to figure out which user is currently logged in, so the endpoints can be filtered? Also, is it possible to consume endpoints with parameters (like the ones described here: https://cap.cloud.sap/docs/cds/cdl#exposed-entities)? They show up in the list for me, but don't seem to work correctly, with AppGyver considering the parameters as the schema of the view.
Best regards
Fabian
Hi Fabian,
at the moment it is not possible to figure out which user is currently logged on. But we are already working on a solution. CDS is not supported yet, we only support native ODATA at the moment. But this topic is also on our roadmap.
Best regards,
Marc
Thanks for adding the deployment instructions as well.
What's the intended way to make the HTML5 applications avaialbele to the app users? I assume primarily it's via Fiori Launchpad service in BTP. I added the AppGyver app deplyed to HTML5 applications but on the launchpad, it loads forever and does not return the app content.
Is this the expected behaviour or is it not ready for Fiori Launchpad yet?
Best regards, Aocheng
I found a workaround. In the Fiori LaunchPad service, incorporating the Appgyver app as HTML5 content provider from the content manager will result in my problem above.
Instead, create a new app in content manager in Fiori LaunchPad service and use direct URL access instead of saas_approuter. Include this app in the tile group of the launchpad site and it displays my Appgyver app now.
Hi Marc,
I have an AppGyver app conected to the Service Layer via Destinations to create and list the items entity, everything works as expected when viewing the app on the preview page that AppGyver provides us.
But when building the app and deploying into cloud foundry following your guide, I have this error.
Also the configuration for the destination is properly configured for AppGyver.
Any ideas? thanks in advance.
Hi Marc,
How do we pass "$expand" to OData service call using BTP destination, or how do we access NavigationProperties for binding in AppGyver?
Thanks,
Prashant
Hi Prashant,
Did you get any solution for this?
I am also looking for the $expand implementation in AppGyver.
Thanks Marc, great blog post. Appgyver is indeed a great tool full of potential.
If you are struggeling with destinations and get a "Destination unavailable" error in AppGyver, one reason could be that the character "_" is not allowed in the virtual name of a destination.
(See SNOTE 2569471 - URI does not specify a valid host name error occurs when checking the connection of a destination)
Hi Marc,
We have a requirement where we want to authenticate the user and check his scope to see if he accesses the resource. Is it possible with BTP destination or just for destination access only?
Kr,
Jay
Hello Daniel Wroblewski
We want to connect the SAP ABAP on cloud environment with SAP Build. We are getting the 302 error message? The same destination is working in BAS application.
Thanks
Nishant
Where are you getting this 302 status code? Screenshots? More info?
Generally, 302 is just a redirect message so you should still get your data. When testing destinations, in BTP you will often get this status code but the destination is fine
Hello Daniel Wroblewski ,
I am getting 302 error in the Integration screen. I don't see the next screen where I can see all the services. BTP Authentication is already completed.
Do you have reference configuration of ABAP On cloud destination which is successfully connected to SAP Build ?
ABAP On cloud destination Error
Thanks
You need to set up the destination to return a single OData service. So for example, the URL to sales order service would be:
https://myserver.s4hana.ondemand.com/sap/opu/odata/sap/API_SALES_ORDER_SRV
For now, you cannot define a single destination that will then display all the services available. I imagine at some point there will be integration with SAP Graph and this will solve this issue (no promises)
Hello Daniel,
Below is the setup for the ABAP On cloud service destination in the BTP. If I give the full service URL then it is not authenticate by client ID and secret key, I need to pass the username and password and it is not available at ABAP on cloud Level. Any idea ?
ABAP on cloud
Can you try to make a connection with REST connector in SAP Build Apps -- you would lose the benefit of the OData connector but at least we can see that it works.
Hi Nishant,
Were you able to resolve this ? I am also stuck here.
Thanks,
Anurag
Hello Anurag,
Yes I am able to solve it. Basically you need to expose the particular oData service. It means for each oData service you have independent destination.
testing
Hello @Daniel Wroblewski,
I think we can get all the OData services into Build Apps with a single Destination by using "APS_ODA_API_CONTENT_SRV - Open Discovery API Content"
Below are the steps:
What do you think?
Kind regards,
Venkat Vyza
Sorry for the delay ... I will try to find time this week to test out. Can this be done with S/4HANA Cloud?
Almost have it from onpremise S/4HANA but I get this:
I'm fairly certain I have permission to some OData services ... not sure where the problem is.
Hi Daniel Wroblewski ,
Thanks for trying this.
My assumption is that this specific OData Service "APS_ODA_API_CONTENT_SRV" might have not been implemented in your backend system. Please click on F12 and see if there is an error message something like "Failed to load resource...."
By the way, the error you got, per your print screen, confirms that technically it's possible to get all the OData services with a single destination. In fact, it tried to fetch all the SERVICES (NOT entities) for this Destination 🙂
Thank you,
Venkat Vyza
Can you explain what this service is? I don't see any reference to it on Google (except this question and 1 linkedin post). I'm assuming it's some service that has to be custom created to expose multiple services. If so, can you explain how you created it?
And I can fetch the BP service for example from this on-premise system, so why wouldn't the above work? Do I need permission to that catalog service? What user role?