Skip to Content
Technical Articles
Author's profile photo Jisha Vijayan

Adding features to FIORI Element List Report using CDS views and annotations

In this blog, I will provide CDS annotation details, some tips and tricks along with examples to demonstrate how we can add features to a basic FIORI elements List report without having to change much in the UI code. This is especially helpful to backend /ABAP developers as these features can be implemented only using CDS views.

If you are new to the world of FIORI elements, please follow this blog, to begin with,

After you have created a basic list report application, you can add the following features using CDS,

  • Adding field list to object page and adding titles
  • Dropdown value helps and F4 helps for filters
  • Domain level descriptions for fields with code values (Eg: C for Cloud)
  • Hyperlink Navigation to application server dependant URLs and opening in new tab
  • ID/number fields with their description/name (Business partner number with Name)
  • Enabling Download to excel icon in the list report

Adding field list to object page and adding titles

All list report applications has an inbuilt navigation link on the line items, we can add fields to this object page by adding the following annotation in your consumption CDS view,

@UI.identification: [ { position: 110 } ]
created_by as CreatedBy,

The annotation should be added to all the fields you need in the object page.

Important fields can be highlighted as the title in the object Page using the following annotation

@UI.dataPoint.title : ‘Opportunity ID’
zukm_oppid as OpportunityID,

The object page can be further categorized into sections using facets.

Dropdown value helps and F4 helps

Creating a basic F4 help for a selection field can be done the following way, create a CDS view selecting details from the master table of the selection field along with the text tables if needed. Add the following annotations.

@EndUserText.label: 'Business Partner Value Help'
@ObjectModel.representativeKey: 'Partner'
@Analytics.dataCategory: #DIMENSION
@VDM.viewType: #BASIC
@AccessControl.authorizationCheck: #NOT_REQUIRED
@Search.searchable : true
define view ZTEST
  as select from    ukmbp_cms
  left outer join kna1  on ukmbp_cms.partner = kna1.kunnr
      @ObjectModel.text.element: ['Name']
      @Search.defaultSearchElement : true
      @Search.fuzzinessThreshold: 0.9
  key partner,
      @Search.defaultSearchElement : true
      @Search.fuzzinessThreshold: 0.7
      @EndUserText.label: 'BP Name'
      kna1.name1    as Name,
      @ObjectModel.text.element: ['CountryName']
      @EndUserText.label: 'Country Code'
      kna1.land1    as CountryKey,

And add the following annotation and provide the view you just created in the entity name (ZTEST in this case) for the selection field in your consumption view,

@UI.selectionField: [{ position : 20 }]
[{ entity:{ element : ‘partner’, name : ‘ZTEST’ } }]
key Partner

If you want to have a dropdown list as value help for your filter, the following annotation should be added in your value help CDS view, @ObjectModel.resultSet.sizeCategory: #XS

@ObjectModel.resultSet.sizeCategory: #XS
@Search.searchable: true
define view ZUKM_REG_VH as select distinct from zukm_ccreg_map {
@Search.defaultSearchElement: true
@EndUserText.label: 'Region'
    key region
} group by region;

The group by clause will ensure you get only unique entries in your dropdown. Now you have to create an association with this newly created view in your consumption view, add annotation @Consumption.valueHelp in the selection field/filter, and last but not the least expose this association. If you do not expose the association, the drop-down would not work.

association [0..*] to ZUKM_REG_VH as _RegionValueHelp on $projection.Region =_RegionValueHelp.region
@Consumption.valueHelp: '_RegionValueHelp' //Assigning value help to filter
@ObjectModel.mandatory: true
Region as Region,
_RegionValueHelp   //Exposed association

The filter looks like as follows after these changes,

we can associate this region value help CDS with any F4 help CDS view as well ( for example: country key ). This will result in a dropdown inside the F4 help.


Domain level descriptions for fields

The standard table DD07T stores texts for domain fixed values. You can simply create a CDS view selecting from this table and passing the required field’s domain name in the where clause and maintain data category as #TEXT in the @Objectmodel annotation, this is more for identification purposes.

