Technical Guide: Introducing SAP Business Application Studio

SAP Fiori technology has transformed the user experience for SAP solutions with modern concepts and designs, and it soon became the design technology for SAP’s solutions going forward. With this in mind, it has been critical for developers to have access to a development environment that optimally supports SAP Fiori application development, and that is flexible enough to adapt to rapidly changing standards and tools.

Over the last few years, SAP Web IDE has been the dominant development environment for developing SAP Fiori applications for SAP Cloud Platform, SAP S/4HANA, and SAP S/4HANA Cloud. SAP Web IDE offers a variety of tools, editors, frameworks, and wizards to boost developer productivity. However, since SAP Web IDE is hosted in SAP Cloud Platform for the Neo environment, which operates in SAP data centers, it has some limitations, such as a lack of adherence to the newest tool standards and lack of support for multi-cloud environments, such as Cloud Foundry-based environments.

To overcome these limitations and extend support for modern application development in intelligent enterprise scenarios, SAP has introduced a new environment for developing and extending SAP solutions: SAP Business Application Studio. Hosted in SAP Cloud Platform for the Cloud Foundry environment and based on open standards, SAP Business Application Studio supports intuitive, end-to-end application development for key business scenarios with the help of easy-to-use tools and known frameworks, such as SAP Fiori templates and OData service consumption.

This article introduces developers and professional key users to using SAP Business Application Studio for SAP Fiori application development with SAP Cloud Platform ABAP environment services. To give you a feel for the simplified, modernized developer experience it provides, it starts with an overview of the tool, and then walks through the tasks involved in setting it up, developing an SAP Fiori application using an SAP Fiori template, and deploying the application. Lastly, it demonstrates how to create a launchpad for the application for display in SAP Fiori launchpad using the Eclipse-based ABAP development tools in SAP Cloud Platform ABAP environment.

Introducing SAP Business Application Studio

Released for general availability in February 2020, SAP Business Application Studio is a cloud-based service that can be used for any kind of development, including SAP Cloud Platform ABAP environment development, native SAPUI5 development, and Cloud Application Programming (CAP) model development.

The tool’s features include:

• A browser-based developer experience targeted at full-stack development, from the user interface (UI) down to the application and database level
• A local desktop-like development environment based on a file system and command line (also known as “terminal”) approach that goes beyond menu interactions and is particularly popular when developing applications for the cloud (to automate tasks such as continuous integration, testing, and deployment, for example)
• Support for multi-cloud development and deployment — SAP Business Application Studio is hosted in the Cloud Foundry environment, eliminating the need to bridge Neo and Cloud Foundry accounts
• Dev spaces, which behave like virtual images for a freely chosen programming model or paradigm, with each space offering prepackaged tools specific to the type of application under development plus optional extensions
• Adherence to standards — for example, it uses command palettes that are also used in similar locally installed tools, such as Visual Studio Code, which provides convenience, simplicity, and a shorter learning curve

Figure 1 shows the basic architecture and philosophy of SAP Business Application Studio. The developer accesses the tool through a browser and runs one or more dev spaces in parallel. Each dev space serves a certain purpose — SAP Fiori development, for example — and consists of related tools, extensions, and a corresponding file system to store development artifacts that can be versioned in an attached Git repository. Access to cloud or on-premise data sources is enabled in the usual way through the consumption of OData services, which will be covered later in the article.

 

Figure 1 — An overview of the SAP Business Application Studio architecture

 

To provide a solid foundation for understanding SAP Business Application Studio development, the next sections walk through an example SAP Fiori development project. Using SAP Cloud Platform, and with the help of known frameworks such as SAP Fiori templates, we will create a straightforward SAP Fiori application based on SAP’s familiar travel and flight reference scenario, which can be downloaded from GitHub. Trial systems always include the travel and flight reference scenario, and it can also be downloaded as described in a previous article.

 

Setup: Getting Access to SAP Business Application Studio

To access SAP Business Application Studio, you must have an SAP Cloud Platform account, so that you can subscribe to the application, and you must have the proper authorizations to use the application. If you do not already have an SAP Cloud Platform account, start by creating a trial account.

 

Create a Trial SAP Cloud Platform Account

For those without an existing SAP Cloud Platform account, the easiest way to get access to SAP Business Application Studio is via an SAP Cloud Platform trial account. From the welcome page (Figure 2), you can choose to run a tutorial for a common scenario, or you can directly access your trial account. If you are new to SAP Cloud Platform, or if your account has expired after the 90-day trial period, you can create a new account.

 

