FIORI Development – Creation and deployment of a „Hello World“ App
Introduction
In our previous Blog – FIORI development – Connect BAS to On-Premise System – we established the connection between the SAP Business Technology Platform (BTP) and the On-Premise system. In this part, we will guide you through the process of creating and deploying a simple Fiori ‚Hello World‘ app. For this, we will use the SAP Business Application Studio, our main development tool.
1. Access to the SAP Business Application Studio (BAS)
First, login to your SAP BTP account, and navigate to the SAP Business Application Studio.
There you need to create a developer space, which is a virtual workspace that provides a pre-configured environment tailored to specific development scenarios. It includes all necessary tools, services, and runtimes required for the development of UI5 applications and more. You can run and stop the space, whereby it’s recommended to stop it when it’s not in use to save resources.
2. Creation of new project
After clicking on the developer space, the BAS opens. The SAP Business Application Studio is a cloud-based development environment designed for building business applications, such as UI5, using a range of tools, templates, and extensions. It allows developers to create, test, and deploy applications in a customizable workspace.
In order to create our first Fiori app we must create a project. Please click “New Project from Template” and select “SAP Fiori Generator”:
You can choose out of various templates, most of them delivered by Fiori Elements, which support you with the creation of powerful Fiori applications. We will not start with one of those which already provide a specific application structure, but use the basic one for the creation of a freestyle application:
Then we have to define some of the projects parameters and attributes. Since we do not plan to consume live data from our On-Premise system in our first application, we will not choose a data source for now:
Finally define the project name, the project folder and the application title. As we anyhow must create a deployment configuration later, we will skip this point here:
After the project was created you are asked whether you want to add the project to your workspace:
Please choose “Add project to workspace” as this is necessary to be able work on the project. After the project is generated, the folder structure of the project will be visible in the workspace:
In the Business Application Studio (BAS), the workspace is flexible and allows you to manage multiple projects. When creating a new project, you have the option to integrate it into an existing workspace or create it as a separate project. This is possible due to the multi-root workspace feature, which allows multiple projects to coexist within the same workspace.
Let’s quickly explain some of the most important files of the project structure:
i18n: The i18n file serves multiple purposes. It is primarily used for translations, enabling the application to support multiple languages. Additionally, it allows centralized management of texts, keeping all text strings in one place. This also enhances maintainability, as it ensures that changes to a text can be made in a single file without modifying the application’s core code.
manifest.json: This is the configuration file for the SAP Fiori application, defining metadata such as routes, services, and application settings. It acts as the „blueprint“ for the app, specifying its structure and dependencies.
app.view.xml: This file generally serves as the main entry view or shell for the Fiori app, containing high-level UI components and structure. It often defines the overall navigation layout, integrating other views like in this case View1.
view1.view.xml: This XML file defines the UI layout of a specific view in our Fiori app.
Please note that a freestyle app differs in the generated file structure and way of editing from an app which is based on a template delivered by Fiori Elements. The folder structure of a freestyle app is more flexible, files are generated based on user choices during development and developers need to write code for each element. In contrast to that, Fiori elements is a framework which provides several templates based on standardized structures and files which are automatically generated. The logic and format of the app is mostly handled by annotations, stored separately in the project structure or directly in the backend, which reduces the amount of manual UI coding (we will learn more about Fiori elements in upcoming blogs).
3. Creation of the Hello World app
As the required source code for the Hello World app is very simple, we could directly implement it in the index.html file, but here we will already separate it into the
View.1view.xml file:
4. Testing the application
Once the view file is updated, you can preview and test the app by right-clicking the project and selecting “Preview Application”.
You can choose between different run settings and simulate the app with communication to the target system consuming live data from it or you can also work with mock data. We will not use data in our first application but run it anyways to check if it is working and how it would look embedded in the Fiori environment. Therefore, we run it in a Fiori Launchpad sandbox. In case of a successful run, the application will appear in a browser window:
5. Deploying the App to the S/4HANA On-Premise System
As last step we have to deploy the app to our On-Premise System. For this purpose, we have to create a deployment configuration in the Business Application Studio first. This can be done via the rocket icon in the quick access or by typing the relevant command in the command bar:
In the deployment configuration, among other things, you will define the name under which it will be deployed in the target system:
The successful deployment is indicated by a corresponding message in the protocol:
You can also verify the deployment by checking the app in the SAP system’s Object Navigator:
Please note that the system uses the BSP framework to deploy the created app to the On-premise system. The BSP serves as a container for the UI5 app. As BSP was originally not developed for HTML5 and the ABAP workbench was not updated for this use, you can view the source code, but the workbench is not suitable for editing the app artifacts.
The app is now ready for embedding it into a Fiori tile and make it accessible to users. This process was already reflected in a previous blog and can be referenced here.
Conclusion and Outlook
Now you should be able to create a Project in the Business Application Studio which includes a simple Fiori app. You should also know how to test the app in the development environment and deploy it to an On-Premise system.
In the next part of this blog series, we will deal with apps based on templates delivered by Fiori Elements which present live data from the S/4 system.