Consuming SAP with SAP Build Apps - Web App in SAP Build Work Zone, standard edition

This blog post is the fourth in a 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.

SAP Build Work Zone

SAP Build Work Zone is a digital workplace experience that enables users to build and customise business sites that provide centralised access to business application information from any device.

Key capabilities are:

Quickly create corporate websites providing secure and central access for apps, tasks, notifications, information and communication.
Easily connect with SAP and third-party enterprise applications.
Provide a personalised and role-based user experience.
Provide an extensible framework for development, customisation and branding.

The service is currently available in 2 editions:

Standard edition – this is basically the same as what we previously called the SAP Launchpad service. This is the edition we will use in this blog post. It has a strong focus on integration of business applications.
Advanced edition – this is what we previously referred to as the SAP Work Zone service. It includes additional capabilities on top of what is available in the standard edition. The information in this blog post can be applied in this edition as well. You typically subscribe to only one edition. The advanced edition adds capabilities around workspaces, knowledge management and user engagement.

MTAR

A multitarget application (MTA) is comprised of multiple parts (also referred to as “modules”), created with different technologies and deployed to different targets, but with a single, common lifecycle.

A multitarget application archive (MTAR) is an archive that contains a deployment descriptor, configuration files, and module and resource binaries. The archive follows the JAR file specification. A JAR file is essentially a zip file that contains an optional META-INF directory.

An example relevant for the use cases in this blog series is an MTAR created in SAP Build Code that contains the Destination, a node.js based CAP service, and a HANA database deployment application for setting up the persistency layer. All are deployed during a single deployment action, for a specific version of the archive.

Use case D : Consume the CAP service with a web app provided in SAP Build Work Zone

For this use case, we will make use of the previously created basic CAP service in SAP Build Code. In the previous blog post, we have created dedicated mobile apps for the iOS and Android platforms to consume this service with SAP Build Apps. We will now use the exact same UI application to build and deploy a web application to SAP Business Technology Platform. After that, we will configure SAP Build Work Zone to provide access to the application.

Solution diagram

We will start with a quick look into what needs to change in our solution overview to accommodate for web apps. Building upon the solution diagram created earlier, we now add SAP Build Work Zone, standard edition. The design time environment of SAP Build Apps will deploy the web application to the HTML5 Application Repository service. The application is made available to end users through SAP Build Work Zone, which is configured separately. End users can access the web app from any device. The web app authenticates with the Identity Authentication service (IAS) and accesses data via a Destination. Only users who have the correct Roles assigned will be able to access the data provided in the CAP-based data service.

Building the web app in SAP Build Apps

As the application we have developed so far is actually a cross-platform app, we don’t need to change anything in the app itself. We simply need to build it for a different runtime. And for this, we will again make use of the cloud build service we have utilised in the previous blog post.

Starting in SAP Build Apps, navigate to the Launch tab and select Open build service.

Next, select CONFIGURE for the Web App.

For the Bundle Settings, select MTAR and click NEXT.

In the Image Assets tab, upload a 32 x 32 pixel icon image (PNG file) for the Favicon and click NEXT.

On the Plugins tab, you can add React Native plugins for your app. For our app you can see a few plugins have been selected by default, based on the functionality we have already added in the app. We can use the default selection in this case and click NEXT.

Now that we have completed configuring the web app build settings, select BUILD.

Select MTAR and the Client runtime version. Provide a version number for your application. Select BUILD.

Once the build is done, you will be able to download the MTAR file, or simply deploy the MTAR.

Select DEPLOY MTA.

Select the Cloud Foundry API endpoint of your target subaccount. In our case, we will use the same subaccount as the one we have set up in the first blog post of this series.

Once you’ve selected your target Cloud Foundry organisation and space, select DEPLOY MTA TO <your space name>

The deployment process will start and your web application will be deployed to the HTML5 Application Repository Service. You can track the progress in the logs.

Once the deployment finishes, the URL to your application will be shown.

When you try to open the URL, you are quite likely greeted with the message “Internal Server Error”. Looking into details in your browser’s developer tools, you can find a response code 500. This indicates something has not been set up correctly (yet). Not to worry … we’ll fix this in the following steps.

If your subaccount was correctly configured, then you should actually see the web app.

Provide access to the web app in SAP Build Work Zone

We are now going configure SAP Build Work Zone. There are multiple ways to access this. In the context of SAP Build, we can start from the SAP Build landing page. On the landing page, select the Create button.

What would you like to do ? Well, we’d like to Build a Business Site !

Select Configure Site in Admin Console.

Note that in the screenshot below the tile “Manage Workspages and Workspaces” is marked as ‘Not Subscribed’. This is because I am using the standard edition of SAP Build Work Zone, which was subscribed through the “Get started with SAP Build Apps” booster. If you have a subscription to the Advanced Edition, then this tile can be selected as well.

Alternatively, if you are not using SAP Build, you can configure SAP Build Work Zone by opening the link in your subaccount’s cockpit.

As prerequisite, please check whether your user has the Role Launchpad_Admin assigned.

Once configured (and you might need to log out & log in to activate that Role), navigate to the subscriptions and open the link to SAP Build Work Zone, standard edition.

SAP Build Work Zone configuration

Now, let’s set up a business site that includes our app. Select Create Site.

Provide a name for the Site and click Create.

Navigate to the Content Manager tab and select the Content Explorer button.

The Content Explorer will open.

Click on HTML5 Apps to see which apps have been deployed to the HTML5 Application Repository. You will see the app we’ve created in SAP Builds Apps. Besides that, you will also notice the Launchpad for the products service we’ve deployed from SAP Build Code. Select the app created and deployed with SAP Build Apps and click the Add button.

Going back to the Content Manager, select the Create button and create a new group. Give the group a name and assign the previously added app to the group.

Go back to the Content Manager and select the Everyone Role. Enable the previously selected app to be accessible for everyone. Note that this will give users access to the web app itself. Access to the data service is still limited to those having the Role we have configured in the second blog post of this series.

Resolving the “Internal Server Error”

And now for the previously mentioned 500 response code, resulting in “Internal Server Error”. This happens when the authentication mechanism for SAP Build Work Zone and SAP Cloud Portal service uses XSUAA, while your subaccount is actually configured to use a custom IdP (IAS). To switch to Identity Authentication, navigate to the Settings, select the Identity Authentication tab and click Enable (please read the notes before doing this, and confirm that you’ve completed the required trust configuration).

Accessing the web app in SAP Build Work Zone

The link to the site can be found on the Site Directory.

Depending on how you’ve configured your site in SAP Build Work Zone, it might look a bit different. But you should have the tile of your app visible on your site.

Clicking on the tile will open our web app. Notice the SAP BTP authentication happening before opening the app. Also note that you can open the URL on any device; on mobile as well as desktop devices.