Exploring SAP Business Application Studio for low-code development and deploying a multichannel sample app to mobile

[LudoNoens]

Updated 25 November 2022: updates to boosters and branding.

It's been a year since my last blog post Developing a multi-experience app with MDK and CAP (Node.js) and I wanted to share with you some things that have been cooking for a while now regarding low-code development.

As mentioned by bhagat.nainani in his blog post Low-Code and No-Code: SAP Extension Suite Brings Development to Everyone, we aim to increase the productivity of both professional developers as well as citizen developers, and amplify their contribution to business transformation. I will touch upon some of the key components mentioned in this post.

Those following me might also recall the posts I've shared around Mobile Backend Tools and Mobile Development Kit: Mobile RAD: Create a protected OData service on Cloud Foundry and consume it with an offline MDK app and Building an MDK Web app that consumes an OData Service generated with Mobile Backend Tools. We will revisit these topics again, although in a slightly different setting. Over the past year we have been working hard to evolve these tools and frameworks further and combine them with other SAP technology that makes the life of developers easier. We have integrated several of our existing tools and frameworks into a comprehensive cloud based development environment that makes things easier to adopt, with zero installation required.

At the end of November last year we have officially released the first version of this new offering, and my colleague yuval.anafi has provided a quick introduction in his blog post SAP Business Application Studio for low-code development. We have also created a Getting Started Video that I highly recommend watching to get an overview in 4 minutes.

In this blog post I want to showcase the new offering in a hands-on fashion, making use of a multichannel sample application that will be deployed into the cloud as well as on mobile.

Prerequisites

To get started, you'll need an account on SAP Business Technology Platform (BTP), and this can be a productive account or a trial account in the region US East (VA). We also provide SAP Business Application Studio through the Free-Tier plan.

In the steps below, I assume you have some exposure to the BTP global account and subaccount cockpit pages and know how to add service entitlements. Please also be aware of potential cost aspects, as we will be using charged services (e.g. HANA Cloud database).

Alternatively, you can find all details in our online documentation Developing Low-Code Business Applications.

Low-code Booster

To make it easier to configure your subaccount, we provide a Booster that helps you subscribe to the necessary services and defines the roles and role collections required for starting your development journey. You'll have the option to create a brand new subaccount, or apply the Booster to an existing subaccount. In your global account cockpit, please select Boosters and start the Booster called Get started with SAP Business Application Studio.

The Booster provides a quick overview, lists the components involved and links to documentation. Select Start.On the next page, the prerequisites are checked. If your global account does not have the entitlements required, it will alert you about this. You can add the entitlements through the Control Center.On the next page, select whether you want to create a new subaccount, or select an existing subaccount to configure.In my case, I choose to Create Subaccount. You will see exactly which entitlements and plans are going to be added, and you can change to generated names if you want. Note that for the SAP Business Application Studio service, there is now the option to select the free plan. This will allow you to evaluate the service for free, but it has some limitations.Go through the remaining pages and the Booster will create the subaccount specified. At the end of the creation phase, a dialog will be shown. Select Go to Application. This will open the SAP Build (lobby) page in a new browser tab. You can now start your low-code / no-code development. However, for deployment of your application, you will need to prepare more on your subaccount. Therefore, please go back to the browser tab where you've started the Booster and close the dialog.

Note: if you quickly want to get started developing apps, you can skip the below set up steps. However, please remember to come back here once you are ready to deploy your application.

HANA Cloud Database

For previewing your application, we will use a 'locally' running SQLite database available within the SAP Business Application Studio environment. However, once you are going to deploy your application, you will need a HANA Cloud database to store your application's data. If you already have a subaccount set up with a HANA Cloud database instance, then you can use this subaccount as deployment target for your applications as well. However, this really depends on how your organisation manages the cloud environments.

In my case, I am going to use the subaccount created earlier as target environment as well. I therefore need to add the HANA Cloud database to this subaccount, using the following steps.

