Consuming SAP with SAP Build Apps - Connectivity options for low-code development - part 1

[LudoNoens]

Updated: 16 August 2024 - Updated setup steps for SAP HANA Cloud, added link to blog post covering SAP Build Apps booster, included update on sample data and use of Joule for generating data.

Updated: 1 August 2024 - Removed the step to enable SAP BTP Authentication, as this is now enabled by default in SAP Build Apps.

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:

1. CAP-based services
2. S/4HANA systems
3. 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

In this blog series we will use some of these options.

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. In some cases I will make use of SAP Joule to further enhance the development experience. But these are not a mandatory features. 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:

1. 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:
   1. Booster: Get Started with SAP Build Apps - Detailed Account Setup
      For a more detailed explanation on this booster, please check my blog post The best way to subscribe to SAP Build Apps is through a BTP Booster. 
   2. Booster: Get started with SAP Build Code (or SAP Business Application Studio)
      When applying this booster, please take note of the following:
      
      1. You will need to apply this booster to the same subaccount you've created just now with the SAP Build Apps booster.
      2. 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.
      3. 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.
   3. 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)". Please add the service entitlement for SAP HANA Schemas & HDI Containers, plan "hdi-shared" as well.
   4. Create a SAP HANA Cloud instance via the Service Marketplace and make sure to select the plan called "tools".
   5. Assign the SAP HANA Cloud Administrator role collection to your default idp user. Sign out of your BTP account, and sign in again to ensure the role collections are active for your user.
   6. 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 add an instance mapping in the last step (Advanced Settings). For the environment type Cloud Foundry, select the Environment Instance ID and Environment Group (your space) from the drop down menu.
      
      
      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.
      
      
      
2. 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 (note: use lower case) and name for the dev space.

   Within a couple of minutes, 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.
   
   
   
   
3. For creating the data model, first we create a namespace.
   
   
4. 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:
   
   
5. 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. We will be able to enable draft editing in a future update, as also on the CAP side we are working on handling the requests from SAP Build Apps (and others).
   
   
   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.
6. Going back to the Storyboard, select the Products entity in the Data Models and select Add Data.
7. For the Products entity, enter a number in the field to generate some sample data for product names and prices. Take note that there two types of data:
   1. Sample data. This data is used for testing and demo purposes and will only be used when previewing the service or application within the SAP Build Code environment. This data will not be deployed to a productive environment.
   2. Initial data. This type of data is used for initial configuration data and data for code lists.
      
      For initial data, we will the following:
      
      

      For sample data, we create a table with 25 items:
      
      

      

      In case you are using SAP Build Code with Joule enabled, you can actually generate a nicer list of sample data. Hit the Enhance button and use the follow prompt:
      
      /cap-edit-data #test/data/blogproducts-Products.csv Generate sample data for an electronics shop

      

      Not sure with which currency Joule is working, but this is good enough for sample data.
      
      Accept the proposed data.
      

      

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:

1. 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.
   
   
2. Select Deploy Project from the popup menu. This will trigger the creation of an MTAR archive, used to deploy with the MTA tools.
   
   
   Alternatively, you can find corresponding tasks in the task explorer
   
   
3. 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.
4. 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 initial 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:

1. xs-security.json
2. package.json
3. 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 “blogseries-blogproductssvc” shows:

A few things to note here:

1. 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. 
2. 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.
3. 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”.

Alternatively, you can find the corresponding task in the Task Explorer.

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 CAP 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 Build Lobby).

From here, create a new project by selecting the "Create" button, followed by selecting "SAP Build Apps".

Select "Web & Mobile Application".

Provide a project name.

This will open your newly created project in SAP Build Apps.

The generated application will have BTP Authentication enabled out-of-the-box, including a dedicated page for handling the authentication.

We will now 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.

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