To create an SAPUI5 application, you can use one of several integrated development environments (IDEs).
As SAP Business Application Studio is the recommended IDE from SAP, we’ll start with this first. Nevertheless, we’ll also show you how to create a project in Visual Studio Code (VS Code).
SAP Business Application Studio
When you start SAP Business Application Studio for the first time, you’ll be greeted with a welcome text. A dev space must first be created to be able to advance the developments at all. A dev space is an instance for the development environment. In addition to the name, you must select the developments to which the IDE is to be adapted for this instance. We’ve selected SAP Fiori and then clicked on Create Dev Space.
Creating alone isn’t enough. You have to wait until the IDE is up and running. As soon as the name of the dev space appears as a link, you can click on it and navigate to the development environment.
After the development environment is started in the browser, you can also save the link to your dev space as a favorite to save you from having to go through the dev space lobby every time. First, we need to create a new project by choosing File > New Project from Template from the menu bar.
You can choose from several project types: the SAP Fiori generator is of interest for our purposes (see figure below). Basic Multitarget Applications are applications that could contain both frontend and backend components and are usually deployed in SAP Business Technology Platform (SAP BTP). With SAPUI5 Adaption Projects, SAP has presented the enhancement concept of SAP Fiori (standard) apps.
The SAPUI5 freestyle applications are created using the Basic application template (see next figure). All other templates relate to low-code/no-code developments with the SAP Fiori elements framework or the newly introduced flexible programming model.
In the next step, we’re asked whether we already want to integrate an OData service. We initially select None here, as we’ll first get to know the integration of remote data sources (next figure). You’re not blocking the possibility of integrating data sources into the project at a later point in time.
Because we’re creating a SAPUI5 project, the wizard assumes that we’ll also need a view for displaying the UI components. For this reason, we can assign a name to this initial view. We’ve entered “Main” as the View name, as shown.
In the next step (see the next figure), we need to enter the project-specific details:
- Module name: Name of the project (can only be changed later with considerable effort).
- Application title: Title of the application, which can be easily changed later.
- Application namespace: Namespace of the app, whereby the reverse domain name of the company is often chosen here (can only be changed again later with considerable effort).
Technical ID of the Application: You need to know that the technical ID of the application is made up of the application namespace and the module name. These are concatenated and separated by a dot. It’s important that this ID must later be unique in the SAPUI5 ABAP repository. This uniqueness can’t be checked when the app is created, but only when it’s first deployed on the SAP system.
- Description: Description of the application, which is only important for the metadata.
- Project folder path: Directory in SAP Business Application Studio in which the project is created. The default projects directory (/home/user/projects) is usually used, but you can set up the directory structure as you wish.
- Minimum SAPUI5 version: Version of the SAPUI5 framework used for development. This version won’t be used later, as the installed version of the SAPUI5 component of the SAP system plays a role.
Select the Appropriate SAPUI5 Version: The SAPUI5 framework is versioned, which means both that changes may have been made to the components already delivered with higher versions and new components may have been introduced. If you develop with a different SAPUI5 version than will actually be available on the deployed system later, you may only realize at the time of deployment that you’re using components that don’t yet exist on the SAP system.
In the following figure, you can see that we’ve activated Enable TypeScript via the Yes radio button. We’re not interested in any of the other options for now.
The project has been created but not yet opened. In any case, you can open a directory again via File > Open Folder. Navigate through the project directory until you can find and select the project, and continue with OK or (Enter), as shown in this figure.
When you open a project, you’re greeted with the Storyboard. Some project-specific information is displayed here, along with quick actions, such as adding an OData service or similar.
Source Code and Version Management: The SAPUI5 application that has just been created only exists in your development environment. No one else has access to it, nor is the source code distributed, even if it’s later deployed to the SAP system. With this new technology, you have to introduce a source code and version management system yourself. The recommendation is to use Git and store the source code in a repository. Although the initial outlay speaks against this new step, it opens up new possibilities in terms of collaboration and development of software and features.
Visual Studio Code
In this section, we’ll show you how to create a SAPUI5 freestyle application in VS Code. The wizard behind the application generator should already be familiar. The design is similar to SAP Business Application Studio, but the headings of the individual areas may have different names. For example, the selection of the template for SAPUI5 freestyle applications is simply called SAPUI5 Application. It’s also important that you select SAPUI5 freestyle as the value for Application Type in the select box.
All other steps from this step on in the wizard are the same as in SAP Business Application Studio.
Editor’s note: This post has been adapted from a section of the SAPUI5: The Comprehensive Guide by Rene Glavanovits, Martin Koch, Daniel Krancz, and Maximilian Olzinger. Rene is an SAP consultant and developer who specializes in the latest SAP technologies, specifically in the development of full-stack applications with SAP Fiori, SAPUI5, OData, CDS, and SAP Cloud Application Programming Model. Martin conducts training for SAP and has developed four training courses on the topics of SAPUI5, SAP Fiori, cloud integration, and cloud security. Daniel is a software developer and consultant who focuses on full-stack development with SAPUI5, SAP Fiori, OData, SAP Cloud Application Programming Model, as well as mobile development. Maximilian is a software developer and consultant. He is an SAP Certified Development Associate and has handled projects for companies in all industries with great success. He conducts trainings in the areas of SAP Fiori, ABAP and web development.
This post was originally published 4/2025.
Comments