In this article, we will add field groups to our FIORI application object page.

1. Add Field groups for the object page.

Go to MDE file and 2 field blocks for Dates and Prices.

 @UI.facet: [
 { 
 purpose: #STANDARD,
 type: #DATAPOINT_REFERENCE,
 id: 'statusData',
 label: 'Status',
 position: 10
 
  },
  { 
  purpose: #STANDARD,
  type: #DATAPOINT_REFERENCE,
  id: 'priceData',
  label: 'Price',
  position: 20
  },
  { 
  purpose: #STANDARD,
  type: #COLLECTION,
  id: 'collectFacet',
  label: 'More Information',
  position: 10
  },
  { 
  purpose: #STANDARD,
  type: #IDENTIFICATION_REFERENCE,
  position: 10,
  parentId: 'collectFacet',
  label : 'More Info'
  },
  { 
  purpose: #STANDARD,
  type : #FIELDGROUP_REFERENCE,
  position : 20,
  parentId : 'collectFacet',
  label : 'Dates',
  targetQualifier : 'dates'
  },
  { 
  purpose: #STANDARD,
  type : #FIELDGROUP_REFERENCE,
  position : 30,
  parentId : 'collectFacet',
  label : 'Prices',
  targetQualifier : 'prices'
  }
  ]

Add Field group reference for the field BeginDate.

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

Add Field group reference for the field EndDate.

@UI.fieldGroup: [{ position : 20, qualifier: 'dates' }]

Add Field group reference for the field OverallStatus.

@UI.fieldGroup: [{ position : 30, qualifier: 'dates' }]

Let’s add field group for prices

@UI.fieldGroup: [{ position : 10, qualifier: 'prices' }]
BookingFee

@UI.fieldGroup: [{ position : 20, qualifier: 'prices' }]
TotalPrice

@UI.fieldGroup: [{ position : 30, qualifier : 'prices' }]
CurrencyCode

2. Output

3. Full Code

@Metadata.layer: #PARTNER
@UI.headerInfo: { 
typeName : 'Travel',
typeNamePlural: 'Travel Requests',
title : { value: 'TravelId' },
description : { value : 'Description' }
}
annotate entity zha_sa_proj
    with 
{
 @UI.facet: [
 { 
 purpose: #STANDARD,
 type: #DATAPOINT_REFERENCE,
 id: 'statusData',
 label: 'Status',
 position: 10
 
  },
  { 
  purpose: #STANDARD,
  type: #DATAPOINT_REFERENCE,
  id: 'priceData',
  label: 'Price',
  position: 20
  },
  { 
  purpose: #STANDARD,
  type: #COLLECTION,
  id: 'collectFacet',
  label: 'More Information',
  position: 10
  },
  { 
  purpose: #STANDARD,
  type: #IDENTIFICATION_REFERENCE,
  position: 10,
  parentId: 'collectFacet',
  label : 'More Info'
  },
  { 
  purpose: #STANDARD,
  type : #FIELDGROUP_REFERENCE,
  position : 20,
  parentId : 'collectFacet',
  label : 'Dates',
  targetQualifier : 'dates'
  },
  { 
  purpose: #STANDARD,
  type : #FIELDGROUP_REFERENCE,
  position : 30,
  parentId : 'collectFacet',
  label : 'Prices',
  targetQualifier : 'prices'
  }
  
  
  ]
    
    @UI.selectionField: [{  position : 10 }]
    @UI.lineItem: [ { position : 10 } ]
    @UI.identification: [{ position : 10 }]
    TravelId;
    @UI.selectionField: [{ position : 20 }]
    @UI.lineItem: [{ position : 20  }]
    @UI.identification: [{ position : 20 }]
    AgencyId;
    @UI.selectionField: [{ position : 30 }]
    @UI.lineItem: [{ position : 30 }]
    @UI.identification: [{ position : 30 }]
    CustomerId;
    @UI.selectionField: [ { position : 40 } ]
    @UI.lineItem: [{ position : 40 }]
    @UI.dataPoint : { qualifier: 'priceData' }
    @UI.fieldGroup: [{ position : 20, qualifier : 'prices' }]
    TotalPrice;
    @UI.selectionField: [{ position : 50 }]
    @UI.lineItem: [{ position : 50 }]
    @UI.identification: [{ position : 40 }]
    Description;
    @UI.selectionField: [{  position : 60}]
    @UI.lineItem: [{ position : 60 , importance: #HIGH, criticality: 'Criticality' }]
    @UI.dataPoint: { criticality: 'Criticality', qualifier: 'statusData' }
    @UI.fieldGroup: [{ position : 30, qualifier : 'dates' }]
    OverallStatus;
    @UI.fieldGroup: [{ position : 10, qualifier : 'dates' }]
    BeginDate;
    @UI.fieldGroup: [{ position : 20, qualifier : 'dates' }]
    EndDate;
    @UI.fieldGroup: [{ position : 10, qualifier : 'prices' }]
    BookingFee;
    @UI.fieldGroup: [{ position : 30, qualifier : 'prices' }]
    CurrencyCode;
    
    
}

I hope you find this blog useful. We will continue it in the next article.

Thanks for reading!