Skip to Content
Author's profile photo Ravi Dasari

Create Fiori List App Report with ABAP CDS view – PART 1

In this blog, I am going to show How CDS view can be used to generate a Fiori List App Report. Below are the steps that need to be implemented to generate Fiori List App Report.

  1. CDS annotations for Fiori List Report.
  2. How to create a Gateway service from ABAP CDS view
  3. How to create a Fiori List App report in Web IDE.
  4. How to Deploy the Fiori Application.
  5. Create a Custom Semantic Object.
  6. Create a Tile in Fiori.
  7. Adding Tile from Catalogs –> Groups.

So Lets Begin with….

1. CDS view with Annotations for Fiori List Report:

Make sure you set @OData.publish annaotation set to True in order to enable the service to Fiori.

Also you can set below CDS view annotation for UI interface.

@UI.HeaderInfo – to display the header information for the list report.

@UI.selectionField.position – this is for filter option

@UI.lineItem.position – This is for Positioning the filed in the Report Layout

@UI.hidden – If you want to hide the filed in Fiori side

@UI.lineItem.exclude – If you want to exclude the filed in Report Layout by default.

and many more…..

You must use Associations in order to bring Value help feature in filters.


Below is the sample CDS view code with UI Annotations, OData, Associations etc.,

@AbapCatalog.sqlViewName: 'ZDEMOCOMPWHR'
@AbapCatalog.compiler.compareFilter: true
@OData.publish: true
@EndUserText.label: 'Fiori - Demo List Report App'

@UI.headerInfo: {
     typeName      : 'Demo List Report App' ,
     typeNamePlural: 'Demo List Report App' }
define view ZDEMO_COMP as select from ZDEMO_COMPWHR 

association [0..1] to I_Material          as _Material   on  $projection.KMAT = _Material.Material
association [0..1] to ZCX1_PRO_OWNER        as _OWNER       on $projection.Owner = _OWNER.owner

@UI.selectionField.position: 20
@Consumption.valueHelp: '_OWNER'
//@UI.lineItem.position: 10
Owner, _OWNER,

@UI.selectionField.position: 30
@Consumption.valueHelp: '_Material'
//@UI.lineItem.position: 20
@EndUserText.label:'KMAT (Material)'
KMAT, _Material,

//@UI.lineItem.position: 30

//@UI.lineItem.position: 40
@EndUserText.label:'Characteristic 1'

//@UI.lineItem.position: 50
@EndUserText.label:'Characteristic Value 1'

@UI.selectionField.position: 70
//@UI.lineItem.position: 510
@EndUserText.label:'Valid To'
@UI.lineItem.exclude: true true
case when validto = '' then '00000000'
else validto end as validto,

@UI.hidden: true
//@UI.lineItem.position: 520
@DefaultAggregation: #MAX
1 as counter


If you want ValueHelp in the List report filters to select the Prompts, then you need to implement the associations in the CDS view as mentioned in the above code, I have implemented ValueHelp for Material & Owner.


2. How to create GateWay Service for CDS view:

  • Make sure you enabled the OData annotation is set to “true” in the CDS view.
  • Go to tcode – /IWFND/MAINT_SERVICE in SAP and click on Add Service.

  • Give Local in the system Alias and click on Get Services button. Once you see all the list, find your service which starts with CDS view name from the list below and Click Add Selected Services button.

  • Give Package Assignment  and click on Continue.

  • It will prompt for a Transport request for the Gateway service. Select the Transport request or create a new TR and Click on Continue.
  • Now, go back to main page and find the Service that starts with CDS view name. Select the service and Make sure the status of ICF Node status is Active. Also you can click on Load Metadata button to refresh the Metadata.

  • To test the service is working or not, Select the service and click on SAP Gateway Client.

  • Click on Execute button and you can see the status reason is OK.


3. How to create Fiori List Report in Web IDE:

  • Login into SAP Cloud Platform Web IDE.
  • Go to Development -> Workspace -> New -> Project from Template.

  • Select List Report Application, select the current UI5 Version and Click “Next”.

  • Give Project Name and Title and Description for the New List report App and Click “Next”.

  • Select the SAP system from the Service Catalog. In this case, I select system and select the Gateway service which is based on CDS View and Click “Next”.

  • Click Next, and then select OData Collection as ZDEMO_COMP (CDS view) and click Finish.

  • Now, you can see the List report Application is created under Workspace. You can test the List report app within Web IDE by clicking the “Run” button.

  • You can choose the file to run the List report application. In this case, I selected the flpSandbox.html.

  • It will open new window from the Web IDE with a tile for testing. Click on the tile.

  • You can test if the report is working fine. By clicking the settings button, you can select the columns you want to show in the report layout and click Go button to run the report.


4. How to deploy the Fiori Application:

  • Logon to SAP Cloud Platform Web IDE and go to your project -> Deploy -> Deploy to SAPUI5 ABAP Repository.

  • If it’s a new application to Deploy, then click the Deploy a new application or click on Update an existing application and then click “Next”.

  • Give the application a Name which starts with ‘Z’ otherwise it won’t create the application, also give the package and click “Next”.

  • Select transport request if asked and then click “Next”.
  • Click Finish.

  • You can see the status of the Deployment in main screen of the Web IDE ( top right corner).


After the Deployment of the Application is complete to Repository , you can create custom semantic object and a tile in Fiori which we can discuss this in PART 2 of this blog.



Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Chris Johnson
      Chris Johnson

      Great blog, Ravi!

      Author's profile photo Jocelyn Dart
      Jocelyn Dart

      Nice step by step summary.  You can find more in the Fiori elements wiki

      Would you like me to add your blogs to the wiki?

      Author's profile photo Michelle Crapo
      Michelle Crapo

      Not my blog - but I would love to see them in the WIKI too.


      Author's profile photo Prashant Sharma
      Prashant Sharma

      Thanks Ravi, Informative Blog.

      Author's profile photo Venkata Ramireddy
      Venkata Ramireddy

      Very use full for beginners.


      Author's profile photo Tenzin Wangmo
      Tenzin Wangmo

      Good One!

      Author's profile photo Ramin Shafai
      Ramin Shafai

      What version of NW do you need for this to work? 7,51?


      Author's profile photo Former Member
      Former Member

      Hello and thx for the post, whwre can I find a list of all annotations? thx in advance

      Author's profile photo Seema Diwakar Nimje
      Seema Diwakar Nimje

      Hello Ravi Dasari ,

      I followed your blog and try to add an annotation in my CDs file but when I try to add , It returns me an error stating  "Unexpected Word @".



      Author's profile photo Alex Cruickshank
      Alex Cruickshank

      Your } above that error is in the wrong place, that should be after all your fields