CAP - Show text and value together on Fiori UI

If you want to achieve something like below, here is how you can do it with CAP annotations:

image.png

Here, we hvae the code/value "2" and the text displayed before that. This text could also be localized.

This is achieved with the help of two annotaions from Commons vocabulary.

@Common.Text
@Common.TextArrangement

Both these annotations should be assigned to the code/value field. In our csae, we have the entity "Result" which is extending the built-in asepct @sap.common.CodeList

entity Result : sap.common.CodeList {
  key code : Integer;
}

This gives us an advantage. We get two predefined fields name and descr . Refer to how @sap.common.CodeList is defined.

Now, within CDS annotaiton file (literally any file with exension .cds inside your db/ folder next to schema.cds file, add the below annotation

annotate golf.Result with {
    code @(
        Common.Text: name,
        Common.TextArrangement: #TextFirst
    );
}

code is the field name that contains the values 1, 2 etc. name and descr are from sap.common.CodeList aspect.

GitHub Repo which you can clone to see this in action.