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:
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.
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.
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,
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:
Proxy Type: internet
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.
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
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
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?
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.
Can you please help me with this, my destination are reachable but still this error.
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.
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.
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.
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.
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.
How do we pass "$expand" to OData service call using BTP destination, or how do we access NavigationProperties for binding in AppGyver?
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)
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?