Figure 2 — The welcome page for an SAP Cloud Platform trial account

 

First, choose a region — SAP Cloud Platform cockpit offers two options, Europe and US. Once a region is selected (Europe in the example), the cockpit automatically creates the trial account and generates the required global account, Cloud Foundry-based subaccount, Cloud Foundry organization, and space to host your services (Figure 3).

 

Figure 3 — SAP Cloud Platform cockpit sets up the account with the required global account, subaccount, organization, and space

 

Subscribe to SAP Business Application Studio

To subscribe to SAP Business Application Studio, in SAP Cloud Platform cockpit, navigate to the main page (Figure 4) of your global account (cdeb6b1atrial in the example) and select the associated subaccount (in the example, trial). On the subaccount overview screen, select Subscriptions in the left-hand navigation pane, which lists all the available applications, including SAP Business Application Studio (Figure 5).

 

Figure 4 — Access the subaccount via the global account main page

 

Figure 5 — The subaccount page lists all of the applications available for subscription

 

To subscribe to an application — by default, they are all unsubscribed — click on the tile for that application. Selecting SAP Business Application Studio takes you to its detail screen, where you can subscribe by clicking on the Subscribe button. Once the status field turns to green (Figure 6), the tool is ready for use.

 

Figure 6 — When the status field changes to “Subscribed,” the application is ready for use

 

Note that if you already have a valid SAP Cloud Platform subscription, you can subscribe to SAP Business Application Studio in the same way. In this case, your administrator has likely already created the subaccount and space for you and assigned your user ID to it.

 

Ensure You Have the Correct Authorizations

Next, ensure that you have the right authorizations to use SAP Business Application Studio. To verify this, in SAP Cloud Platform cockpit, navigate to the Security section on the subaccount overview screen, select Trust Configuration, and click on the default trust configuration sap.default (Figure 7). On the detail screen that opens, if you have administrator privileges (which most developers do for their development work), you can assign the Business_Application_Studio_Developer role collection to your user identity (Figure 8).

 

Figure 7 — Select the default trust configuration to view the authorizations

 

Figure 8 — Ensure the Business_Application_Studio_Developer role is assigned to the user identity

 

Create a Dev Space

With the correct authorizations in place, return to the main subaccount page in SAP Cloud Platform cockpit and click on the Go to Application link that now appears on the SAP Business Application Studio tile, which takes you to the display area for your dev spaces (Figure 9). To create a dev space (note that in the trial environment you are limited to two), click on the Create Dev Space button at the lower right of the display. This presents you with a selection of dev space types to choose from — including SAP Fiori, SAP Cloud Business Application, SAP Cloud Platform Mobile Services, and Basic — to support different development scenarios. Each dev space comes with a predefined set of standard tools, to which you can add extension options to further enhance the dev space.

 

Figure 9 — The dev spaces display area in SAP Business Application Studio

 

The example uses the SAP Fiori dev space and is named MyFiori (Figure 10). When the settings are complete, click on Create Dev Space. This starts up the dev space, which is now displayed with the status RUNNING in the dev space display area (Figure 11).

 

Figure 10 — Each dev space comes with a predefined set of tools, which can be supplemented with additional extensions

 

Figure 11 — The newly created dev space is running in the dev space display area

 

Development: Using SAP Business Application Studio

With the setup complete, you’re ready to start developing an application with SAP Business Application Studio. Click on the name of the dev space (MyFiori in the example) to start SAP Business Application Studio, where you can begin your development work (Figure 12). Before diving in, let’s take a quick look at the tool layout.

 

Figure 12 — The welcome screen for a newly created dev space in SAP Business Application Studio

 

Understanding the Tool Layout

The tool layout is intuitive and straightforward in SAP Business Application Studio. On the left of the main screen is the Explorer, which typically displays the project folder containing the development artifacts of the application. The right portion of the screen is used to display the code for the application. The welcome page lists useful resources such as wizards for creating a file or project, shows recently used artifacts, and points to documentation. In addition, there is a standard menu bar at the top and a tool palette along the left.

To open a workspace, click on the Open Workspace button, and in the pop-up screen, select “projects” from the drop-down list of folders, which then displays that folder in the Explorer. Back on the main screen, the status bar at the bottom will display a reminder that SAP Business Application Studio is not yet connected to an organization and space in Cloud Foundry to enable access to back-end resources. Click on the status bar and at the prompt enter your Cloud Foundry endpoint URL, which can be copied from the subaccount overview page — the URL is https://api.cf.eu10.hana.ondemand.com in the example (Figure 13).

 

