Skip to Content
Technical Articles
Author's profile photo Murali Shanmugham

Developing a Visitor Registration App using Low Code capabilities of SAP Business Application Studio

 

Application Development Lobby for Low Code/No Code Development on SAP BTP

Part 1 – Getting Started

Part 2 – Build your app in minutes using the AppGyver on SAP Business Technology Platform

Part 3 – Developing a Smart Selfie App using SAP AppGyver

Part 4 – Developing a Visitor Registration App using Low Code capabilities of Business Application Studio

This blog series introduces you to the Low Code/No Code development capabilities of SAP Business Technology Platform (BTP). This blog post focuses on the new Low Code capabilities of SAP Business Application Studio. The Business Application Studio which I am going to cover in this blog post is the same service you might have used earlier on SAP BTP. The Application Development Lobby provides access to launch Business Application Studio in special dev space which is optimized for low-code development.

It enables the rapid development of UI, business logic and services using a high level of programming abstractions. You will find new templates and visual editors to build apps quickly leveraging CDS/Fiori Elements/Annotations models. I see this as a consolidation of the Low-Code approaches which existed in many of the services on SAP BTP – be it the visual screen flows, Workflows, Fiori Elements, Mobile Development Kit etc.

Setting up your subaccount:

Low-Code capabilities of Business Application Studio requires you to have entitlements to many other services on SAP BTP. For example, you will require Cloud Foundry runtime to deploy the services, SAP HANA Cloud as a persistency layer, Workflow service to manage any workflow processes, Launchpad service to embed the deployed apps within a Fiori Launchpad etc.

The SAP Help documentation provides the details on the initial setup along with the required entitlements.

For demonstration purposes, I have created a HANA Cloud instance. I the below screenshot, I am listing some of the other instance which get created when the application is deployed. This requires the Cloud Foundry runtime.

Developing a Visitor Registration App

Create a project of type “Business Application” from the Application Development Lobby. This will launch a new tab taking you to the SAP Business Application Studio with limited set of menus on the left-hand side.

The Home page enables you to create and view application components required for your application development. You can click on the “+” button to create Data Models, Services, Sample Data, UI and Workflows.

For the Visitor registration app, I will not be using a workflow process. I would be just developing a simple CRUD based app for visitors to punch in details on mining site they are planning to visit. The creation of the Data Models, Services, Sample Data & User Interfaces are pretty straight forward.

Start with the creating of a Data Model. For my application, I have created an entity called “Visitor” and added multiple properties using the CDS Graphical Modeler.

The next step is to create a service to expose this newly created entity. Clicking on the “+” icon will provide a popup with a proposal for the creating of a service exposing all the properties.

Notice that this service uses a query which is a projection of the entity

Once the service has been created, you can import sample data if required. I have created a CSV file with set of row which I have imported.

You could also manually insert records into the file as shown below too.

The last step in the preparation of the project is the creation of the UI. Follow the guided wizard to provide the application details.

You can select from different UI Application Types. For this demonstration, I am using a Mobile-Centric freestyle application

You have an option to select from a variety of templates. I have used the “CRUD” template and selected “Visitor” as my entity for this application.

At the end, this is how you home page would look like once you have created all the 4 components. Before, hitting the preview or deploy button, you can explore the generated artefacts.

You can switch to the project explorer menu to view the storyboard which has been generated.


The explorer menu will show all the generated files. Here you will be able to find the relevant CDS files for the database entities and service definitions which have been created above using the graphical modeler. Notice that the application which is being generated is based on SAP Mobile Development Kit (MDK). For those who are new to MDK – its SAP’s metadata-based application development platform which enables developers & technical business users to create cross-platform iOS/Android/Web applications with Low-Code capabilities.


Deploy your application

From the Home page, you can preview and deploy your application. The deployment takes several minutes as the system creates several instances within your SAP BTP subaccount.

Once you get a successful message on deployment, ensure that you assign the newly created Role Collection (fro your project) with the users. For my demonstration, I have assigned the Role Collection “<AppName>Manager-<space name>. This is documented in the SAP help.

 

The system would have created two entries in the HTML5 applications menu. The first one provides access to the HTML5 application with its own Fiori Launchpad and second one is just the HTML5 application by itself. If you do not plan to configure and use the launchpad service, you can use the first option. For this demonstration, I will be showing how you can access the HTML5 application within the Launchpad service.

Clicking on the HTML5 Application link will launch the app displaying the sample data which has already been defined.

 

Configuring the Launchpad service

I am assuming you are familiar with the setup of the Launchpad service. If not, I would recommend you go through these Developer Tutorials to get started.

To be able to access the deployed HTML5 apps, navigate to the Content Providers and hit the refresh icon to fetch updated contents.

In the “Content Explorer”, you will be able to view all the deployed HTML5 apps. Select the app and add it to “My Content”.

I have cloned the App configuration and added few more artefacts like Search App as well as Site Access Group. All objects are added to the everyone role for simplicity.

Accessing the Fiori Launchpad site shows me the group and the set of apps

Accessing the app on a mobile device

You an easily mobilize this app by using SAP Mobile Start which is a companion app that comes along with the Launchpad service. Here is a video which shows how you can access the launchpad contents using the Mobile Start App and access the app developed using the Low Code capabilities of SAP Business Application Studio.

 

To know more about SAP Mobile Start, I would like to point you to another blog post “SAP Mobile Start – the new native entry point to access applications & contents” where you will find all the related information about using this Mobile app.

 

Assigned tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.