@ObjectModel.dataCategory: #TEXT
@ObjectModel.representativeKey: 'LOB'
define view ZUKM_LOB_DESC_TEXT as select from dd07t {
key domvalue_l as Lob,
      @Semantics.language: true
  key ddlanguage as Language,
      ddtext     as LobDesc
where domname = 'ZCMLOB' and ddlanguage = 'E'

Once the view is created, it needs to be associated with your consumption view, Add the @ObjectModel.text.association to the field requiring domain fixed value description and of course, expose the association.

association [0..*] to ZUKM_LOB_DESC_TEXT  as _LobDesc on $projection.LOB = _LobDesc.Lob //association
 @ObjectModel.text.association : '_LobDesc'  //Add annotation for the field requiring text
  zlob as LOB,
  _LobDesc    //Expose annotation

The fields we have added description in this manner will look like this,

Hyperlink Navigation to application server dependant URLs and opening in new tab

Often we need to navigate to SAP GUI or on-premise FLPs from a field in the application. These URLs will depend upon the application server. It will be different for the Development, Test, and Production systems. How can we dynamically change the URL based on the application server IDs? CDS views doesn’t have a session variable for the Application server But there is a way we can extract application server IDs using CDS and using case statement change the URLs.

The table T000 contains field LOGSYS, this field value is usually maintained like <ApplicationserverID><Client> (Example: ISDCLNT001). Create a CDS view on this table with parameter on the client field and pass the $session.client from calling view, you will get the Application server ID.

define view ZUKM_t000
  with parameters
    p_mandt : mandt
  as select from t000
{ mandt,
where mandt = :p_mandt

Once you get the LOGSYS field value in your consumption view, the application server Id can be extracted and can be used in case statements directly to manipulate your URLs.

case left(_sysid( p_mandt:$session.client).logsys,3)
when 'ISD' then ''
when 'IST' then ''
when 'ISP' then ''
end as URL.

You can even concatenate the application server ID directly to the URL instead of case statements. Concatenate the transaction code, parameter ID, and OKCODE with the URL if you want to open a detailed transaction code for a particular field in SAP GUI. The FM RS_CUA_GET_FUNCTIONS can be used to find OKCODEs for your transaction code. The parameter ID for the field you are passing can be found from Dynpro Field in technical settings of that field in the transaction code.

CONCAT( URL, CONCAT( BusinessPartner, ‘&~OKCODE=DISP’ )) as NavURL

The concatenate function in CDS will take only 2 arguments at a time, hence we will need to use nested concatenation.  Now all you have to do is link NavURL to the field you want to hyperlink.

@UI.lineItem: [{ position : 1, type: #WITH_URL, url: ‘NavURL’ }]


This will result in having the business partner fields as hyperlinks to the respective transaction codes.

The CDS annotation #WITH_URL and the UI annotation DATAFIELDWITHURL will automatically open the link in the same window, When we need to open these links in a new tab developers usually have to create a controller, event and view. But there is a way we can achieve this without having to do all that. The following code in CDS will do the trick.

concat(‘‘,’NavURL)’) as NavNewTab,

@UI.lineItem: [{ position : 1, type: #WITH_URL, url: ‘NavNewTab’ }]


ID/number fields with their description/name

When we have a field with ID or numbers, the respective names/descriptions can be linked while displaying them.

      @ObjectModel.text.element: ['PartnerName']
      @UI.textArrangement: #TEXT_LAST
      @Semantics.text: true
      @UI.hidden: true

The field will look as follows after this change,

Enabling Download to excel icon in the list report

Since the list reports are autogenerated templates using CDS/Odata, there won’t be a download to excel option near to settings in these applications,

How can we add this without having to add a controller or events? We can achieve this by changing a single line of code in your manifest.json and a setting change using SAP visual editor.

"ListReport|ZTEST": {
"entitySet": "ZTEST1",
"component": {
"name": "sap.suite.ui.generic.template.ListReport",
"list": true,
"settings": {
"smartVariantManagement": true,
"gridtable": true,
"multiSelect": true

This code will be already present in your manifest file, the only change I have done is adding the “gridtable” and setting “smarVariantManagement” as true, your list report application will look like a smart table after this.

The next step is to right-click on your project and Select SAP UI5 visual editor and switch to edit mode, select the smart table control and find the Use export to excel option. We can see it as false.

Set this as ‘True’ and save, you can see the excel icon near to your list report settings now and it will work fine too.

These are some basic features you can add to your list report applications to make them functional and there is more to it which can be leveraged by the power of CDS annotations.


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Sebastian Freilinger-Huber
      Sebastian Freilinger-Huber

      Hi Jisha,

      thanks a lot for providing those features.

      Best regards,


      Author's profile photo Alex Cruickshank
      Alex Cruickshank


      Have you tried to use the annotation of

        @UI.textArrangement: #TEXT_SEPARATE

      According to all documents this should split the key and text into separate columns, however whenever i use this annotation i end up with just one column with the key? Below is my code.

        @ObjectModel.foreignKey.association: '_Material'
        @UI.selectionField.position: 10
        @Consumption.valueHelp: '_Material'
        @UI.lineItem.position: 10
        @UI.identification: [{ position: 10 }]
        @UI.textArrangement: #TEXT_SEPARATE
        key Material,


      If i use TEXT_LAST or TEXT_FIRST it behaves as expected?? Any ideas?

      Author's profile photo Jisha Vijayan
      Jisha Vijayan
      Blog Post Author

      Hi Alex Cruickshank


      Text_last and Text_first are used to display the text together with keys, you can't use it for separating.

      I normally define another column for the text if I want it separated from the key.

      I have never used #Text_seperate.




      Author's profile photo Ravi Singh
      Ravi Singh

      For opening a new tab with ECC URL use this format'http:URL For web gui&~TRANSACTION=ME23 RM06E-BSTNR4999999;DYNP_OKCODE=SHOP','_blank')


      Your CDS column for URL should be consisting of this  value as a text.



      Author's profile photo Andrea Clare Correya
      Andrea Clare Correya

      Thanks It worked!!

      Author's profile photo Aman Birjpuriya
      Aman Birjpuriya

      Thanks a lot This helped me .. 🙂

      Author's profile photo Eli Naim
      Eli Naim

      Do you know how to add drop down list to cap In NodeJS?

      Author's profile photo Jisha Vijayan
      Jisha Vijayan
      Blog Post Author

      I m not sure Naim, Never worked in NodeJS. sorry 🙁

      Author's profile photo Md. Iqbal
      Md. Iqbal

      Extremely helpful. Thanks Jisha.

      Author's profile photo Hamama Zouhair
      Hamama Zouhair


      Hi Jisha Vijayan,

      I have a question please, I need to develop a CDS Views Consumption that has filled Parameters and Select option and checkbox just like in the picture below, is it possible please.
      This CDS view musst be  consumed in a FIORI

      Best Regards.

      Author's profile photo Jisha Vijayan
      Jisha Vijayan
      Blog Post Author

      Hi Zouhair, Yes you can create the CDS view with prefilled where conditions and parameters and can be consumed in FIORI.

      Author's profile photo Kajal .
      Kajal .


      Under the selection options on the screen due to UI.selectionField annotation, I want to hide the exclude options like 'not equal to', 'does not contain', etc. Could you please suggest, How can I achieve that?

      Thanks and Regards,


      Author's profile photo Jisha Vijayan
      Jisha Vijayan
      Blog Post Author

      Hi Kajal, You can use @Consumption.filter.hidden annotation on the CDS view to hide the selection field, but as for the options, you might need to try and hide these from the UI as these controls are standard.

      Author's profile photo Vinodh Thalambedu
      Vinodh Thalambedu

      Hi Jisha Vijayan,

      i am really thankful for this post i am trying to add "Export Excel" icon to List Report application but i am unable to make edit in visual edit mode , is there anything i need to do any changes to make editable you can check below screen shot,