Figure 13 — Enter your Cloud Foundry endpoint URL to enable SAP Business Studio to access back-end resources

 

At the next prompt, sign in to the Cloud Foundry endpoint with your user identity — that is, the email address and password for your SAP Cloud Platform account. The tool presents a drop-down list of the Cloud Foundry organizations to which your user identity is assigned. In the example, we select ABAP Product Management_pm (Figure 14). Next, select a Cloud Foundry space from the drop-down list of available spaces (Figure 15). In the example, we select Dev for the development project. The project target settings are now set, and back on the main screen, the status bar indicates the targeted organization and space.

 

Figure 14 — Select a Cloud Foundry organization

 

Figure 15 — Select a Cloud Foundry space

 

With all the basic settings in place, the real development can begin.

 

Using a UI Application Generator

The architecture of SAP Business Application Studio consists of a core development environment with the project outline view, editors, compile/build tools, and deployment tools. In addition to these typical elements, it comes with useful plug-ins and extensions for application development, such as UI application generators, that are designed to allow their reuse in the popular Visual Studio Code development tool. The UI application generators help speed the creation of SAP Fiori applications and are based on the Yeoman open source framework, which was designed to create wizards for fast application scaffolding.

To access the UI application generators, open the command palette from the SAP Business Application Studio menu bar by selecting View > Find Command, and then search for the Yeoman UI Generators (Figure 16). Several different generators are presented, such as SAP Fiori Freestyle and Basic Multitarget Applications (Figure 17). For the example, we select the SAP Fiori elements application generator. The SAP Fiori elements concept is based on the notion of templates that define the floor plan for an application, and this generator is well suited for working with services exposed by SAP Cloud Platform ABAP environment, which is the type of service our application needs to access data from the back end. Choose a template for the app — while we choose the List Report Object Page V2 template for the example (Figure 18), any of the others (Worklist, Analytical List Page, or Overview Page) could just as easily be used here.

 

Figure 16 — Search for the Yeoman UI generators

 

Figure 17 — Several different Yeoman UI generators are available to meet different development needs

 

Figure 18 — Choose the template for the application

 

To populate the template, you must connect with a data source and service. You can choose to either connect with an SAP system or directly consume an OData service. For the example, we connect to an SAP system (Figure 19) and create a new system destination (Figure 20). Since we are logged on to the target environment (the Cloud Foundry organization and space we logged on to earlier), SAP Business Application Studio presents the available ABAP instances, which in the example is an ABAP cloud system called PMD that runs in the Cloud Foundry subaccount.

 

Figure 19 — Connect to the SAP system to populate the template

 

Figure 20 — Create a system destination

 

System PMD then displays the available OData services to choose from — for the example, we choose the travel service ZUI_C_TRAVEL_M_KK (Figure 21), which exposes travel requests (this example service is based on SAP’s well-known travel and flight reference scenario, and its creation using SAP Cloud Platform ABAP environment was described in a previous SAPinsider article). Choose a main entity from the list of entity sets contained in the selected OData service — for the example, we choose TravelProcessor (Figure 22).

 

Figure 21 — Choose the ZUI_C_TRAVEL_M_KK OData service for the example

 

Figure 22 — Choose TravelProcessor

 

Next, set the project attributes — such as the module name (ztravel), title (Travel requests), description (A Fiori application for handling travel requests), and a project folder location in the file system (/home/user/projects) — and click on Finish (Figure 23). The system generates the new project and asks to open the project in a new workspace or add it to an existing workspace. Choose Open in New Workspace, which generates a folder containing the new SAP Fiori application along with various related items, such as deployment configuration files (Figure 24).

 

Figure 23 — Enter the project attributes

 

Figure 24 — The newly generated application and related files

 

To start the generated application, in the left menu, switch from the Explorer view to the Run Configurations view (click on ), and click on the “plus” sign () at the top of the left navigation pane. Specify the newly created project (ztravel in the example) at the system prompt for which project to run. The system generates and runs the configuration (Run ztravel), and then the local SAPUI5 server starts and listens for incoming requests (Figure 25).

 

Figure 25 — Run the configuration

 

To preview the newly created application, click on Expose and Open at the lower right of the screen. Open the test folder (Figure 26) and select the automatically generated SAP Fiori launchpad sandbox, flpSandbox.html (Figure 27).

 

Figure 26 — Open the test folder

 

Figure 27 — Select the FLP sandbox

 

