Introduction to FIORI tools – Part 1

This blog is the first part of a series of four blogs to introduce FIORI tools. There are various development options available within the umbrella ...

Contact us

This blog is the first part of a series of four blogs to introduce FIORI tools. There are various development options available within the umbrella of FIORI, including UI5 Free style apps, FIORI Elements, Native apps, Hybrid apps, Legacy apps etc. There are also various tools already available for development, e.g.  BAS, VS Code, Eclipse etc and there are deployment options like On Premise and Cloud.

In this blog we will understand where FIORI tools fit. We will also understand the architecture of FIORI elements-based apps and how FIORI tools can assist in creating/enhancing these apps.

FIORI Tools

Let us first look at the FIORI development options –

Referring to the existing possibilities, where will FIORI tools fit?

In order to answer that, let us go through and understand the definition of FIORI tools –

“SAP FIORI tools provides many capabilities to increase the efficiency of developing sap FIORI applications using either sap FIORI elements or sapui5 freestyle approach. “

From the definition, it is clear that –

  • FIORI tools are used to create FIORI elements or sapui5 freestyle apps only
  • At the moment, they cannot be used to create other types of apps like hybrid apps or Native apps etc.

 

Tools and Deployment options

 

  • FIORI Tools can be used using local development tool e.g. Visual Studio Code or cloud based tool BAS
  • The apps built using FIORI tools can be deployed On Premise ABAP system or on Cloud Foundry

 

FIORI Tools using VS Code

In this blog, we will see how FIORI tools can be used to create a list report object page FIORI elements app using VS Code within minutes

Prerequisites –

Before we get our hands dirty, let us have a quick look at the FIORI Elements architecture and then we will see how FIORI tools play a vital assistance in each step

FIORI elements architecture

The flow will be – Start -> Configure -> Enhance -> Extend

We will see how FIORI Tools can increase the efficiency in each step.

Step 1 – Start with the generated app based on a standard page type

1: In the VS code, either use terminal command – FIORI: Open Application Generator Or follow the below context menu: View à Command Pallet

 

Type FIORI: Open Application Generator in the template wizard

2:  Select application type SAP FIORI elements and List report Object Page and then click on the Next Button

 

3: Provide the details for Data source. Here, we are connecting to the OData service from the demo gateway system ES5. Please refer to Access to demo gateway system ES5

If not done already.

You should be able to access the link –https://sapes5.sapdevcenter.com/sap/opu/odata/sap/SEPMRA_PROD_MAN/

Enter the credentials to connect to ES5 and click on the login button located to the right of Service password input field. Once successful, click on the Next button

 

4: Select the entity type. Since we want to display the list of Products, we will select the Product entity SEPMRA_C_PD_Product and click on Next button

5: Configure the project attributes. Since we want to deploy the application on cloud foundry, select the option Add deployment configuration as Yes

6: Provide the deployment configuration details.

Below are the details to be provided if Cloud Foundry is selected.

Destination name is the ID of the sub account which you can find after logging in to BTP – SAP BTP Cockpit

Reference screen shot from BTP –

7:  The app is now generated with the required project structure

8: Preview the app by using the right click context menu or by giving terminal command – npm start

 

Select the first option start fiori run

Test the output-

 

What next?

Part 2 – Exploring FIORI Tools guided development

 

Utkarsh Kanade

Utkarsh Kanade

A technology enthusiast, Utkarsh has over 14 years experience working in the SAP space in various roles including Developer, Team Lead, Business Analyst, Technical Architect and Solution Architect. His SAP Consulting experience focuses on designing strategy, road-mapping and validating architecture to solve complex problems for customers. He considers himself a skilled “UX enabler”, bringing his clients both consulting and training expertise in addition to his solid development skills

Let’s make your SAP better, together.

  • This field is for validation purposes and should be left unchanged.