A.How To Create First Fiori App Using Templates in Web IDE

2/10/22, 4:44 PM How to create First Fiori App using Templates in Web IDE….
| SAP Blogs
Community
Ask a Question Write a Blog Post Login
Technical Articles
Ankur Jain
September 5, 2019
| 4 minute read
How to create First Fiori App using

Templates in Web IDE….
 5  21  15,423
Follow
After attending SAP Inside Track #sitCHD, I was inspired to write my very first blog
 Like 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
 RSS Feed created my first Fiori app. I realized how simple, efficient and exciting it is to work in
Fiori. After following a series of tutorials I successfully created a List report in Fiori.
Before we go into details on how to create a Fiori app, lets understand a brief about
ABAP Programming Model for Fiori.
https://blogs.sap.com/2019/09/05/how-to-create-first-fiori-app-using-templates-in-web-ide..../ 1/14
2/10/22, 4:44 PM How to create First Fiori App using Templates in Web IDE…. | SAP Blogs
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

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,
Item.NetAmount as NetAmount,
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

}
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
Assigned Tags
SAP Fiori
ABAP Development
NW ABAP Gateway (OData)
#sitCHD
Similar Blog Posts 

Creating your first Fiori App in 10 mins using Fiori Elements ( Smart Templates ) by using SAP Web IDE and SAP
API Hub with SAP Sandbox as backend.
By
Sijin Chandran Jul 22, 2019
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 
Technical error for App created using Template in HCP Trial Web IDE
By
Prakash S Jul 27, 2016
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
Join the Conversation 

SAP TechEd
Tune in for tech talk. Stay for inspiration. Upskill your future.
SAP BTP Learning Group

SAP Business Technology Platform Learning Journeys.
Coffee Corner
Join the new Coffee Corner Discussion Group.
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

Thank You Nabheet
Like 0 | Share
Chaouki Akir
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

A.How To Create First Fiori App Using Templates in Web IDE

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

A.How To Create First Fiori App Using Templates in Web IDE

Uploaded by

Copyright:

Available Formats

2/10/22, 4:44 PM How to create First Fiori App using Templates in Web IDE….

Ask a Question Write a Blog Post Login

How to create First Fiori App using

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

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

1. Create a Data definition for CDS View

Open ABAP Development Tool in Eclipse and Go-to File->New->Others. This

On DDL Editor provide the sql_view_name (View created in back-end

@EndUserText.label: 'List reporting of Sales order'

define view ZDEMO_DDL_SALES as select from I_SalesDocumentItem

key Item.SalesDocumentItem as ItemPosition,

In above code we are using alias for predefined cds view –

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

@EndUserText.label: 'List reporting of Sales order'

define view ZDEMO_DDL_SALES as select from I_SalesDocumentItem

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

3. Create Fiori app to consume OData service

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

Choose template – List Report Application and Choose Next

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

In Fiori Launchpad select the Tile for new Fiori app

Keep Exploring!! Keep Blogging!!

NW ABAP Gateway (OData)

Similar Blog Posts 

Discover how to create your first SAP Fiori app

Fiori Elements – How to develop a List Report - Basic Approach

Web IDE Fiori project in HANA studio

Join the Conversation 

SAP BTP Learning Group

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

Ankur Jain | Blog Post Author

Thank You Nabheet

Ankur Jain | Blog Post Author

For transport to Q & P,

This TR can be imported in Q and P.

Precisely speaking these first few lines just boosted my confidence,

Privacy Terms of Use

Trademark Cookie Preferences

You might also like