SAP Fiori launchpad displays with a tile for the new Travel request application (Figure 28). Clicking on the Travel request tile displays the travel requests in the corresponding SAP Fiori template (Figure 29).

 

Figure 28 — The new Travel requests application displayed in SAP Fiori launchpad

 

Figure 29 — Travel requests displayed in the Travel request application

 

Deploying the Application

The application is now ready for direct deployment to the target ABAP stack (ABAP cloud system PMD in the example). While direct deployment was always possible in on-premise and Neo-based environments, with SAP Business Application Studio, this option is now also available for SAP Cloud Platform ABAP environment. This deployment option avoids the need to deal with Cloud Foundry specifics of deployment, which involved the application’s UI being treated as a separate entity that connects to the back end — now it is treated as an easily transportable ABAP artifact.

This direct deployment is performed by executing commands in the terminal, also known as the command line. The command line is one of the major innovations in SAP Business Application Studio compared to SAP Web IDE, and while it might sound a bit retro-focused, since command lines have been mostly replaced by mouse-driven graphical tools, in the open-source world, command lines are still extremely popular. A good graphical tool is still essential for user acceptance, but a strong command line tool can speed development tasks significantly — for example, it can reduce the need to locate a particular function, enable fast interaction (such as reissuing certain command sequences), and allow for automated command execution in scripts.

To execute the deployment in the command line, open a new terminal session by selecting Terminal > New Terminal, which opens the command palette. Then configure the deployment descriptors with a few commands:

• npx fiori add flp-config — This command (Figure 30) asks for a semantic object and action and a title that describes the application to enable intent-based navigation in SAP Fiori launchpad.

 

Figure 30 — The npx fiori add flp-config command enables intent-based navigation in SAP Fiori launchpad

 

• npx fiori add deploy-config — This command (Figure 31) asks for a deployment target (ABAP or Cloud Foundry); a destination (system PMD); a name for the application (ZTRAVEL); a comprising ABAP package (Z_TRAVEL_APP_KK); and a transport request number (PMDK900141).

 

Figure 31 — The npx fiori add deploy-config command configures the deployment

 

• npm run deploy — This command (Figure 32) starts the deployment process. Upon successful completion (Figure 33), the development artifacts are uploaded to the ABAP instance. You can double-check the status in the Eclipse workspace of the ABAP development toolkit (Figure 34), to make sure that all the artifacts have arrived properly, by selecting the ABAP package (Z_TRAVEL_APP_KK) in the Project Explorer and viewing the details in the Transport Organizer in the lower part of the screen.

 

Figure 32 — The npm run deploy command starts the deployment process

 

Figure 33 — The completed deployment

 

Figure 34 — Check on the progress of the deployment in the Transport Organizer in the ABAP development tools

 

Creating a Launchpad for the SAP Fiori Application

Next, we create a launchpad for the application, which will enable a tile for the new application to appear in SAP Fiori launchpad. Version 2008 of SAP Cloud Platform ABAP environment offers a new way to create and maintain a launchpad for an SAP Fiori application using the Eclipse-based ABAP development tools. The ABAP back end introduces new artifacts that facilitate the process in a well-structured way, including a layout concept called “spaces.” Instead of displaying all roles to which you are assigned in a full-screen approach, a space is associated with a business role and is represented by a browser tab (Figure 35). The layout of the space is defined by the page, which consists of one or more sections that can contain tiles. The tile is contained in a business catalog, which is associated with the business role so that end users assigned to that business role can launch the tile and its associated application. The layout can be easily adjusted with an easy-to-use page editor.

 

Figure 35 — New development artifacts help structure the process of creating a launchpad for SAP Fiori applications

 

To create a launchpad for an SAP Fiori application, you must first create an identity and access management (IAM) application that represents the launchpad tile for the application. In the Eclipse workspace, create a new ABAP repository object — an IAM application — for the project (PMD_EN in the example) by searching for “IAM” (Figure 36). Give the IAM application a name (ZTRAVELAPP), description (Travel IAM app), and type (EXT – External App) — the system appends the suffix “EXT” since it is an external-facing application (Figure 37). Then specify the UI5 application ID (ZTRAVEL_UI5R) that was created during the deployment of the SAP Fiori application (Figure 38).

 

Figure 36 — Create an identity and access management (IAM) application to represent the launchpad tile for the application

 

Figure 37 — Define the IAM application

 

Figure 38 — Specify the UI5 application ID (ZTRAVEL_UI5R) that was created during the deployment

 

