CDS-Fiori Elements – Object Page – Plain Text Facet

Check out how to add multiple line text on header facet of Object Page.

Below two CDS views, I am using for Fiori Elements List Report and Object Page app.

In view ZI_MaterialPK we have string field MaterialShotText which we will display as multiline text.

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

@VDM.viewType: #BASIC

define view ZI_MaterialPK
  as select from I_Material
    inner join   mara on I_Material.Material = mara.matnr
  association [0..*] to ZI_MaterialPlantPK as _MaterialPlant on $projection.Material = _MaterialPlant.Material
{
  key Material,
      _Text[Language = $session.system_language].MaterialName,

      MaterialType,
      I_Material._MaterialType._Text[Language=$session.system_language].MaterialTypeName,

      MaterialGroup,
      I_Material._MaterialGroup._Text[Language=$session.system_language].MaterialGroupName,

      @Semantics.quantity.unitOfMeasure: 'MaterialWeightUnit'
      MaterialGrossWeight,

      @Semantics.quantity.unitOfMeasure: 'MaterialWeightUnit'
      MaterialNetWeight,

      @Semantics.unitOfMeasure: true
      MaterialWeightUnit,

      mara.aenam                                                                                      as LastChangedby,
      mara.laeda                                                                                      as LastChangedOn,

      concat_with_space('Lorem Ipsum is simply dummy text of the printing and typesetting' ,
        'industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s.', 1 ) as MaterialShorttext,

      _MaterialPlant
}

To display this multiline text first we add Header facet of type #FIELDGROUP.

MaterialShortText field is added to facet using annotation @UI.fieldGroup

MaterialShortText is annotated with @UI.multilinetext: true to render it as multiline text.

@AbapCatalog.sqlViewName: 'ZCMATPK'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Material Stock'

@VDM.viewType: #CONSUMPTION

@UI.headerInfo: { typeName: 'Material' ,
                  typeNamePlural: 'Materials' ,
                  title: { type: #STANDARD , value: 'Material'} ,
                  description: { type: #STANDARD, value: 'MaterialName' } }

@OData.publish: true

define view ZC_MaterialPK
  as select from ZI_MaterialPK
  association [0..*] to ZI_MaterialStock as _MaterialStock on $projection.Material = _MaterialStock.Material
{
      @UI.facet: [
         { id: 'idWeight' ,
             purpose: #HEADER,
             label: 'Weight' ,
             type: #FIELDGROUP_REFERENCE,
             targetQualifier: 'hdWeight',
             position : 10 } ,
         { id: 'idText' ,
             purpose: #HEADER,
             label: 'Text' ,
             type: #FIELDGROUP_REFERENCE,
             targetQualifier: 'hdText' ,
             position : 20 } ,
         { id:'idGeneralInformation' ,
               type: #COLLECTION ,
               label: 'General Information' ,
                position: 10 } ,
             { type: #IDENTIFICATION_REFERENCE ,
               label : 'General Information',
               parentId: 'idGeneralInformation',
               id: 'idIdentification' ,
               position: 10 },
             { type: #FIELDGROUP_REFERENCE ,
               label : 'Last Changed',
               targetQualifier: 'fgLastChanged' ,
               parentId: 'idGeneralInformation' ,
               id : 'idGroupLastChanged' ,
               position: 20 },
         { id: 'idLineItemMatPlant' ,
               type : #LINEITEM_REFERENCE ,
               label : 'Plant Data' ,
               position: 20 ,
               targetElement: '_MaterialPlant'} ,
         { id : 'idChart' ,
               type: #CHART_REFERENCE ,
               label : 'Chart',
               targetElement: '_MaterialStock',
               position: 30 }
                    ]
      @UI.selectionField: [{ position: 10 }]
      @UI.lineItem: [{ position: 10 }]
      @UI.identification: [{ position: 10 }]
      @ObjectModel.text.element: ['MaterialName']
  key Material,

      @UI.selectionField: [{ position: 20 }]
      @UI.lineItem: [{ position: 20 }]
      @UI.identification: [{ position: 20 }]
      @ObjectModel.text.element: ['MaterialTypeName']
      MaterialType,

      @UI.selectionField: [{ position: 30 }]
      @UI.lineItem: [{ position: 30 }]
      @UI.identification: [{ position: 30 }]
      @ObjectModel.text.element: ['MaterialGroupName']
      MaterialGroup,

      @UI.fieldGroup: [{ qualifier: 'hdWeight' , position: 10 }]
      @Semantics.quantity.unitOfMeasure: 'MaterialWeightUnit'
      MaterialGrossWeight,

      @UI.fieldGroup: [{ qualifier: 'hdWeight' , position: 20 }]
      @Semantics.quantity.unitOfMeasure: 'MaterialWeightUnit'
      MaterialNetWeight,

      @Semantics.unitOfMeasure: true
      MaterialWeightUnit,

      @UI.fieldGroup: [{ qualifier: 'fgLastChanged' , position: 10 }]
      LastChangedby,

      @UI.fieldGroup: [{ qualifier: 'fgLastChanged' , position: 20 }]
      LastChangedOn,
      
      @UI.fieldGroup: [{ qualifier: 'hdText' , position: 10 }]
      @UI.multiLineText: true
      MaterialShorttext ,

      MaterialTypeName,
      MaterialGroupName,
      MaterialName,

      _MaterialPlant,
      _MaterialStock
}

Some points to note

  1. Only one field is allowed in facet to display field as multiline.
  2. The field label is not displayed on screen, only facet label is displayed.

Leave a Reply