Community Topics Groups Answers Blogs Events Programs Resources What's New Explore SAP

Follow

 SAP Community Log-in Update 

 Like
Get Started with SAP Universal ID
In a few months, SAP Community will switch to SAP Universal ID as the only option to login. Create your SAP
Universal ID now! If you have multiple S- or P- accounts, use the Consolidation Tool to merge your content.
 RSS Feed

Ask a Question Write a Blog Post Login

Technical Articles

Ankur Jain Assigned Tags

September 5, 2019 | 4 minute read
SAP Fiori

How to create First Fiori App using Templates in ABAP Development

Web IDE…. NW ABAP Gateway (OData)

#sitCHD

 5  25  22,631
Similar Blog Posts 
After attending SAP Inside Track #sitCHD, I was inspired to write my very first blog post. In this I am sharing my
experience on how to create a Fiori App. Creating your first Fiori App in 10 mins
using Fiori Elements ( Smart Templates )
ABAP being my core skill, I always felt working in Fiori will be difficult. But when I created my first Fiori app. I by using SAP Web IDE and SAP API Hub
realized how simple, efficient and exciting it is to work in Fiori. After following a series of tutorials I successfully with SAP Sandbox as backend.
created a List report in Fiori. Before we go into details on how to create a Fiori app, lets understand a brief about
By Sijin Chandran Jul 22, 2019
ABAP Programming Model for Fiori.

Discover how to create your first SAP Fiori

app
By Maria Trinidad MARTINEZ GEA Sep 06, 2018

Fiori Elements – How to develop a List

Report - Basic Approach
By Jocelyn Dart Nov 16, 2016

Related Questions 
 Deploying a ui5 app to launchpad when
coming from a fiori app template
By Former Member Nov 21, 2016

Web IDE Fiori project in HANA studio

By zongjie zhang Mar 08, 2016

Auto generated fiori app for ECC

transaction code
By Thomas Madsen Nielsen Dec 08, 2020

Above picture (referenced from SAP Help), depicts Architecture for development of SAP HANA based Fiori App.
Using ABAP, Core Data Services, OData protocol and SAP UI5 based front end interface various type of Fiori apps
can be created eq. transnational, search, analytics.

Prerequisite –

1. ABAP development tool (Eclipse) – for CDS view development

2. SAP Gateway server – For OData service
3. SAP Web IDE – for SAP UI5 Fiori app development

Step-By-Step Procedure for creating Simple list report in Fiori –

For our example we will create a CDS view on top of existing sales order item(CDS view).

1. Create a Data definition for CDS View

Open ABAP Development Tool in Eclipse and Go-to File->New->Others. This will open a wizard window.
In wizard select Core Data Services->Data Definition

On next screen provide the details – Project, Package, Name (CDS view), Description

Choose Next
In case not using $TMP, give Transport request and choose Next
Select Define view template and choose Finish

On DDL Editor provide the sql_view_name (View created in back-end S4HANA system and can be
checked using SE11), ddl_source_name (CDS View name), data_source_name (view, Database table or
other CDS view) and add following code

