In this ninth post in my CloudFoundryFun series, we will write a very simple OpenUI5 web-app and deploy it to Cloud Foundry. For this, we will use the brand new SAP Business Application Studio beta.

4th November 2019: Update screenshots and include hint from Ido Perez

Exploring the new SAP Business Application Studio

If someone was to ask me about my favorite announcement at TechEd, I’d say it was the SAP Business Application Studio. The news of this “new Web IDE” wasn’t a big keynote announcement. It has rather been disclosed secretly in several CAP-related hands-on sessions during the event in Las Vegas. This disclosure immediately made waves on Twitter where developers started to discuss whether they like the idea of a new web-based IDE or not.

Since then, some time went by and more TechEd attendees had the chance to explore this IDE more in detail during TechEd Barcelona. These sessions and demos focus most on CAP-development. And a couple of days ago, the product management released a trending blog post to showcase the Business Application Studio to everyone. Some lucky developers, who work for SAP’s customers, even have the chance to test the beta version of this service already today.

In this post, I demonstrate how the SAP Business Application Studio can be used for development. In particular, I will implement an OpenUI5 application for the Cloud Foundry environment. While most demos are centered around CAP, I want to take this chance to demonstrate the openness of the SAP Business Application Studio and use it for something different.

Beta, Beta, Beta!

Before we start, I want to highlight that this service is still in beta mode. As we all know, this means not everything works perfectly. Depending on the use-case we might also be required to do some manual plumbing. It also means that almost everything could be subject-to-change. Having said that, I think that it is great that we released the service early on, to collect as much feedback as possible during the pre-release phase.

Let’s get started…

Besides its openness, the main value of this IDE is that it comes with everything that you need for SAP-related development. This means you don’t have to set up anything. The SAP Business Application Studio introduces the concepts of Dev Spaces, which are turn-key solutions for developers. SAPUI5-Developers, for example, might want to leverage tools such as the UI5 tooling CLI whereas Backend-Developers want to leverage the CDS CLI. Both personas can use a personalized Dev Space that comforts their individual needs. This makes the IDE leaner and more agile!

As of today, beta users can choose between two persona-oriented Dev Space kinds:

• SAP Fiori
  • Fiori development tools, focusing on the Fiori freestyle for Cloud Foundry, where the developers get UI5 templates, UI5 LSP for javascript, tools for local Fiori test-runs and build & deploy tools
• SAP Cloud Business Application
  • CAP development tools such as the CDS CLI, MTA tools, CF CLI plugins, and the CDS VSIX plugin

Hands-on

In this demo, we will create a simple OpenUI5 application, which retrieves data from the public Northwind oData service. This task is a nice finger exercise to get to know the new development environment.

In case you are new to OpenUI5, or web-development for Cloud Foundry in general and want to learn more about this, I recommend these getting-started tutorials.

Prepare the Setup

The first section covers the set-up of the development environment. We will create a destination in SAP BTP from which our OpenUI5 application will request data. For this, we will leverage the well-known Northwind OData service.

1. Create a destination in the SAP BTP Cockpit.
2. Subscribe to the SAP Business Application Studio and open it.
3. Create a new dev space of a kind “SAP Cloud Business Application”.
4. Open this newly created dev space.
5. You might already be very familiar with this step if you are a fan of VS Code: Open the command palette with

   cmd + shift + P​
   
   #For Windows
   ctrl + shift + p

   and select the entry “Open New Terminal (In Active Workspace)”.

6. Currently, the SAP Business Application Studio doesn’t come with a wizard to create UI5 projects. But this is not a problem as the SAP Business Application Studio is open and leverages open-source software. One example of this is the Yeoman scaffolding tool, which can be extended with custom generators. It’s a lucky coincident that I’ve written such a generator for OpenUI5 a couple of months ago. You can install this generator like any other npm package with

   npm install generator-easy-ui5

7. Click on the bottom-left corner to log into your Cloud Foundry account. You’ll be prompted for the usually cf-login questions, such as the URL of the endpoint, your credentials, and the Cloud Foundry Org.

Create and Run an OpenUI5 Web-App

In this section, we will create a plain OpenUI5 web-app and hook it to a freshly created destination service instance. This will allow our web application to consume data from the Northwind endpoint without having to worry about Cross-Origin Resource Sharing (CORS).

1. Leverage the Yeoman command to see all available generator.

   yo

   Here you can find the easy-ui5 generator we just installed.

   Select this generator and answer all prompted questions as displayed in the screenshot.

