This blog post is the first in a short series of posts that cover the connectivity options available for SAP Build Apps to interface with SAP systems. The series will cover connecting SAP Build Apps with the following:
- CAP-based services
- S/4HANA systems
- ABAP systems
The format of this post is similar to a tutorial. However, I'll provide more comprehensive details, tips and the opportunity for you to provide feedback. Based on the feedback we will be able to adjust and enhance this post and future parts of the series, and might even be able to improve the products involved as well.
Introduction
Before we get into the details of setting up connections between SAP Build Apps and SAP Systems, I intend to introduce a couple of SAP technology components in each post that are relevant for the use cases covered in the series.
BTP Destinations
The common building block for connectivity on the SAP Business Technology Platform is called BTP Destination. A BTP Destination is a predefined endpoint that enables you to connect to different cloud and on-premise applications and services.
For creating a destination, we have the following options:
- Using the Destinations Editor in the BTP cockpit
- Destination Service REST API
- Using the MTA Descriptor
- On Service Instance Creation
MTA
In the scenario described in this blog post, we will make use of a CAP service created in SAP Business Application Studio. Deployment of the service is done through an MTA (Multi-Target Application) deployment that allows you to deploy applications consisting of several modules. The MTA descriptor includes information about the destination to be created. Alternatively, we could also manually create a destination via the Destinations Editor available in the BTP cockpit.
Use case A : consuming a basic CAP service with SAP Build Apps
For this use case, we will create a very basic CAP project in SAP Build Code as a starting point (was SAP Business Application Studio using Productivity Toolkit). After the General Availability of SAP Build Code, I've decided to rework this blog post to reflect the latest commercial offering. Take note that I will keep the format of the blog post as much as possible unchanged. I will not make use of SAP Joule to further enhance the development experience, as the CAP service is pretty simple for this use case. Also, users who have access to SAP Business Application Studio (which does not include SAP Joule) should still be able use this blog post.
For those who want to follow along, here are the steps:
- To set up a tenant (subaccount) that has both SAP Build Apps, as well as SAP Build Code, please run the following boosters, in the order below, to ensure a custom Identity Authentication Service (IAS) is set up:
- Booster: Get Started with SAP Build Apps - Detailed Account Setup
- Booster: Get started with SAP Build Code (or SAP Business Application Studio)
- You will need to apply this booster to the same subaccount you've created just now
- This booster requires you to disable the Cloud Foundry environment that was already set up. You can disable the environment in the subaccount's cockpit overview page.
- Please make sure to remove the SAP Build Work Zone, standard edition - plan foundation from the list of entitlements that the booster intends to apply.
- In case you are not using a Trial account, and do not (yet) have access to a database for persistency of your app's data; please include the following steps:
Go to the subaccount's entitlements and add service entitlements for SAP HANA Cloud, plans "hana" and "tools (Application)". Also add the service entitlement for SAP HANA Schemas & HDI Containers, plan "hdi-shared". - Assign the HANA Database Admin role collection to your default idp user.
- Open the SAP HANA Cloud (plan: "tools") link to create a HANA database in SAP HANA Cloud Central. During the configuration of this database, you'll have to provide 2 important pieces of information:
- Environment instance id. This is your Cloud Foundry environment org id.
- Environment group (space id). One way of finding this, is by logging into your Cloud Foundry environment via the command line and running the command "cf space dev --guid".
The following subscriptions should be visible in the subaccount's cockpit after running both boosters. Note: this is assuming you have access to an enterprise account. Trial or free-tier users might see different plans here.
- Create a new project.
Go to the SAP Build Lobby by opening the link to SAP Build Code or SAP Build Apps in the list of subscribed applications.
Select the Create button to create a new project.
Select Build an Application.Select SAP Build Code.
Select Full-Stack Application.Provide a project name. Other items are optional.
In less than a minute, your cloud development environment is provisioned and the project is created. You can then open the development environment by selecting the link (project name).Alternative steps for SAP Business Application Studio subscribers
In case you don't have access to SAP Build Code, go to the SAP Business Application home page by opening the link to SAP Business Application Studio and create a DevSpace based on “Full-Stack Application Using Productivity Tools”.
Open the DevSpace and select “Create Project” in the Project Explorer.
Select the default “Full-Stack Project (Productivity Toolkit)” template, provide some basic project information (e.g. name BlogProducts) and click Finish. Your CAP project will be created and opened. At this point, the project and hence the storyboard are pretty much empty. - For creating the data model, first we create a namespace.
- add an entity called “Products”, with properties “name” and “price”.
The result of this, is the creation of the CDS file called schema.cds such as below: - Create a service based on this data model in the Storyboard. Make sure the name of the service is different from the namespace created above.
Select <your name space>.Products.
Make sure to disable draft editing. A service that supports draft editing allows end-users of the application to save draft versions of their entries on the server, so they can interrupt and continue later, possibly from different places and/or devices. UI applications based on Fiori Elements or MDK can handle draft editing. However, apps created with SAP Build Apps do not (yet) support this feature.
The result of the above steps is a CDS file called service.cds such as below:
As you can see, access to the service requires an authenticated user. This blocks anonymous users from accessing the service. In the next use case we will add access through Roles. - Going back to the Storyboard, select the Products entity in the Data Models and select Add Sample Data.
- For the Products entity, enter a number in the field to generate some sample data for product names and prices.
Note that we did not create any UI application until now. For testing purposes, we could add a UI application based on Fiori Elements or MDK. However, for our use case, we are going to build a UI application using SAP Build Apps.
Deploying the service to the cloud
We will now proceed to deploy the service onto BTP, by following the steps below:
- Go to the Project Explorer tab and select the 3-dots visible when you hover over the project’s name. This will show you the project actions available to you.
- Select Deploy Project from the popup menu. This will trigger the creation of an MTAR archive, used to deploy with the MTA tools.
- Before you can deploy the MTAR, you will be required to select the deployment target. For this, you’ll need to log in into Cloud Foundry, select the subaccount and the Cloud Foundry space where you want to have your service deployed.
- Once the target selection is applied, the MTA deployment will proceed. This can take several minutes to complete.
Once the build and deploy process succeeds, you will be provided with a URL to the project overview page. (https://<yourtargetsubaccount>.launchpad.cfapps.<yourtargetregion>.hana.ondemand.com/lcap<namespace.namespace>Launchpad-1.0.0)
Let’s try to open this in a new incognito browser tab. You will be required to sign in. Only authenticated users will be able to access the launchpad application on BTP.
When you click on the Products service’s ‘code’ button, you will see information about the OData context, and the sample data available in the service.
Current security configuration
During the deployment, some files were created that are related to the security configuration of your service.
In the File Explorer, you will find the following files in the project’s folder structure:
- xs-security.json
- package.json
- mta.yaml
In the subaccount's “Services > Instances and Subscriptions” list, you will find instances for:
In your BTP subaccount, you will also notice that the deployment process has created several Destinations that are defined in the mta.yaml file. Some are related to a UI application that we actually did not create, so please ignore those.
Checking the configuration of the destination “blogproducts-blogproductssvc” shows:
A few things to notice here:
- The destination is of type HTTP and using OAuth2UserTokenExchange for the Authentication method. This method allows for user token exchange within a single tenant (subaccount). This means our SAP Build Apps application has to run in the same subaccount to be able to authenticate with the data service.
- The token service URL type is dedicated. This is specified in the file xs-security.json and indicates that the token service URL serves only a single tenant.
- The properties AppGyverEnabled, MobileEnabled, sap.processautomation.enabled and WebIDEEnabled are set to false by default. This means applications like SAP Business Application Studio and SAP Build Apps will ignore this destination during discovery of potential services available for consumption.
Enable Discovery to SAP Build
In order to easily consume the service in SAP Build, we will need to reconfigure the destination. To help you with that, you might have seen an item in the popup menu where we had triggered the deployment.
Go back to the Project Explorer, click on the 3 dots behind the project name and select “Enable Discovery to SAP Build”.
The changes will only take effect after deployment. Hence, you are asked whether you want to deploy now. Click Yes to confirm this.
After deployment, the destination’s properties will be updated (you might have to reload the web page):
Using the service in SAP Build Apps
We will now move to SAP Build Apps and create a UI application on top of the CAP service we have created in SAP Build Code (or SAP Business Application Studio).
SAP Build Code subscribers: navigate back to the SAP Build Lobby.
SAP Business Application Studio subscribers: open the link to SAP Build Apps in the subaccount's list of subscribed applications. This will open the SAP Build landing page (aka Lobby).
From here, create a new project by selecting the "Create" button, selecting "SAP Build Apps".
Select "Web & Mobile Application".
Provide a project name.
This will open your newly created project in SAP Build Apps.
Before we try to add the data sources, we first need to enable authentication. Please select the “Auth” tab.
Select “ENABLE AUTHENTICATION”.
Select “SAP BTP Authentication” and select OK.
As a result, the current authentication method changes to SAP BTP Authentication, as shown below. This will also add an additional page to your app to handle the authentication.
After this, we will navigate to the Data tab, where we can see “No systems integrated”. Select the “ADD INTEGRATION” button.
Select SAP Systems, followed by BTP DESTINATIONS.
In the list, you will see the destination we have created and updated to make it visible here
After selecting the destination, you can browse the details. In this case, you will see the Products entity, its fields and capabilities.
We can browse the data stored in the service, and we can even add another record.
To use your destination in your application, select “INSTALL INTEGRATION”. Also select the button ENABLE DATA ENTITY. This will ensure you can use this data entity in your project. Remember to SAVE your changes.
Let’s create a simple UI application that shows the Products available in the service. On the UI CANVAS tab, toggle from VIEW to VARIABLES.
Select the DATA VARIABLES tab and select ADD DATA VARIABLE. Select the Products and provide a name for the data variable (in my case, I am using ProductsList). As data variable type, keep the default “Collection of data records” selected.
The list of products shown in your application will not automatically update once you add new products. In order to see an updated list after adding new products, please connect the EVENT “Page focused” to the DATA “Get record collection” in the logic canvas.
Switch the UI CANVAS back to VIEW and drag and drop a List item onto the canvas. Select the property Repeat with and select the ProductList.
Now that we have our initial app, let’s see how this runs. For this, we will use the Preview. Select the Launch tab and select Preview your app. Then select Open preview portal. This will make the app available in the preview portal.
There are two ways to consume the app available on the preview portal: using your PC’s browser, or via a mobile preview app you can download from the public app stores.
As an authenticated user, you should be able to preview your app and add more product records.
Note: In case you are using your mobile device, ensure you have selected the correct edition / region to login.
Summary – use case A
In this use case we have created a simple CAP-based service in SAP Build Code that only requires a user to authenticate with the platform to access the data exposed through this service. We have exposed the service to the platform users through a BTP destination and made it discoverable for SAP Build Apps. In SAP Build Apps, we have added an integration to the CAP service through the destination. The destination forms the bridge between the CAP-based service and the applications consuming it. This is an example of a fusion development use case, showcasing how developers with different skill sets and tools can work together to develop a full-stack apps.
What's next
In the next blog post, we will enhance the CAP-based service and introduce role based access control for the service. We'll also take a quick look at XSUAA, and how we to configure the custom IdP (IAS).
- SAP Managed Tags:
2 Comments
