019: Recycling-Heroes - Fiori Creation and Deployment (Contact)

Table of contents

• Introduction
• Dev Space
• Create a project
• Adaptation
• Structure
• Deployment
• Summary

Introduction

In this episode, we'll take a closer look at the Business Application Studio and the functions we'll need for further work. We'll create our Fiori Elements application and make some adjustments using Guided Development. Once we're finished, we'll deploy it to the ABAP environment.

 

Dev Space

Before we can begin working in the Business Application Studio, we first need to create a Dev Space or reuse an existing one. For this project, we'll start with a new Dev Space, since you most likely don't have one yet. We create a new one using "Create Dev Space." In the next screen, you can choose between the various basic versions and additional extensions that we want to use. To begin with, the standard "SAP Fiori" version is sufficient for development. We need to give the Dev Space a name; in this case, we'll use the company name.

The Dev Space is then created and started immediately, which should take just a few minutes. Once the space has the "Running" status, we can start our development environment by clicking on the name. After confirming the terms, we'll first clear all windows before starting work.

 

Create a project

Now we want to generate our Fiori Elements app. To do this, we'll go directly to our project directory via the menu. Under "File," you'll find "Open Folder," and select the appropriate path there. Under "home" and "user," you'll find "projects." We'll go there, as this is where every Fiori application is normally created. The website will now reload, and you'll find the Explorer where the folder was selected.

Next, we can start the generator. To do this, you will find the "New Project from Template" option in the menu under "File," which starts the wizard in the Business Application Studio. There, we select the "SAP Fiori generator" to start the project. The next step is to select an appropriate template; the currently available floor plans are available here. In most cases, the List Report Page will be used, as it is very important for the ALV output.

Now it's time to fill in the essential information. To do this, we select our OData service as the source. To do this, we connect to a system and select the ABAP environment from the destinations. Next, all available OData services are determined, which we can then select from the list. You can also start typing the name, which will narrow down the list. After selecting, select the main entity with which our application should start. If there are additional compositions here, we could also select another entity for navigation. Under Table Type, you will find various types to get you started.

• The Responsive Table is the default. This means that only the fields that fit on the screen are displayed.
• The Grid Table is similar to an ALV; all fields are displayed side by side, creating a scroll bar. It's not necessarily mobile-friendly, but it loads all information and displays it in a list.
• If you have a hierarchy as an entry point, you can use it to create a tree view directly.
• The Analytical View starts directly with the view to create or display an analysis.

 

Now we come to the project attributes. Here we define the name of the project. This is created as a parent folder and is available in Explorer. You will find the application title later in the Launchpad in the navigation at the top when the app is open. You usually need a unique combination as a namespace. In most cases, the company's domain is used here, for example. The namespace and module name together must be unique later. Optionally, we can also specify a description for the app. In the lower section, we can specify whether, for example, we want to define the project as TypeScript. We also want to create a deployment configuration and a launchpad configuration.

In the deployment configuration, we define which objects will later be deployed where. If you don't just want to test, you definitely need this configuration. In this case, we want to deploy directly to the ABAP system as a BSP application. The ABAP repository is 15 characters long and is the BSP artifact that we will find later in the system. The deployment description is optional. Next, we specify the target package and the transport to which the deployment will be performed. It's important to specify the transport, not the task.

To ensure that the tile is displayed in the Launchpad, we need a configuration. The title and subtitle will later be displayed directly on the tile when we integrate it into the Launchpad. The semantic object and the action together must also be unique and will later serve as the navigation to the actual application. You can enter anything as the semantic object; for the action, you usually use the actual action, such as "manage" or "display," i.e., what the app actually does with the data.

Finish starts the application generation; the artifacts and structures are created and the necessary modules are installed. Once generation is complete, we receive the application information, from which we can directly perform further actions.

 

Adaptation

First, let's start the application as a preview. To do this, you'll find the "Preview Application" option in the "Common Tasks" area below. After clicking, you have to decide how you want to start the application. With the first option, the application is started without mock data, and we use the data from the ABAP environment. The application is started in a new tab in the browser. If this isn't the case, check whether pop-ups are blocked in your browser. Here, you must allow the action for the Business Application Studio. Now let's run the application using "Go." , then our data will be loaded.

This is also the first point we want to change. The user should see the data immediately when they open the application. To do this, you will find the "Open Guided Development" point in the Common Tasks. A new point will open, where we search for "Auto Load." In the List Report Page area, we find the option for Auto Load. By clicking on this point, we go to the guide and start it. In the lower part, we select the option for Auto Load and change it from Auto to Enabled to always enable Auto Load. To implement the change in the project, we must click the "Insert Snippet" button; then the setting will be adopted into the configuration. We can see this because the corresponding configuration file has been opened.

We can now close the wizard and return to our application. If we now refresh the application again, the data should be loaded directly, and manually selecting the Go button is no longer necessary.

 

Structure

Let's take a look at the structure of the Fiori application. To do this, we switch to the Explorer on the left and open our current project folder under Projects. Here you will find the basic structure of the project.

In the lower part you will find the ui5-deploy.yaml file. This file contains our deployment configuration, which we previously defined in the wizard. If you want to adjust any settings later, such as the package or transport, because it has already been released, you can do so here.

In the "webapp" folder, you will find the necessary files for your application. The manifest.json is the most important file of the project; here you will find information about the service used, the application, the page structure and navigation, and also the Launchpad configuration.

Furthermore, we will find additional folders containing the annotations, where local project annotations are stored. The file is usually quite small, and the annotations are pulled from the service. This has the advantage that we don't have to redeploy the project if there are changes to the names or new fields are added.

If you right-click on the webapp folder, you will find many other project functions. Here, for example, you can directly start the application preview or call up the application info. Other points include Guided Development and the Data Editor. Using the Page Map, we can see the structure of the current applications and could, for example, create additional navigations if we have more compositions in the project. Here you can also make further settings, for example, switching to the Flexible Column Layout.

 

Deployment

Now let's go back to the Application Info to deploy the application. There you will also find the "Deploy" task, which we will now execute in the next step. Since we have already stored all the information, the deployment to the ABAP environment starts immediately. We must confirm the deployment again with "Y" after receiving a brief summary. Depending on the size, deployment may take some time. If you see the "Deployment Successful" message at the end, then we're done for now.

We can now switch to Eclipse and refresh the Fiori folder. Four objects have now been made available in the system.

• The BSP application is the actual Fiori application with all the files we saw in the Business Application Studio.
• The Launchpad App Descriptor Item is the Launchpad configuration we configured in the project.
• We also find the two SICF nodes that have been activated. We can now access the app and need the two endpoints for this.

 

Summary

Today, we took a look at the Business Application Studio and the creation process for a Fiori Elements application. We made some adjustments to the app and finally installed the application on the system. Next time, we will integrate the application into Launchpad and configure Pages and Spaces.

Until then, thanks for watching... and see you next time.

 

YouTube
Video