2. Open a new workspace from the folder we just generated.
3. Open the project descriptor file (cloud.native.app/mta.yaml) and have a look at the defined resources. You should see that our application will consume a service instance with the name “dest_app”. Let’s go ahead and create this service instance. Open the command palette again with

   cmd + shift + P​
   
   #For Windows
   ctrl + shift + p

   and select “Create a new service instance”. Now, use the values that have been defined in the mta.yaml file (name “dest_app”, service “destination”, plan “lite”). You should now see a success message in a popup.

4. Open a new terminal via the command palette.
5. Just to be sure, let’s use the Cloud Foundry CLI to check whether the service has been created successfully. Enter the following command in the terminal:

   cf services | grep dest_app​

   Isn’t that amazing? Not only are we automatically signed into the Cloud Foundry CLI (no cf login needed anymore), we are also able to use tools such as grep within a web-based IDE.

6. Next, we will bind the service instance to the app router. For this, open the command palette once again and select “Bind a service to a locally run MTA module”. Go with the default values for the path to the mta file and module. Select the service instance we just created and confirm with the check mark The env file will by fault be created in a new folder named “dist”. This file will contain the service key of the binding. Now, move this the env file to the folder “approuter”.
7. Now, that the service binding has been established, add a new route to our destination in the app router config file (approuter/xs-app.json).

   {
    	"source": "^/Northwind/(.*)$",
   	"target": "$1",
   	"authenticationType": "none",
   	"destination": "Northwind",
           "csrfProtection": false
   },

   Did you notice that the auto-save feature is activated by default? No need to save your changes manually anymore!

8. The app router is the application that will host the OpenUI5 web app. Install all its  dependencies and start the server process with:

   cd approuter/
   npm install
   npm run local

9. The SAP Business Application Studio will notice that a server process has been started and offer you to open and browse the application. Click this button see your application running.

Develop and Test the Web-App

In this section, we will add a list that displays all products from the Northwind OData service.

1. Right-click on the view definition file (webapp/view/MainView.view.xml) to open the file with the code editor. Add the following snippet within the <content> tag in line 8.

   <List items="{/Products}">
     <StandardListItem type="Active" press="handleListItemPress" title="{ProductName}"/>
   </List>

2. Replace the content of the controller (webapp/controller/MainView.controller.js) with the following snippet:

   sap.ui.define([
     "sap/ui/core/mvc/Controller",
     "sap/m/MessageBox"
   ], function(Controller, MessageBox) {
     "use strict";
   
     return Controller.extend("cloud.native.app.controller.MainView", {
   		onInit: function () { },
   
   		// show in a pop-up which list element was pressed
   		handleListItemPress: function (oEvent) {
   			MessageBox.show("You pressed item: " + oEvent.getSource().getBindingContext(), {
   				icon: sap.m.MessageBox.Icon.INFORMATION,
   				title: "It works!",
   				actions: [sap.m.MessageBox.Action.OK]
   			});
   		}
   	});
   });
   

3. Let’s make our web application aware of the Northwind OData service. To do this, we need to declare the data source and create a model that accesses the data source. Both aspects require changes in the manifest (webapp/manifest.json).

   "dataSources": {
   	"Northwind.svc": {
   		"uri": "/Northwind/V2/Northwind/Northwind.svc/",
   		"type": "OData"
   	}
   }

   

   "": {
   	"type": "sap.ui.model.odata.v2.ODataModel",
   	"dataSource": "Northwind.svc",
   	"preload": true
   },

   

4. In this section, we only touched “UI files” of the web-app, which means there’s no need to restart the server process (if it’s still running). Just refresh the web app to see the changes immediately. Cool, right? (don’t forget to make sure to do a hard refresh of the page to clear the cache)PS: You can open the popup by clicking on a list item.

Deploy

So far, the application is running within the SAP Business Application Studio – and therefore tied to its lifecycle. To make our application independent of the cloud-based IDE, we will have to deploy it to Cloud Foundry.

1. Go to the project root and invoke the npm script to package and deploy the application.

   cd ..
   npm run deploy

2. In the output, you can see that the application has been deployed successfully, along with the URL to access it.
3. Unfortunately, this URL is not a link. The problem here lies within the Cloud Foundry tool that deploys the application. This tool prints the URL without the protocol-prefix. Luckily, the terminal of the SAP Business Application Studio comes with all the tools we need to print a link 🙂

   echo "https://"$(cf apps | grep started | awk '{print $6}')

   Now you are able to click on the URL to open the OpenUI5 application in a new tab.

Live Coding

Would you like to see and hear me while I go through this demo flow? No problem! I’ve been invited by DJ Adams to introduce the SAP Business Application Studio in his live streaming show. This stream will most likely happen next week (4th Nov – 8th Nov). After the session, you will be able to find the recording of this episode here.

Here’s the recording