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.

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,

      @Semantics.text:true

      @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 }]

@Consumption.valueHelpDefinition:

[{ 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,

  logsys

}

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 'https://ISD.wdf.sap.corp/sap/bc/gui/sap/its/webgui/?sap-client=001'

when 'IST' then 'https://IST.wdf.sap.corp/sap/bc/gui/sap/its/webgui/?sap-client=001'

when 'ISP' then 'https://ISP.wdf.sap.corp/sap/bc/gui/sap/its/webgui/?sap-client=001'

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’ }]

BusinessPartner;

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(‘javascript:window.open(‘,’NavURL)’) as NavNewTab,

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

BusinessPartner;

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

      Partner,

      @Semantics.text: true

      @UI.hidden: true

      PartnerName,

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.