Skip to Content
Technical Articles

#CloudFoundryFun #9 – Develop with the SAP Business Application Studio

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 Cloud Platform 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

The only bummer is that you need an SAP Cloud Platform account (unfortunately this won’t work with trial accounts yet).

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 the SAP Cloud Platform 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 Cloud Platform 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 

Summary

In this edition you have learned:

  • That the SAP Business Application Studio build on open source software
  • How to invoke the Yeoman scaffolding tool
  • How to install new community generators for Yeoman
  • How OpenUI5 apps can be built from scratch
  • That the SAP Business Application Studio can be used to create Cloud Foundry service instances
  • How to bind Cloud Foundry service instances to your applications
  • Hot to deploy applications from the SAP Business Application Studio
  • That many great things are to come in this project

#CloudFoundryFun #10 – Partial Deployments to Cloud Foundry

About this series

This was the ninth blog post of my monthly new series #CloudFoundryFunThe name already says all there is to it, this series won’t necessarily be about building enterprise apps on Cloud Foundry. I think there are already plenty of great posts about those aspects out there. This series rather thinks outside the box and demonstrates unconventional or novel Cloud Foundry use-cases 🙃.

30 Comments
You must be Logged on to comment or reply to a post.
  • nice nice nice – what a step into the right direction for us devs!

    now please also help making our “dev voice” audible in product mgmt for app studio in regards to:

    – release the Theia-vscode-compatible plugins so we can reuse them in our own offline dev env

    – make app studio available as part of the generic sapcp-cf-license

    these are two major points for fostering adoption of the tool!

  • Hi Marius,

     

    Nice demo.

    I would recommend to first run the yeoman generator, and then open the workspace on the created folder (instead of opening the projects folder). So your settings files, launch.json and tasks.json will be part of your project, and be saved to git.

     

  • Hi Marius,

    Thanks for sharing this! Do you know if there’s a way to deploy CAP apps to CF today? The examples used at TechEd were all using -in–memory IIRC.

    Thanks,

    Pierre

  • Hi Marius,

    maybe i’m missing something, but i can not start the approuter due to error “Format validation failed (Route references unknown destination “Northwind”)” when i issue command “npm run local”. I followed all of your steps and also have the “Northwind” destination from the linked tutorial.

    What am i doing wrong? I double checked for typos or missing commas and stuff like that, but no luck :/

    Thanks,

    Nils

     

    Edit: Even if i add the destination definition directly into the created dest_app service instance in my cf space instead at subaccount level the command fails with same error message like above.

    • Hi Nils,

       

      this is indeep very strange 🤔. There could be several error sources, please try the following to eliminate some of them.

      1. Please remove the Northwind router from the xs-app file. Are you able to start the approuter now?
      2. Double-check that the cf service has been bound correctly to the correct folder (approuter). There should be a .env file in this folder.
      3. Check in the SCP cockpit whether the dest_app service instance and its service key is still alive. You can also use the command line “cf service” and “cf service-keys dest_app” to do this.

      I’m sure we’ll be able to make it run 🙂

      • Kudos to you 🙂

        The cf service was not bound correctly, after i fixed that the approuter worked as expected!

        Another thing i found, it is important to put the “Northwind” route at first position in the “routes” array in xs-app.json file instead of just appending it otherwise the service request responses with a 404.

        Luckily Witalij Rudnicki posted his file in full below your comment 🙂

        Now all steps are working. Thank you!

    • I just passed that step with no such a problem. This is how my xs-app.json looks like.

      {
      	"welcomeFile": "/index.html",
      	"authenticationMethod": "none",
      	"routes": [
      		{
      			"source": "^/Northwind/(.*)$",
      			"target": "$1",
      			"authenticationType": "none",
      			"destination": "Northwind",
      			"csrfProtection": false
      		},
      		{
      			"source": "^/(.*)$",
      			"target": "$1",
      			"authenticationType": "none",
      			"localDir": "webapp"
      		}
      	]
      }
  • Hi Marius,

    can you confirm that SAP Business Application Studio is not yet available on the Trial Landscape, even after enabling BETA features? I couldn’t find it there.

    Simmaco

    • Hi Simmaco,

      yes, I can confirm this. The good news is, that the App Studio will come to trial (but I cannot tell when exactly this will be the case).

  • Hi Marius.

    I’m not able to Subscribe to the SAP Business Application Studio, mi account is trial, is it possible that the SAP Business Application Studio is not available for trial accounts?

    Regards

    • Hi Pavel,

      good question! You can’t find the Business Application Studio in the marketplace because it is not a CF service. It is an SCP service – the subtle difference here is, is that the service is offered on subaccount-level and not on a space-level.

      You should be able to find the Studio in “Subscriptions” on your subaccount level:

       

      Regards,

      Marius

  • Hi

    For some reason when I try to create a new destination service instance there is no such service “destination” in the dropdown. Instead there is a service called “connectivity”. If I choose this one, I can choose the service plan “lite”. However, the service isn’t created (check with cf services | grep dest_app​ is negative). I tryed to create the service instance with the cli (cf create-service connectivity lite dest_app). If I use “destination” as the service there is the same error like befor (no such service). The output of the cli command is as follows:

    Creating service instance dest_app in org NOVO Business Consultants AG_novobeta / space novobetaspace as patrick.wenger@novo-bc.ch… cf create-service destination l SERVICE_INSTANC en service name is ambiguous Service broker error: Space f138751c-adb8-419c-a216-10831660c880 in Org 31d4b866-61c4-4e59-86f8-d8b29a46d260 has no sufficient quota. Instance creation not allowed. Either check the global account license for respective Entitlement or assign a quota plan for Space f138751c-adb8-419c-a216-10831660c880.

    But the space id and the organisation id stated in the error message don’t exist.

    Am I missing something? Or has something changed in the beta version?

    Best regards,

    Patrick

    • Hi Patrick,

      I’d assume this is caused by either one of the following options:

      • The “destination” service is not activated in your subaccount account. Please configure the entitlements of your subaccount and add the service plan “destination”

      • The service plans already exist in your subaccount, but the CF CLI currently points to a different organization/subaccount. In this case, please use the following commands to point the CLI to the correct target
        cf orgs #will print all available subaccounts
        cf target -o <new org>​
      • Hi Marius

        Thanks for your reply. I did check the entitlements but if I try to configure the entitlements there isn’t any entry for “destination” in the list of available entitlements for the respective subaccount (see printscreen).

        This may explain why I don’t see any destination service in the business application studio. However, what do I have to do to be able to add the necessairy entitlement to my subaccount?

        Thanks again for your support.

        Patrick

          • according to the overview with the CLI-tool we have access to the connectivity service but not to the destination service (see printscreen).

            In fact I was able to create a destination to the Northwind Database as you described. Is this destination part of the connectivity service or the destination service?

            However, I am not able to create a service binding for the destination service with the CLI. Neither for the destination service (service offering destination not found) nor for the connectivity service (space has no sufficient quota)

          • Hi Patrick,

            you should be able to see (and create instances of) both services, connectivity and destination, here.

            Can you try to reach out to your admin or the owner of the global account to make sure that you have access to the destination entitlement? This is the crucial piece that is missing.

  • Hi,

    Application is running fine within the SAP Business Application Studio but while deploying to Cloud Foundry using “npm run deploy” command, I am getting below error:

    > satUi5app@0.0.1 deploy /home/user/projects/cloud.native.satUi5app
    > npm run build:mta && cross-var cf deploy mta_archives/satUi5app_$npm_package_version.mtar

    > satUi5app@0.0.1 build:mta /home/user/projects/cloud.native.satUi5app
    > npm run build:ui && shx cp -r approuter/. dist/ && mbt build -p=cf

    > satUi5app@0.0.1 build:ui /home/user/projects/cloud.native.satUi5app
    > rimraf dist && ui5 build –dest dist/webapp

    info builder:builder Building project satUi5app not including dependencies…
    info builder:builder 🛠 (1/1) Building project satUi5app
    info builder:builder application satUi5app 🔨 (1/8) Running task escapeNonAsciiCharacters…
    info builder:builder application satUi5app 🔨 (2/8) Running task replaceCopyright…
    info builder:builder application satUi5app 🔨 (3/8) Running task replaceVersion…
    info builder:builder application satUi5app 🔨 (4/8) Running task generateFlexChangesBundle…
    info builder:builder application satUi5app 🔨 (5/8) Running task generateComponentPreload…
    info builder:builder application satUi5app 🔨 (6/8) Running task createDebugFiles…
    info builder:builder application satUi5app 🔨 (7/8) Running task uglify…
    info builder:builder application satUi5app 🔨 (8/8) Running task generateVersionInfo…
    info builder:builder Build succeeded in 1.02 s
    info builder:builder Executing cleanup tasks…
    [2019-12-02 10:12:23] INFO generating the “Makefile_20191202101223.mta” file…
    [2019-12-02 10:12:23] INFO done
    [2019-12-02 10:12:23] INFO executing the “make -f Makefile_20191202101223.mta p=cf mtar= strict=true mode=” command…
    make: /home/user/projects/cloud.native.satUi5app/node_modules/mbt/unpacked_bin/mbt: Command not found
    /bin/sh: /home/user/projects/cloud.native.satUi5app/node_modules/mbt/unpacked_bin/mbt: not found
    make: *** [Makefile_20191202101223.mta:30: pre_validate] Error 127
    Error: could not build the MTA project: could not execute the “make -f Makefile_20191202101223.mta p=cf mtar= strict=true mode=” command: exit status 2
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! satUi5app@0.0.1 build:mta: `npm run build:ui && shx cp -r approuter/. dist/ && mbt build -p=cf`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the satUi5app@0.0.1 build:mta script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR! /home/user/.npm/_logs/2019-12-02T10_12_24_049Z-debug.log
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! satUi5app@0.0.1 deploy: `npm run build:mta && cross-var cf deploy mta_archives/satUi5app_$npm_package_version.mtar`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the satUi5app@0.0.1 deploy script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR! /home/user/.npm/_logs/2019-12-02T10_12_24_064Z-debug.log

     

    Can you guide me to fix this issue?

    Thanks!!

    BR,

    Satvindar

    • Hi Satvindar,

       

      I’ve seen the same error last week. I’m not yet sure what causes this behavior, but you can work around it by replacing the “build:mta” script in the “package.json” file with:

      "build:mta": "npm run build:ui && shx cp -r approuter/. dist/ && npx mbt build -p=cf",

      (I added the “npx” part)

       

       

    • Hi Prateek,

      good question!

      I have not yet written such a post. I agree this is also an interesting topic but atm #CloudFoundryFun always includes a “coding-part” and is less about admin tasks.

      But who knows, maybe the series will have this focus area at one day 🙂