UI Part 2

app/incidents/annotations.cds

@@ -5,33 +5,42 @@ annotate service.Incidents with @(
     UI.FieldGroup #GeneratedGroup : {
         $Type : 'UI.FieldGroupType',
         Data : [
-            {
-                $Type : 'UI.DataField',
-                Label : 'customer_ID',
-                Value : customer_ID,
-            },
             {
                 $Type : 'UI.DataField',
                 Value : title,
             },
             {
                 $Type : 'UI.DataField',
-                Label : 'urgency_code',
-                Value : urgency_code,
-            },
-            {
-                $Type : 'UI.DataField',
-                Label : 'status_code',
-                Value : status_code,
+                Label : '{i18n>Customer}',
+                Value : customer_ID,
             },
         ],
     },
     UI.Facets : [
+        {
+            $Type : 'UI.CollectionFacet',
+            Label : '{i18n>Overview}',
+            ID : 'Overview',
+            Facets : [
+                {
+                    $Type : 'UI.ReferenceFacet',
+                    ID : 'GeneratedFacet1',
+                    Label : '{i18n>GeneralInformation}',
+                    Target : '@UI.FieldGroup#GeneratedGroup',
+                },
+                {
+                    $Type : 'UI.ReferenceFacet',
+                    Label : '{i18n>Details}',
+                    ID : 'Details',
+                    Target : '@UI.FieldGroup#Details',
+                },
+            ],
+        },
         {
             $Type : 'UI.ReferenceFacet',
-            ID : 'GeneratedFacet1',
-            Label : 'General Information',
-            Target : '@UI.FieldGroup#GeneratedGroup',
+            Label : '{i18n>Conversation}',
+            ID : 'i18nConversation',
+            Target : 'conversation/@UI.LineItem#i18nConversation',
         },
     ],
     UI.LineItem : [
@@ -61,42 +70,66 @@ annotate service.Incidents with @(
         status_code,
         urgency_code,
     ],
+    UI.HeaderInfo : {
+        Title : {
+            $Type : 'UI.DataField',
+            Value : title,
+        },
+        TypeName : '',
+        TypeNamePlural : '',
+        Description : {
+            $Type : 'UI.DataField',
+            Value : customer.name,
+        },
+        TypeImageUrl : 'sap-icon://alert',
+    },
+    UI.FieldGroup #Details : {
+        $Type : 'UI.FieldGroupType',
+        Data : [
+            {
+                $Type : 'UI.DataField',
+                Value : status_code,
+            },
+            {
+                $Type : 'UI.DataField',
+                Value : urgency_code,
+            },
+        ],
+    },
 );
 
 annotate service.Incidents with {
-    customer @Common.ValueList : {
-        $Type : 'Common.ValueListType',
-        CollectionPath : 'Customers',
-        Parameters : [
-            {
-                $Type : 'Common.ValueListParameterInOut',
-                LocalDataProperty : customer_ID,
-                ValueListProperty : 'ID',
-            },
-            {
-                $Type : 'Common.ValueListParameterDisplayOnly',
-                ValueListProperty : 'firstName',
-            },
-            {
-                $Type : 'Common.ValueListParameterDisplayOnly',
-                ValueListProperty : 'lastName',
-            },
-            {
-                $Type : 'Common.ValueListParameterDisplayOnly',
-                ValueListProperty : 'name',
-            },
-            {
-                $Type : 'Common.ValueListParameterDisplayOnly',
-                ValueListProperty : 'email',
-            },
-        ],
-    }
+    customer @(
+        Common.ValueList : {
+            $Type : 'Common.ValueListType',
+            CollectionPath : 'Customers',
+            Parameters : [
+                {
+                    $Type : 'Common.ValueListParameterInOut',
+                    LocalDataProperty : customer_ID,
+                    ValueListProperty : 'ID',
+                },
+                {
+                    $Type : 'Common.ValueListParameterDisplayOnly',
+                    ValueListProperty : 'name',
+                },
+                {
+                    $Type : 'Common.ValueListParameterDisplayOnly',
+                    ValueListProperty : 'email',
+                },
+            ],
+        },
+        Common.Text : customer.name,
+        Common.Text.@UI.TextArrangement : #TextOnly,
+        Common.ValueListWithFixedValues : false,
+    )
 };
 
 annotate service.Incidents with {
     status @(
         Common.Label : '{i18n>Status}',
         Common.ValueListWithFixedValues : true,
+        Common.Text : status.descr,
     )
 };
 
@@ -104,6 +137,7 @@ annotate service.Incidents with {
     urgency @(
         Common.Label : '{i18n>Urgency}',
         Common.ValueListWithFixedValues : true,
+        Common.Text : urgency.descr,
     )
 };
 
@@ -115,3 +149,23 @@ annotate service.Status with {
     code @Common.Text : descr
 };
 
+annotate service.Incidents.conversation with @(
+    UI.LineItem #i18nConversation : [
+        {
+            $Type : 'UI.DataField',
+            Value : author,
+            Label : '{i18n>Author}',
+        },
+        {
+            $Type : 'UI.DataField',
+            Value : message,
+            Label : '{i18n>Message}',
+        },
+        {
+            $Type : 'UI.DataField',
+            Value : timestamp,
+            Label : '{i18n>Date}',
+        },
+    ]
+);
+

app/incidents/webapp/manifest.json

@@ -128,7 +128,17 @@
           "options": {
             "settings": {
               "editableHeaderContent": false,
-              "contextPath": "/Incidents"
+              "contextPath": "/Incidents",
+              "controlConfiguration": {
+                "conversation/@com.sap.vocabularies.UI.v1.LineItem#i18nConversation": {
+                  "tableSettings": {
+                    "type": "ResponsiveTable",
+                    "creationMode": {
+                      "name": "Inline"
+                    }
+                  }
+                }
+              }
             }
           }
         }