Next, create a new ABAP repository object — a business catalog — for the project (PMD_EN in the example) by searching for “catalog” (Figure 39). Specify the settings for the catalog (Figure 56), including a package (Z_TRAVEL_APP_KK), name (ZTRAVELCAT), and description (Travel app catalog).

 

Figure 39 — Create a business catalog to which you can assign the application

 

Figure 40 — Define the business catalog

 

Once the catalog is created, a screen appears that lists the applications assigned to the catalog (Figure 41). Click on Add to assign the newly created IAM application to the catalog. Define the assignment (Figure 42) — including the project (PMD_EN), package (Z_TRAVEL_APP_KK), IAM app (ZTRAVELAPP_EXT), name (ZTRAVELCAT_0001), and description (Business Catalog to IAM App assignment) — and the application is then listed in the catalog (Figure 43).

 

Figure 41 — The business catalog lists the applications assigned to it

 

Figure 42 — Assign an application to the business catalog

 

Figure 43 — The assigned application listed in the business catalo

 

To create the launchpad for the application, switch to the SAP Fiori launchpad administrator tool in SAP Cloud Platform cockpit (Figure 44). As an administrator, create a new launchpad space by going to the User Interface Configuration tab and selecting the Manage Launchpad Spaces tile. On the Create Space screen (Figure 45), provide a space ID (ZTRAVELSP), description (Space for travel apps), and title (Travel app space), along with a page ID (ZTRAVELPG), description (Page for travel apps), and title (Travel apps). The page is then displayed in the list of pages for that space (Figure 46).

 

Figure 44 — Select the Manage Launchpad Spaces tile to create a new launchpad space

 

Figure 45 — Specify the details of the new launchpad space

 

Figure 46 — The page details of the newly created space

 

Next, maintain the business role (Figure 47). Clicking on the Maintain Business Roles tile on the Identity and Access Management tab displays the list of available roles (Figure 48). Create a new role (Figure 49) and specify a name (ZTRAVELROLE) and description (Travel app role).

 

Figure 47 — Select the Maintain Business Users tile to create a new business role

 

Figure 48 — The available business roles for the newly created space

 

Figure 49 — Create a new business role

 

In the detail screen for the new role (Figure 50), assign the previously created Travel app catalog (Figure 51), which is then displayed in the role details (Figure 52).

 

Figure 50 — The details of the newly created role

 

Figure 51 — Add the previously created business catalog to the newly created role

 

Figure 52 — The role details now include the previously created business catalog

 

To assign a role to the launchpad space, click on Manage Launchpad Space at the upper right of the Maintain Business Role screen. In the following pop-up (Figure 53), assign the role to the previously created space (ZTRAVELSP). The assignment is then included in the role details (Figure 54).

 

Figure 53 — Assign the role to the previously created space

 

Figure 54 — The space now appears in the role details

 

Now that we have assigned the space to our role, return to the User Interface Configuration tab, select the Manage Launchpad Pages tile, and go to the customer-created pages view, which now lists the newly created page (Figure 55). The green Assigned status shown in the role assignment indicates that it is active. Clicking on the pencil (“change”) icon allows you to add the business catalog derived from the role to the launchpad layout (Figure 56). By default, the page is marked as invisible, but you can immediately change it to visible (Figure 57).

 

Figure 55 — The newly created page is now listed in the customer-created pages view

 

Figure 56 — Add the business catalog to the launchpad page

 

Figure 57 — Change the page visibility to visible

 

Now you can assign the role to a user by returning to the role details (Figure 58) and specifying the user ID. Enable spaces in the user’s SAP Fiori launchpad preferences (Figure 59) and the newly created launchpad will be displayed (Figure 60).

 

Figure 58 — Assign the role to a user ID

 

Figure 59 — Enable spaces in the user’s SAP Fiori launchpad preferences

 

Figure 60 — The newly created launchpad

 

Summary

Using the new SAP Business Application Studio in conjunction with SAP Cloud Platform ABAP environment is a straightforward, modern, and intuitive experience for developers. Many parts of SAP Business Application Studio look and feel familiar, such as the project outline view and the various wizards. At the same time, the tool includes a variety of new concepts — such as the command palette and command line capabilities, which provide a high level of control — designed to help accelerate development efforts. With SAP Business Application Studio and SAP Cloud Platform ABAP environment, you can quickly build custom SAP Fiori launchpads in an efficient, role-based fashion, enabling fast, simplified development of sophisticated applications.

Learn more at the SAP Community page for SAP Business Application Studio.