Assign the entitlement SAP HANA Cloud to the subaccount.And also add the entitlement SAP HANA Schemas & HDI Containers.In your subaccount's cockpit, go to the Service Marketplace and search for HANA. Select SAP HANA Cloud and click Create.In the follow dialog, you will not be able to select Create. Instead, click the link to manage SAP HANA Cloud instances.This will bring you to another configuration page in the Space you've selected. Select Create, and SAP HANA database.This will bring you to the SAP HANA Cloud Central. Once loaded, select the type of instance you need. In this case, select SAP HANA Cloud, SAP HANA Database.Ensure the correct Cloud Foundry organisation is selected, provide the instance name and admin credentials. Then, click Create Now.This will bring you to a page showing all database instances and their status. Take note that the creation will take time (typically more than 10 minutes). This page will not update the status automatically. Hit the refresh button to check the status.Once the creation is done, the newly created database will be in RUNNING state.

Cloud Foundry Runtime

For the initial development steps, you won't need this, but in order to deploy and run processes on the SAP Business Technology Platform, you will need to configure Cloud Foundry Runtime (memory). If you had to set up a subaccount for deployment in the previous step, then you will also need to add the runtime here.Depending on the size of your application, you might need to configure more runtime units. In my case, I have added 1 unit (equivalent to 1 GB) to my subaccount.

SAP Mobile Services

The last service we need to add, is SAP Mobile Services. This service requires a separate license. In your subaccount's cockpit, add the Mobile Services entitlement. We need this service in order to deploy the mobile application as part of the multichannel sample app demonstrated here.

SAP Build (lobby)

Once the subscriptions are in place on your subaccount and the roles are configured for your user, you can access the SAP Build page. This is the central entry point for all your low-code and no-code development. From here you are able to create projects in SAP Build Apps as well as SAP Business Application Studio for low-code development.

The top of the page shows a few quick start links that allow you to explore what is possible. For this blog post, we will be using the link to create an e-commerce application that we have published on GitHub. All the code is available for you to explore and modify for your learning. Select the tile Create a sample E-commerce Application.A dialog appears for creating a Business Application Project, where you provide a project name and a short description that will be visible in the project overview on the SAP Build page.Once you hit the Create button, a special instance of SAP Business Application Studio opens:

SAP Business Application Studio for low-code development

Many of you will already be familiar with Business Application Studio. However, to make it easier for citizen developers to get started, we have created a simplified perspective that is able to gradually grow into a more advanced environment as the developer is learning and growing into it. The first time you start your development environment, it takes a few minutes to load as the container is created and spinning up.Once fully loaded, you will see a tab called Guided Development, which introduces you to the basic steps in developing your first app. However, since we are opening a sample e-commerce app, we can skip this for now and select the Home tab instead. This will bring you to the Project Homepage.

Project Home Page

The Project Homepage provides a quick overview of the project's contents. The ESPM project contains a full-stack application comprising a data model, data services, sample data and a user interface application. The parts can be shown in a default tile view, but also in a list view. From here, you are also able to navigate to the Storyboard.

Data Model Editor

Selecting one of the data entities will open the CDS Graphical Modeler in a low-code mode. Those who have read my blog posts covering Mobile Backend Tools will notice that the editor is looking quite similar. Indeed, this editor is based on the very same core and is capable of handling CAP data models and service definitions.Besides the data model that defines the database tables and relationships, the editor can also be used to create data services to expose this data through OData endpoints. And the code to enable this in your application will be completely generated; no coding required.

Sample Data Editor

Exposing an empty database through data services is not going to help you develop a user interface on top of it. You need some sample data to get started. For this, we have added a sample data editor. Using this editor you can manually add sample data, or let the editor generate it for you. The editor will validate that the content matches the data types. The resulting data is stored in csv files that are used by CAP.

Project Tree

The standard Business Application Studio chrome will show several icons for the various built-in features. For low-code development, we have reduced this to only a few icons on the left hand pane. One of them is called the Project Tree, which you can open to browse a semantical overview of the project's contents. The Data Models and Services section will show the data entities and service entities. The Mobile-Centric, Freestyle Application section shows the build blocks of the MDK based UI application. From here you can explore and modify the application's pages, actions and rules, as some of you already know from MDK development. When you select the Overview page, it will open up the MDK editor as shown below.

