Home » CDS View » CDS-Fiori Elements – Key Value and Description related Annotations

CDS-Fiori Elements – Key Value and Description related Annotations

Posted on: | By: – 4 Comments

There is a couple of ways to display the description next to the key value. In this blog, I run through all you need to know.

To start with I have CDS view ZICarrier based on table SCARR. A very simple CDS with all basic, but necessary, annotations for Fiori Element List report. As I do not want to use any local annotation I’ve also included @UI.facets.

Normally, I would create SEGW project and use CDS as a reference which gives greater control, flexibility and also future proofs the app but for this blog, I have used @OData.publish: true and expose it directly. I’ve mentioned this as do not recommend using @OData.publish for customer solutions.

@AbapCatalog.sqlViewName: 'ZISCARRPK'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Carriers'

@VDM.viewType: #CONSUMPTION
@ObjectModel.usageType.dataClass: #MASTER
@ObjectModel.usageType.serviceQuality: #A
@ObjectModel.usageType.sizeCategory: #S

@OData.publish: true

@UI.headerInfo: { typeName: 'Carrier' ,
                  typeNamePlural: 'Carriers' ,
                  title: { type: #STANDARD , label: 'AirlineCode' } ,
                  description: { type: #STANDARD, label: 'AirlineName' }
                }

define view ZICarrier
  as select from scarr
  {
      @UI.facet: [ { id:'idGeneralInformation' ,
                     type: #COLLECTION ,
                     label: 'General Information' } ,
                   { type: #IDENTIFICATION_REFERENCE ,
                     label : 'General Information',
                     parentId: 'idGeneralInformation' }
                  ]

      @UI.selectionField: [{ position: 10 }]
      @UI.lineItem: [{ position: 10 }]
      @UI.identification: [{ position: 10 }]
      key carrid   as AirlineCode,

      @UI.selectionField: [{ position: 20 }]
      @UI.lineItem: [{ position: 20 }]
      @UI.identification: [{ position: 10 }]
      carrname as AirlineName,

      @UI.selectionField: [{ position: 30 }]
      @UI.lineItem: [{ position: 30 }]
      @UI.identification: [{ position: 30 }]
      @Semantics.currencyCode: true
      currcode as LocalCurrency,
      
      @UI.lineItem: [{ position: 40 , type: #WITH_URL , url: 'AirlineURL'} ]
      @UI.identification: [{ position: 40 , type: #WITH_URL , url: 'AirlineURL'}]
      url      as AirlineURL
}

Fiori Elements List App using this CDS View looks like below.

Adding Description using Association to Text View

I am going to add description next to the currency field.

Description of the currency is stored in the text table TCURT. It has field language (SPRAS) which can be used to automatically load description based on logon language. This is one of most frequent scenario where the text of key-value is stored in a text table.

First, we define CDS view based on table TCURT with language, key and text fields from it. In terms of annotation

  • 1) Annotate the view with @ObjectModel.dataCategory: #TEXT to signify this is text view.
  • 2) Annotate language field with @Semantic.language: true
  • 3) Annotate language-dependent text field with @Semantic.text: true 
@AbapCatalog.sqlViewName: 'ZICURRT'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Currency Text'
@ObjectModel.dataCategory: #TEXT

define view ZICurrencyText
  as select from tcurt
{
      @Semantics.language: true
  key spras                                    as Language,

      @Semantics.currencyCode: true
  key waers                                    as Currency,

      @Semantics.text: true
      ktext                                    as CurrencyShortName ,

      @Semantics.text: true
      cast(ltext as ltext_cds preserving type) as CurrencyName
}

Our view is now ready. Lets use this and get the description next to currency code field.

Note we have two description fields in CDS view. The system automatically picks up the first field with annotation @Semantic.text: true. Later in the blog I’ll show you what you can do to pick up the field of your choice.

  1. Define association to CDS view ZICurrencyText.
  2. Add annotation @ObjectModel.text.association: ‘_CurrencyText’ on the field LocalCurrency.
  3. And finally expose association _CurrencyText.
define view ZICarrier
  as select from scarr
  association [0..*] to ZICurrencyText as _CurrencyText 
             on $projection.LocalCurrency = _CurrencyText.Currency
{
      @UI.facet: [ { id:'idGeneralInformation' ,
                     type: #COLLECTION ,
                     label: 'General Information' } ,
                   { type: #IDENTIFICATION_REFERENCE ,
                     label : 'General Information',
                     parentId: 'idGeneralInformation' }
                  ]

      @UI.selectionField: [{ position: 10 }]
      @UI.lineItem: [{ position: 10 }]
      @UI.identification: [{ position: 10 }]
  key carrid   as AirlineCode,

      @UI.selectionField: [{ position: 20 }]
      @UI.lineItem: [{ position: 20 }]
      @UI.identification: [{ position: 10 }]
      carrname as AirlineName,

      @UI.selectionField: [{ position: 30 }]
      @UI.lineItem: [{ position: 30 }]
      @UI.identification: [{ position: 30 }]
      @Semantics.currencyCode: true
      @ObjectModel.text.association: '_CurrencyText'
      currcode as LocalCurrency,
      
      @UI.lineItem: [{ position: 40 , type: #WITH_URL , url: 'AirlineURL'} ]
      @UI.identification: [{ position: 40 , type: #WITH_URL , url: 'AirlineURL'}]
      @Semantics.url: { mimeType: 'url' }
      url      as AirlineURL,

      _CurrencyText,
}

After these changes, the currency key field is now displayed with description.

Translation

Let’s test whether the description is pickup based on logon language. To mimic German logon language we will change the test configuration in WebIDE.

Select project and follow menu path Run->Run Configuration

In run configuration, under ‘URL components’ add parameter sap-language with value DE. ‘Save and Run’ the configuration.

You can see from below screenshot that German descriptions are picked up – cool.

Using Description from the field in same CDS

In this use case the description field is already in CDS view. We are going to use AirlineName field as the description for AirlineCode field.

  1. Annotate field AirlineName with @Semantic.text: true. We are saying to the system that this field will be used as description. I’ve have removed other UI related annotation as it does not make sense to keep them.
  2. Annotate field AirlineCode with @ObjectModel.text.element: [‘AirlineName’]. Here we are saying that pick up description from field AirlineName for AirlineCode.
define view ZICarrier
  as select from scarr
        association [0..*] to ZICurrencyText as _CurrencyText 
               on $projection.LocalCurrency = _CurrencyText.Currency
{
      @UI.selectionField: [{ position: 10 }]
      @UI.lineItem: [{ position: 10 }]
      @UI.identification: [{ position: 10 }]
      @ObjectModel.text.element: ['AirlineName']
      key carrid   as AirlineCode,

      @Semantics.text: true
      carrname as AirlineName,

      @UI.selectionField: [{ position: 30 }]
      @UI.lineItem: [{ position: 30 }]
      @UI.identification: [{ position: 30 }]
      @Semantics.currencyCode: true
      @ObjectModel.text.association: '_CurrencyText'
      currcode as LocalCurrency,

      @UI.lineItem: [{ position: 40 , type: #WITH_URL , url: 'AirlineURL'} ]
      @UI.identification: [{ position: 40 , type: #WITH_URL , url: 'AirlineURL'}]
      @Semantics.url: { mimeType: 'url' }
      url      as AirlineURL,

      _CurrencyText
}

Now AirlineCode is being displayed with the respective description.

Using Specific Field from Association

As mentioned earlier, if you have more than one description field in text CDS view system automatically picks up the first field. But if you want to specifically use other field and assuming that you can not change the text CDS view (its sap standard e.g) then this little trick will do.

  1. First, bring the desired text field into the CDS view using association. Make sure you use $session.system_language when you explore the text association.
  2. Annotate this description field with @Semantic.text: true
  3. Annotate the key field with @ObjectModel.text.element, specifying the name of the description field.
      @ObjectModel.text.element: ['CurrencyName']
      currcode as LocalCurrency,

      @Semantics.text: true
      _CurrencyText[Language = $session.system_language ].CurrencyName,

Now we have CurrenyName field displayed as the description instead of CurrenyShortName.

Removing Description

When you use field(s) existing SAP standard CDS which are already modelled well with Text Associations you will automatically get key fields with description. To illustrate this I have used CDS view I_Currency and added fields Currency from I_Currency into CDS view ZICarrier.

define view ZICarrier
  as select from scarr
  association [0..*] to I_Currency as _Currency on $projection.LocalCurrency = _Currency.Currency
{
      @UI.selectionField: [{ position: 10 }]
      @UI.lineItem: [{ position: 10 }]
      @UI.identification: [{ position: 10 }]
      @ObjectModel.text.element: ['AirlineName']
  key carrid   as AirlineCode,

      @Semantics.text: true
      carrname as AirlineName,

      @Semantics.currencyCode: true
      currcode as LocalCurrency,

      @UI.selectionField: [{ position: 30 }]
      @UI.lineItem: [{ position: 30 }]
      @UI.identification: [{ position: 30 }]
      @Semantics.currencyCode: true
      _Currency.Currency,

      @UI.lineItem: [{ position: 40 , type: #WITH_URL , url: 'AirlineURL'} ]
      @UI.identification: [{ position: 40 , type: #WITH_URL , url: 'AirlineURL'}]
      @Semantics.url: { mimeType: 'url' }
      url      as AirlineURL,

      _Currency,
      _Currency._Text

}

You can see that field _Currency.Currency is already appearing with a description next to it as I_Currency CDS view has the necessary association to CDS view I_CurrencyText which also has required annotations ( @ObjectModel.dataCategory: #TEXT , @Semantic.language: true , @Semantic.text: true ) .

However, if you wish not to display description field next to key field you can use this annotation @UI.textArrangement #TEXT_SEPARATE.

      @UI.selectionField: [{ position: 30 }]
      @UI.lineItem: [{ position: 30 }]
      @UI.identification: [{ position: 30 }]
      @Semantics.currencyCode: true
      @UI.textArrangement: #TEXT_SEPARATE
      _Currency.Currency,

@UI.textArrangement annotation also two more variants #TEXT_LAST and #TEXT_ONLY which could come handy in certain situations.

@ObjectModel.semanticKey

CDS View annotation @ObjectModel.semanticKey: [‘AirlineCode’] does change the way description is rendered on screen. Usually, the description is displayed either in format description(key) or key(description). But if you define a field as semantic key using mentioned annotation then the description and key field value are rendered differently as shown in below screenshot.

Anything else…..

Export to Excel feature for the list with description and key values used to be an issue as both key value and description are exported in single cell making it difficult to use them without splitting.

However, I’ve noticed in recent UI5 version SAP has added ‘Export As…’ option which lets you split the values during export.

Related Articles

SAP Classification System – CDS Modelling

OData Query for Parameterised CDS

SAP CDS Cyclic Dependency

4 Replies to “CDS-Fiori Elements – Key Value and Description related Annotations”

  1. How do i model the cds view and db where i need to enter the description of a header like order description and this description will be saved in a language based db. But this description will be placed in the header details.

    Reply

  2. Hi Pawan,

    I have a similar requirement of Removing Description from Company Code which is has a @ObjectModel.foreignKey.association to I_CompanyCode . However @UI.textArrangement doesn’t work in this case.

    Any suggestions here ?

    Kind Regards,
    Hansapriya

    Reply

    1. Hi,

      Could you may be put your code here?
      Difficult to help without looking at code.

      Could this @ObjectModel.foreignKey.association be removed? Check if removing that makes any difference along with @UI.textArrangement: #TEXT_SEPARATE

      Regards,
      Pawan

      Reply

  3. Thank you for such a brilliant article. Do you know if it is possible to also display the text for a code in the filter fields?

    Reply

Leave a Reply