Creating an SAP Fiori Elements App Using the Application Generator
Objective
After completing this lesson, you will be able to create an app using the App Generator
Prepare SAP Business Application Studio for Development
In this exercise, you will create a development space in SAP Business Application Studio. This step is required before you can start working in SAP Business Application Studio. A development space is an environment with the tools, capabilities, and resources required to develop your application.
Prerequisites
You have created your free trial account on SAP BTP using the details provided in the exercise Getting Started in the unit Getting an Overview of ABAP RESTful Application Programming Model.
Watch the Simulation and Perform the Steps
This exercise contains a simulation that takes you through detailed steps. You can find all the steps after the simulation. You can follow the simulation and perform the steps using your own trial account.
Enter a name for your dev space, for example UX406.
Select Create Dev Space from the bottom of the page. You can see that the UX406 dev space has been created and is Starting.
Launch the dev space by clicking on it when the status changes to Running.
Wait for all the tools and templates to be installed once the dev space is launched.
Result
You successfully created a development space for yourself in SAP Business Application Studio. You will use it in the upcoming exercises.
Create the Manage Travels App
In this exercise, you will create an app in your development space of SAP Business Application Studio. You will use the travel service that you have created in the previous exercises using ADT. To access the service from SAP Business Application Studio, you have to first log in to Cloud Foundry.
Prerequisites
You have completed the exercise Prepare SAP Business Application Studio for Development in this lesson. You have also completed the exercise Add Two Subsections to a Section on the Object Page in the unit Configuring ABAP CDS Annotations in the Back end (lesson: Creating an Object Page).
Watch the Simulation and Perform the Steps
This exercise contains a simulation that takes you through detailed steps. You can find all the steps after the simulation. You can follow the simulation and perform the steps using your own trial account.
Select trial from the Subaccounts tab of your Global Account view.
Copy the API Endpoint URL mentioned in the Cloud Foundry Environment.
Open SAP Business Application Studio.
Open the Terminal within your SAP Business Application Studio.
Select the first icon from the left-hand side menu bar.
Choose the Terminal option.
Choose New Terminal from the subsequent menu. The terminal opens.
Log in to Cloud Foundry.
Enter cf login in the terminal after user $. Press ENTER on your keyboard.
Paste the API endpoint URL you copied from SAP BTP cockpit in the Terminal. Press ENTER on your keyboard.
Add your e-mail address in the Email option. Press ENTER on your keyboard.
Enter your password. Press ENTER on your keyboard. You have logged in to Cloud Foundry.
Generate a project based on your OData service from an existing template.
Select the New Project from Template tab within your development space.
Select the SAP Fiori generator option and select Start from the bottom of the view.
Select List Report Page from the available templates for the Select Template and Target Location step.
Select Next from the bottom of the view.
Select Connect to a System as the Data Source and Service Selection option from the dropdown list that is generated for the Data Source field.
Choose ABAP Environment on SAP Business Technology Platform as the option for the System field.
Choose default_abap-trial as the option for the ABAP Environment field.
To enter the Service name, switch to ADT. Copy ZUI_FE_TRAVEL_######_O4 as your service binding name.
Paste the copied service name in the Service field.
Click Next from the bottom of the page.
Choose Travel as the Main entity option for the Data Source and Service Selection section.
Select Next from the bottom of the view.
Select Main Entity as Travel from the Entity Selection view.
Select Next from the bottom of the view.
Maintain the project attributes such as Module Name and Application Title.
Scroll down to add the deployment configuration, FLP configuration, or to configure advanced options.
Select Finish from the bottom of the view.
Select the option Add project to workspace from the popup dialog box. The project gets generated, and you can see the Application Information.
Select the second icon EXPLORER from the left-hand side menu bar.
Expand the travels option. You can see your travels project in the EXPLORER view.
Result
You successfully created an SAP Fiori elements app based on your OData service. You selected List Report Page as the template for your app.
Preview the Application in SAP Business Application Studio
In this exercise, you will preview your application in the browser from SAP Business Application Studio.
Prerequisites
You have completed the exercise Create the Manage Travels App in this lesson.
Watch the Simulation and Perform the Steps
This exercise contains a simulation that takes you through detailed steps. You can find all the steps after the simulation. You can follow the simulation and perform the steps using your own trial account.