Preview

After exploring the project, let's have a quick look at the resulting application. We can do this without any deployment step. On the Project Home page, click the Preview button. This will trigger the installation of some dependent modules, and generate / update some of the project's files. We will be using a locally running (that is, localyl within the cloud development environment) SQLite database to temporarily store data. The user interface is served from within the development environment as well.Once the preview is generated, a launchpad is opened, showing the application's tile as it would be available in a Launchpad. Besides that, you can explore the data services exposed in this application. You can view the data in 'raw' JSON format, or consumed through a simple Fiori Elements application, allowing you to filter the information you need.When you select the ESPM tile, the MDK based web application will be loaded. You will be able to browse the (sample) data and add or modify the data using the application. However, do take note that data is only stored in a temporary database while in Preview.

Deployment

Once we are done with developing the application, it is time to deploy it to Cloud Foundry. For this, go to the Project Home page and hit the Deploy button. If you have not logged into your target subaccount yet, you will be prompted to do this first. In my case, I will use the same subaccount as created for development.

If the deployment fails, you are advised the open the log file available in the user folder and check the reason for the failure. Make sure to complete all prerequisites mentioned in the setup.Once the application is deployed, you will find 2 HTML5 applications in your subaccount's cockpit: ESPMLaunchpad which is the same Launchpad as available in Preview, and ESPM, which is the actual UI application.

In this case the application's data is stored in the HANA Cloud database and changes or additions made through the UI apps are persisted.

Note that when using the Free-Tier version of SAP Business Application Studio, there is a limit on the amount of times you can deploy your application.

Deployment to Mobile Services

What we have running until now, is basically a web application. Using the exact same source code, we can turn this into a native mobile app for iOS and Android.

In the Project Tree, right click on the Application in Mobile-Centric, Freestyle Application. In the context menu, select Deploy to Mobile Services. This will create an application definition in SAP Mobile Services. It also triggers a build that generates a metadata bundle which is uploaded into SAP Mobile Services. From there SAP Mobile Services will take care of the distribution of the app to mobile devices, and act as a proxy to interface between your mobile devices and your OData services.While waiting for the build and deployment to finish, let's make sure you have the required SAP Mobile Services Client app on your mobile device. Please visit the Apple AppStore or Google Play store and download the app onto your device.Once the deployment is finished, you will see the below message, with the revision number. Every time you deploy and update, this revision number will automatically increase.Open the SAP Mobile Services App on your device.Using the mobile app, scan the deployed application's QR code. Where do you find the QR code? In the Project Tree, left-click on the Application to open the Application Editor. You will notice there is a button to show a QR code for onboarding with the mobile client app.Scan the QR code shown.Enter your SAP account's credentials on your device and you will see the e-commerce app as native app on your device. The app is responsive and will adapt its layout depending on your device's orientation. It supports phones and tablets as well.

Rapid iterations

Now that you have gone through the whole flow and have the mobile app running on your device, you can easily make changes to the app and deploy the updates to Mobile Services. Once the SAP Mobile Services Client app detects a revision change, it will automatically ask whether you want to update the mobile app to the latest revision. The mobile app can also be shared with other users for easy validation.

Conclusion

SAP Business Application Studio for low-code development is a comprehensive offering, allowing users to get started quickly with SAP technology, without the need for in-depth technical knowledge or having to install software. Any type of developer will be able to create a full-stack application and deploy it to the cloud, as well as on mobile.

In the coming months we will introduce more enhancements to make it easier to get started, and we have a number of new features in the pipeline to increase the developer productivity. I will update this post when some of the set up steps have been further automated.

I'm looking forward to your feedback and am eager to see what you are able to build with this.

In case you are facing issues with the set up, I recommend taking a look at the tutorial that raz.korn has published for you on the SAP Developer portal: Develop Full-Stack App Using Low-Code Capabilities of SAP Business Application Studio. This tutorial also describes a way to evaluate the above using the Free-Tier plan.

Thanks,
Ludo Noens - Product Owner