Home » Fiori Elements » CDS-Fiori Elements – Object Page – Plain Text Facet

CDS-Fiori Elements – Object Page – Plain Text Facet

Posted on: | By: – Leave a Comment

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
@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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
@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.

Related Articles

SAP Classification System – CDS Modelling

SAP Fiori Application Translation

SAP Fiori Elements List Report – Excel File Upload

SAP Fiori Elements List Report – Excel File Upload

Leave a Reply