The following units and lessons discuss the basic concepts of SAPUI5 development. To deepen the individual learning contents, there are always exercises with practical programming tasks at the end of the respective topics. In these exercises, a complex scenario is built up step by step. The simple Hello World application that is created at the beginning will be expanded throughout the course into a comprehensive application that incorporates all the concepts discussed such as models, data binding, internationalization, and navigation.
The exercises will be implemented in the SAP Business Application Studio. To do this, a dev space will first be created (see the figure, Creating a Dev Space).
A dev space is a development environment containing the tools, capabilities, and resources you need to develop your application in SAP Business Application Studio.
There are different dev space types available. For the exercise scenario, a dev space of type SAP Fiori is required. It is designed to develop SAP Fiori applications based on various environments, including Cloud Foundry, ABAP Cloud, and SAP S/4HANA. A dev space of type SAP Fiori contains, among other things, the SAP Fiori Tools extension, which includes the templates, CLI, and code completion needed to create SAP Fiori applications.
Git Source Control
In SAP Business Application Studio, you can create projects from scratch using the project wizard, or import existing projects from the file system.
In addition, SAP Business Application Studio enables you to connect to the Git source control system and interact with Git remote repositories.
It is recommended to always connect your projects to a Git repository for long-term persistence.
For detailed information on working with Git, see the SAP Business Application Studio documentation.
All Git tasks can be performed using the terminal in SAP Business Application Studio. To open a terminal, select the path Terminal → New Terminal from the hamburger menu in the upper-left corner.
In addition to the terminal, SAP Business Application Studio also provides a Git source control view to execute Git commands through a graphical user interface (see the figure, Cloning Repositories).
For the exercise scenario to be implemented in the training course, you will not create a new project from scratch using one of the available project templates in SAP Business Application Studio. Instead, for simplicity, the starting point for the exercises will be provided via a Git remote repository that you will clone at the beginning.
You can clone the source project, for example, via the Git source control view or via the Clone from Git tile on the Get Started page (see the figure, Cloning Repositories).
The main branch of the remote repository to be cloned contains the starting point for the exercise scenario. For each exercise, the remote repository also contains an additional branch with the sample solution for the exercise. The names of the branches can be found at the beginning of each exercise.
If you want to skip an exercise while working through the exercise scenario, you can use the associated sample solution branch as the basis for the subsequent exercise.
Previewing an Application
Once you have finished coding, several options to preview an application are available in SAP Business Application Studio.
You can start a preview by running npm scripts from the terminal or by using the Run Control function in the Run and Debug pane.
In addition to the predefined Launch Configurations found in the Run and Debug pane, you can also create additional Launch Configurations from there that define how your project is executed.
It is also possible to start a preview from the context menu. Right-click on any subfolder in your project and select Preview Application from the context menu that appears (see the figure, Starting a Preview from Context Menu). You are then provided with the following options, among others:
This starts the application via the HTML page
index.html. The application is not embedded in an SAP Fiori launchpad sandbox.
This starts the application by using a mock server to reflect an OData endpoint. This way, you can test an application without connecting to a live OData service.
In the training course, the exercises are initially tested using the
start-noflp option. Later, an OData model is integrated into the scenario, which is used to call an OData service that is implemented in an ABAP back-end. Since this ABAP back-end cannot be made available for the course, the
start-mock option is used to test the OData model. The
start-mock option simulates access to the back-end data.