@AbapCatalog.sqlViewName: 'ZDEMOSALES'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'List reporting of Sales order'
define view ZDEMO_DDL_SALES as select from I_SalesDocumentItem as Item {
key Item.SalesDocument as SalesOrderId,

key Item.SalesDocumentItem as ItemPosition,

Item.Plant as Plant,
Item.Material as Product,
@Semantics.currencyCode: true
Item.TransactionCurrency as CurrencyCode,
@Semantics.amount.currencyCode: 'CurrencyCode'
Item.NetPriceAmount as NetPrice,
@Semantics.amount.currencyCode: 'CurrencyCode'
Item.NetAmount as NetAmount,
@Semantics.amount.currencyCode: 'CurrencyCode'
 Item.TaxAmount as TaxAmount

In above code we are using alias for predefined cds view – I_SalesDocumentItem and we are creating a
projection over certain fields.
Save and Activate the CDS view. Upon activation following objects are created in data dictionary.
CDS Entity – ZDEMO_DDL_SALES
SQL View – ZDEMOSALE

Verify the Results by going to data preview for newly created CDS view.

2. Create OData using SADL (Service Adaption Description Language)

OData can be easily created with the use of Annotation in CDS view
At CDS Consumption view level annotation – “@OData.publish:true” can be used.

@AbapCatalog.sqlViewName: 'ZDEMOSALES'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'List reporting of Sales order'
@OData.publish: true
define view ZDEMO_DDL_SALES as select from I_SalesDocumentItem as Item {
}​

On activation of CDS view, objects related to OData like Model, ABAP class etc are created automatically
in the back-end system.
Now we need to activate OData service in SAP Gateway hub.
In front end server go to transaction – /IWFND/MAINT_SERVICE
Choose Add Service

Give System Alias, OData service name as <CDS_View_Name>_CDS

 Choose Get Services

Select the OData service from the list and choose Add Selected Services, Choose Continue in following
pop-ups. This will register the OData service in SAP Gateway hub.
OData service can be tested using SAP Gateway Client

3. Create Fiori app to consume OData service

Open SAP Web IDE in web browser and go to File in menu

Follow the path File->New->Project from Template
Choose template – List Report Application and Choose Next

Provide Basic information for the new Project – Project Name, Title and Choose Next
Select Front End Server where the OData service was registered and OData service

Select the CDS View in Odata Collection and Choose Finish

Fiori Project with following structure is created in SAP Web IDE

Here manifest.json is an app descriptor file that is updated automatically in Web IDE with following
information
Data Source – OData Service details and Annotations file reference
Model – OData Model details

To test, Choose Run in SAP Web IDE and select “flpSandbox.html”, Choose Ok

In Fiori Launchpad select the Tile for new Fiori app

 Newly created Fiori List Report application will be displayed, However there is no data.

To display data from CDS view, Choose Setting and select all fields in pop-up and Choose Ok

Choose Go on next screen and you will see the data in List report.

That is it, how I created a simple list report in Fiori using CDS and annotations.

Keep Exploring!! Keep Blogging!!

 Alert Moderator

5 Comments

You must be Logged on to comment or reply to a post.

Nabheet Madan
September 5, 2019 at 4:08 pm

Ankur some days your energy level is low and nothing seems to work. Day is about to end but your blog post made my day bro! Great stuff., good to see you
taking small steps at a time. Well done

Like 3 | Share

Ankur Jain | Blog Post Author

September 6, 2019 at 5:00 pm

Thank You Nabheet

Like 0 | Share

Chaouki Akir
September 7, 2019 at 8:19 pm

After creating all these objects in your development system, do you have an idea on how to transport them to the Quality and Production environments ?
And how to call the App from the Fiori Launchpad ?

Like 1 | Share

Ankur Jain | Blog Post Author

September 10, 2019 at 8:38 am

For transport to Q & P,

1. CDS View - While developing if you give Custom Package, system will ask for TR.
2. OData Service registration using Tcode /IWFND/MAINT_SERVICES will also ask for a TR once you give package during Add Selected Service
step.
3. Fiori app - Should be deployed to SAPUI5 ABAP Repository. During deployment WebIde will ask for package. After that it will ask for TR.
 This TR can be imported in Q and P.

About, "And how to call the App from the Fiori Launchpad ?" or how to add a tile on Fiori Lauchpad, You can follow the steps as per the blog post -
https://blogs.sap.com/2017/11/19/sap-fiori-ui5-app-configuration-in-sap-fiori-launchpad/

Like 1 | Share

Sijin Chandran
November 3, 2020 at 8:55 am

Hello,

I was asked to look for Fiori App developments for upcoming projects and as a heads up I was searching and this is the first blog which I clicked.

Precisely speaking these first few lines just boosted my confidence,

After attending SAP Inside Track #sitCHD, I was inspired to write my very first blog post. In this I am sharing my experience on how to create a Fiori App.

ABAP being my core skill, I always felt working in Fiori will be difficult. But when I created my first Fiori app. I realized how simple, efficient and exciting it
is to work in Fiori.

Would have been even more informative if you would have added information on Cloud Connector as well. I remember hearing about them in one of the
previous projects, I was not involved in the Fiori Dev sections so I don't have clear idea about it.

Thanks,

Sijin

Like 0 | Share

Find us on

Privacy Terms of Use

Legal Disclosure Copyright

Trademark Cookie Preferences

Newsletter Support