**TITLE**: Custom Section

**INTRODUCTION**: No introduction

**TAGS**: object page extensions, custom section, custom subsection, custom action, custom header facet

**STEP**: Defining Sections in the Manifest

**DESCRIPTION**: Define your custom sections in the manifest.json file under content.body.sections. Each section references a fragment that contains the custom content.

**LANGUAGE**: JSON

**CODE**:
```json
{
	"_version": "1.12.0",
	"sap.app": {
		"id": "sap.fe.core.fpmExplorer.customSection",
		"type": "application",
		"i18n": {
			"bundleName": "sap.fe.core.fpmExplorer.customSection.i18n.i18n",
			"supportedLocales": [""],
			"fallbackLocale": ""
		},
		"applicationVersion": {
			"version": "1.0.0"
		},
		"dataSources": {
			"mainService": {
				"uri": "/sap/fe/core/mock/customSection/",
				"type": "OData",
				"settings": {
					"annotations": [],
					"odataVersion": "4.0"
				}
			}
		}
	},
	"sap.ui5": {
		"dependencies": {
			"minUI5Version": "1.111.1",
			"libs": {
				"sap.ui.core": {},
				"sap.fe.templates": {},
				"sap.ui.vbm": {}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.fe.core.fpmExplorer.customSection.i18n.i18n"
				}
			},
			"@i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.fe.core.fpmExplorer.customSection.i18n.i18n"
				}
			},
			"": {
				"dataSource": "mainService",
				"settings": {
					"operationMode": "Server",
					"autoExpandSelect": true,
					"earlyRequests": true
				}
			}
		},
		"rootView": {
			"viewName": "sap.fe.core.fpmExplorer.customSection.CustomSection"
		},
		"routing": {
			"config": {
				"controlId": "customSection"
			},
			"routes": [
				{
					"pattern": "/Travel({key}):?query:",
					"name": "default",
					"target": "sample"
				},
				{
					"pattern": "/Travel({key})/to_Booking({key2}):?query:",
					"name": "Booking",
					"target": "Booking"
				}
			],
			"targets": {
				"Booking": {
					"type": "Component",
					"id": "booking",
					"name": "sap.fe.templates.ObjectPage",
					"options": {
						"settings": {
							"contextPath": "/Travel/to_Booking"
						}
					}
				},
				"sample": {
					"type": "Component",
					"id": "Default",
					"name": "sap.fe.templates.ObjectPage",
					"viewLevel": 1,
					"options": {
						"settings": {
							"contextPath": "/Travel",
							"navigation": {
								"items": {
									"detail": {
										"route": "to_Booking"
									}
								}
							},
							"content": {
								"body": {
									"sections": {
										"flightMap": {
											"name": "sap.fe.core.fpmExplorer.customSection.CustomSectionFlightMap",
											"type": "XMLFragment",
											"title": "{i18n>FlightMap}",
											"position": {
												"placement": "After",
												"anchor": "BookingList"
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
```

**STEP**: Positioning Sections

**DESCRIPTION**: Use the position property to control where your custom section appears in the object page. You can place it before or after existing sections using the placement and anchor properties.

**LANGUAGE**: JSON

**CODE**:
```json
{
	"_version": "1.12.0",
	"sap.app": {
		"id": "sap.fe.core.fpmExplorer.customSection",
		"type": "application",
		"i18n": {
			"bundleName": "sap.fe.core.fpmExplorer.customSection.i18n.i18n",
			"supportedLocales": [""],
			"fallbackLocale": ""
		},
		"applicationVersion": {
			"version": "1.0.0"
		},
		"dataSources": {
			"mainService": {
				"uri": "/sap/fe/core/mock/customSection/",
				"type": "OData",
				"settings": {
					"annotations": [],
					"odataVersion": "4.0"
				}
			}
		}
	},
	"sap.ui5": {
		"dependencies": {
			"minUI5Version": "1.111.1",
			"libs": {
				"sap.ui.core": {},
				"sap.fe.templates": {},
				"sap.ui.vbm": {}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.fe.core.fpmExplorer.customSection.i18n.i18n"
				}
			},
			"@i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.fe.core.fpmExplorer.customSection.i18n.i18n"
				}
			},
			"": {
				"dataSource": "mainService",
				"settings": {
					"operationMode": "Server",
					"autoExpandSelect": true,
					"earlyRequests": true
				}
			}
		},
		"rootView": {
			"viewName": "sap.fe.core.fpmExplorer.customSection.CustomSection"
		},
		"routing": {
			"config": {
				"controlId": "customSection"
			},
			"routes": [
				{
					"pattern": "/Travel({key}):?query:",
					"name": "default",
					"target": "sample"
				},
				{
					"pattern": "/Travel({key})/to_Booking({key2}):?query:",
					"name": "Booking",
					"target": "Booking"
				}
			],
			"targets": {
				"Booking": {
					"type": "Component",
					"id": "booking",
					"name": "sap.fe.templates.ObjectPage",
					"options": {
						"settings": {
							"contextPath": "/Travel/to_Booking"
						}
					}
				},
				"sample": {
					"type": "Component",
					"id": "Default",
					"name": "sap.fe.templates.ObjectPage",
					"viewLevel": 1,
					"options": {
						"settings": {
							"contextPath": "/Travel",
							"navigation": {
								"items": {
									"detail": {
										"route": "to_Booking"
									}
								}
							},
							"content": {
								"body": {
									"sections": {
										"flightMap": {
											"name": "sap.fe.core.fpmExplorer.customSection.CustomSectionFlightMap",
											"type": "XMLFragment",
											"title": "{i18n>FlightMap}",
											"position": {
												"placement": "After",
												"anchor": "BookingList"
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
```

**STEP**: Defining Section Titles and Localization and Internationalization

**DESCRIPTION**: Define section titles using i18n keys to support multiple languages. The title property in the section configuration references the i18n bundle.

**LANGUAGE**: JSON

**CODE**:
```json
{
	"_version": "1.12.0",
	"sap.app": {
		"id": "sap.fe.core.fpmExplorer.customSection",
		"type": "application",
		"i18n": {
			"bundleName": "sap.fe.core.fpmExplorer.customSection.i18n.i18n",
			"supportedLocales": [""],
			"fallbackLocale": ""
		},
		"applicationVersion": {
			"version": "1.0.0"
		},
		"dataSources": {
			"mainService": {
				"uri": "/sap/fe/core/mock/customSection/",
				"type": "OData",
				"settings": {
					"annotations": [],
					"odataVersion": "4.0"
				}
			}
		}
	},
	"sap.ui5": {
		"dependencies": {
			"minUI5Version": "1.111.1",
			"libs": {
				"sap.ui.core": {},
				"sap.fe.templates": {},
				"sap.ui.vbm": {}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.fe.core.fpmExplorer.customSection.i18n.i18n"
				}
			},
			"@i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.fe.core.fpmExplorer.customSection.i18n.i18n"
				}
			},
			"": {
				"dataSource": "mainService",
				"settings": {
					"operationMode": "Server",
					"autoExpandSelect": true,
					"earlyRequests": true
				}
			}
		},
		"rootView": {
			"viewName": "sap.fe.core.fpmExplorer.customSection.CustomSection"
		},
		"routing": {
			"config": {
				"controlId": "customSection"
			},
			"routes": [
				{
					"pattern": "/Travel({key}):?query:",
					"name": "default",
					"target": "sample"
				},
				{
					"pattern": "/Travel({key})/to_Booking({key2}):?query:",
					"name": "Booking",
					"target": "Booking"
				}
			],
			"targets": {
				"Booking": {
					"type": "Component",
					"id": "booking",
					"name": "sap.fe.templates.ObjectPage",
					"options": {
						"settings": {
							"contextPath": "/Travel/to_Booking"
						}
					}
				},
				"sample": {
					"type": "Component",
					"id": "Default",
					"name": "sap.fe.templates.ObjectPage",
					"viewLevel": 1,
					"options": {
						"settings": {
							"contextPath": "/Travel",
							"navigation": {
								"items": {
									"detail": {
										"route": "to_Booking"
									}
								}
							},
							"content": {
								"body": {
									"sections": {
										"flightMap": {
											"name": "sap.fe.core.fpmExplorer.customSection.CustomSectionFlightMap",
											"type": "XMLFragment",
											"title": "{i18n>FlightMap}",
											"position": {
												"placement": "After",
												"anchor": "BookingList"
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
```

**STEP**: Configuring the Fragment Type

**DESCRIPTION**: Set the fragment type to XMLFragment in the section configuration to ensure your custom content loads and renders correctly.

**LANGUAGE**: JSON

**CODE**:
```json
{
	"_version": "1.12.0",
	"sap.app": {
		"id": "sap.fe.core.fpmExplorer.customSection",
		"type": "application",
		"i18n": {
			"bundleName": "sap.fe.core.fpmExplorer.customSection.i18n.i18n",
			"supportedLocales": [""],
			"fallbackLocale": ""
		},
		"applicationVersion": {
			"version": "1.0.0"
		},
		"dataSources": {
			"mainService": {
				"uri": "/sap/fe/core/mock/customSection/",
				"type": "OData",
				"settings": {
					"annotations": [],
					"odataVersion": "4.0"
				}
			}
		}
	},
	"sap.ui5": {
		"dependencies": {
			"minUI5Version": "1.111.1",
			"libs": {
				"sap.ui.core": {},
				"sap.fe.templates": {},
				"sap.ui.vbm": {}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.fe.core.fpmExplorer.customSection.i18n.i18n"
				}
			},
			"@i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.fe.core.fpmExplorer.customSection.i18n.i18n"
				}
			},
			"": {
				"dataSource": "mainService",
				"settings": {
					"operationMode": "Server",
					"autoExpandSelect": true,
					"earlyRequests": true
				}
			}
		},
		"rootView": {
			"viewName": "sap.fe.core.fpmExplorer.customSection.CustomSection"
		},
		"routing": {
			"config": {
				"controlId": "customSection"
			},
			"routes": [
				{
					"pattern": "/Travel({key}):?query:",
					"name": "default",
					"target": "sample"
				},
				{
					"pattern": "/Travel({key})/to_Booking({key2}):?query:",
					"name": "Booking",
					"target": "Booking"
				}
			],
			"targets": {
				"Booking": {
					"type": "Component",
					"id": "booking",
					"name": "sap.fe.templates.ObjectPage",
					"options": {
						"settings": {
							"contextPath": "/Travel/to_Booking"
						}
					}
				},
				"sample": {
					"type": "Component",
					"id": "Default",
					"name": "sap.fe.templates.ObjectPage",
					"viewLevel": 1,
					"options": {
						"settings": {
							"contextPath": "/Travel",
							"navigation": {
								"items": {
									"detail": {
										"route": "to_Booking"
									}
								}
							},
							"content": {
								"body": {
									"sections": {
										"flightMap": {
											"name": "sap.fe.core.fpmExplorer.customSection.CustomSectionFlightMap",
											"type": "XMLFragment",
											"title": "{i18n>FlightMap}",
											"position": {
												"placement": "After",
												"anchor": "BookingList"
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
```

**STEP**: Defining a Custom Section Fragment

**DESCRIPTION**: Create a fragment that defines your custom section content. This example shows a flight map visualization using the VBM (Visual Business Map) control.

**LANGUAGE**: XML

**CODE**:
```xml
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:vbm="sap.ui.vbm" height="100%" displayBlock="true">
	<vbm:AnalyticMap id="vbi" width="100%" height="600px">
		<vbm:vos>
			<vbm:Routes>
				<vbm:Route
					position="{FlightRoute}"
					color="rgb(117,148,34)"
					colorBorder="rgb(255,255,255)"
					linewidth="3"
					routetype="Geodesic"
				/>
			</vbm:Routes>
		</vbm:vos>
	</vbm:AnalyticMap>
</core:FragmentDefinition>
```

**ADDITIONAL RELATED CODE BLOCKS**:

**FILE**: service.cds

**LANGUAGE**: CDS

**CODE**:
```cds
using {
  sap,
  managed,
  Currency,
  Country
} from '@sap/cds/common';

using from '../service/annotations';

@cds.autoexpose  @readonly
aspect MasterData {}

service TravelService {
  @odata.draft.enabled
  @Common.SemanticKey: [TravelID]

  entity Travel : managed {
    key TravelUUID    : UUID;

        @Common.Label          : 'ID'
        @Common.Text           : Description
        TravelID      : Integer default 0                         @readonly;

        @Common.Label          : 'Begin Date'
        BeginDate     : Date;

        @Common.Label          : 'End Date'
        EndDate       : Date;

        @Common.Label          : 'Booking Fee'
        BookingFee    : Decimal(10, 2) default 0                  @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label          : 'Total Price'
        TotalPrice    : Decimal(10, 2)                            @readonly  @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label          : 'Currency'
        CurrencyCode  : Association to CurrencyCode default 'EUR' @mandatory;

        @Common.Label          : 'Description'
        Description   : String(1024);

        @Common.Label          : 'Travel Details'
        @UI.MultiLineText
        TravelDetails : String(1024);

        @title                 : 'Status'
        @Common.Text           : TravelStatus.name
        @Common.TextArrangement: #TextOnly
        TravelStatus  : Association to TravelStatus default 'O'   @readonly;

        @title                 : 'Agency'
        @Common.Text           : to_Agency.Name
        @Common.TextArrangement: #TextFirst
        to_Agency     : Association to TravelAgency               @mandatory;

        to_Booking    : Composition of many Booking
                          on to_Booking.to_Travel = $self;
  };

  entity Booking : managed {
    key BookingUUID   : UUID;

        @Common.Label: 'Booking ID'
        BookingID     : Integer                                  @Core.Computed;

        @Common.Label: 'Booking Date'
        BookingDate   : Date;

        @Common.Label: 'Connection'
        ConnectionID  : String(4)                                @mandatory;

        @Common.Label: 'Flight Date'
        FlightDate    : Date                                     @mandatory;

        @Common.Label: 'Flight Price'
        FlightPrice   : Decimal(10, 2)                           @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label: 'Currency'
        CurrencyCode  : Currency default 'EUR'                   @mandatory;

        @Common.Label: 'Status'
        BookingStatus : Association to BookingStatus default 'N' @mandatory;
        to_Travel     : Association to Travel                    @mandatory;

        PaymentMethod : String(1) default 'B'                    @Common              : {
          Label                   : 'Payment Method',
          Text                    : _Payment.Method,
          TextArrangement         : #TextOnly,
          ValueListWithFixedValues: true,
          ValueList               : {
            Label         : 'Payment Method',
            CollectionPath: 'Payment',
            Parameters    : [{
              $Type            : 'Common.ValueListParameterInOut',
              LocalDataProperty: PaymentMethod,
              ValueListProperty: 'code'
            }]
          }
        };
        _Payment      : Association to one Payment
                          on _Payment.code = PaymentMethod;
  };

  entity Payment {
    key code   : String(1) @(Common: {
          Label          : 'Payment Code',
          Text           : Method,
          TextArrangement: #TextFirst
        });
        Method : String    @(
          Core.Immutable: true,
          Common.Label  : 'Payment Method'
        );
  }

  entity TravelStatus : sap.common.CodeList {
    key code        : String(1) @Common.Text: descr;
        name        : String(255);
        descr       : String(1000);
        criticality : Int16     @odata.Type : 'Edm.Byte' enum {
          Neutral  = 0;
          Negative = 1;
          Critical = 2;
          Positive = 3;
          NewItem  = 5
        };
  };

  entity CurrencyCode : sap.common.CodeList {
        @Common.Label: 'Currency Code'
    key code  : String(3);

        @Common.Label: 'Currency Description'
        descr : String(255);
  };

  entity BookingStatus : sap.common.CodeList {
    key code : BookingStatusCode
  };

  entity TravelAgency : MasterData {
        @Common.Label: 'Agency ID'
        @Common.Text : Name
    key AgencyID       : String(6);

        @Common.Label: 'Agency Name'
        Name           : String(80);
        Street         : String(60);

        @Common.Label: 'Postal Code'
        PostalCode     : String(10);

        @Common.Label: 'City'
        City           : String(40);

        @Common.Label: 'Country Code'
        CountryCode    : Country;

        @Common.Label: 'Phone Number'
        PhoneNumber    : String(30);

        @Common.Label: 'Email Address'
        EMailAddress   : String(256);

        @Common.Label: 'Web Address'
        WebAddress     : String(256);
        Rating         : Integer;
        Recommendation : Integer;
  };

  type TravelStatusCode  : String(1) enum {
    Open     = 'O';
    Accepted = 'A';
    Canceled = 'X';
  };

  type BookingStatusCode : String(1) enum {
    New      = 'N';
    Booked   = 'B';
    Canceled = 'X';
  };
}

```

**FILE**: annotations.cds

**LANGUAGE**: CDS

**CODE**:
```cds
using TravelService as service from '../service/service';

annotate service.Travel {
  TravelStatus @Common.ValueListWithFixedValues;
  CurrencyCode @Common.ValueList: {
    CollectionPath: 'Currencies',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: CurrencyCode_code,
        ValueListProperty: 'code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'descr'
      }
    ]
  };
}

annotate service.Travel with @UI.LineItem: [
  {Value: TravelID},
  {
    $Type : 'UI.DataFieldForAnnotation',
    Target: '@UI.ConnectedFields#TripDates'
  },
  {Value: to_Agency_AgencyID},
  {
    Value             : TravelStatus_code,
    Criticality       : TravelStatus.criticality,
    @UI.Importance    : #High,
    @HTML5.CssDefaults: {width: '10em'}
  },
  {Value: BookingFee},
  {Value: TotalPrice}
];

annotate service.Travel with @(UI: {SelectionFields: [
  TravelID,
  to_Agency_AgencyID,
  TravelStatus_code,
  BeginDate,
  EndDate
]});

annotate service.Travel with @Capabilities.FilterRestrictions.FilterExpressionRestrictions: [
  {
    Property          : 'BeginDate',
    AllowedExpressions: 'SingleRange'
  },
  {
    Property          : 'EndDate',
    AllowedExpressions: 'SingleRange'
  }
];

annotate service.Travel with @(UI: {
  FieldGroup #TravelData    : {Data: [
    {Value: TravelID},
    {Value: to_Agency_AgencyID},
    {Value: BeginDate},
    {Value: EndDate}
  ]},
  FieldGroup #ApprovalData  : {Data: [
    {
      $Type      : 'UI.DataField',
      Value      : TravelStatus_code,
      Criticality: TravelStatus.criticality,
      Label      : 'Status'
    },
    {Value: BookingFee},
    {Value: TotalPrice}
  ]},
  FieldGroup #HeaderMain    : {Data: [
    {Value: BeginDate},
    {Value: EndDate},
    {Value: TotalPrice}
  ]},
  ConnectedFields #TripDates: {
    Label   : 'Business Trip Dates',
    Template: '{BeginDate} / {EndDate}',
    Data    : {
      BeginDate: {
        $Type: 'UI.DataField',
        Value: BeginDate
      },
      EndDate  : {
        $Type: 'UI.DataField',
        Value: EndDate
      }
    }
  },
  Facets                    : [
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'TravelData',
      Label : 'Travel Information',
      Target: '@UI.FieldGroup#TravelData',
    },
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'ApprovalData',
      Label : 'Approval Data',
      Target: '@UI.FieldGroup#ApprovalData'
    },
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'BookingList',
      Label : 'Bookings',
      Target: 'to_Booking/@UI.LineItem'
    }
  ],
  HeaderFacets              : [{
    $Type : 'UI.ReferenceFacet',
    Target: '@UI.FieldGroup#HeaderMain'
  }],
  HeaderInfo                : {
    TypeName      : 'Travel',
    TypeNamePlural: 'Travels',
    Title         : {
      $Type: 'UI.DataField',
      Value: Description
    },
    Description   : {
      $Type: 'UI.DataField',
      Value: TravelID
    },
    TypeImageUrl  : 'sap-icon://header',
  }
});

annotate service.Travel {
  to_Agency @Common.ValueList: {
    CollectionPath: 'TravelAgency',
    Label         : '',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: to_Agency_AgencyID,
        ValueListProperty: 'AgencyID'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'Name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'Street'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'PostalCode'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'City'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'CountryCode_code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'PhoneNumber'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'EMailAddress'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'WebAddress'
      }
    ]
  };
}

annotate service.TravelAgency with @(UI: {
  DataPoint #Recommendation: {
    Value        : Recommendation,
    TargetValue  : 100.0,
    Title        : 'Recommendation',
    Visualization: #Progress
  },
  DataPoint #Rating        : {
    Value        : Rating,
    TargetValue  : 5.0,
    Title        : 'Rating',
    Visualization: #Rating
  },
  FieldGroup #Contact      : {Data: [{
    $Type : 'UI.DataFieldForAnnotation',
    Target: '@Communication.Contact',
    Label : 'Travel Agency'
  }]}
});

annotate service.TravelAgency with @(
  Communication.Contact : {
    email: [{
      type   : #work,
      address: EMailAddress
    }],
    fn   : Name,
    adr  : [{
      type    : #work,
      code    : PostalCode,
      country : CountryCode_code,
      locality: City
    }]
  },
  Common.IsNaturalPerson: false
);

annotate service.Booking {
  CurrencyCode @Common.ValueList: {
    CollectionPath: 'Currencies',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: CurrencyCode_code,
        ValueListProperty: 'code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'descr'
      }
    ]
  };
}

annotate service.Booking with @(UI: {
  HeaderInfo: {
    TypeName      : 'Booking',
    TypeNamePlural: 'Bookings',
    TypeImageUrl  : 'sap-icon://alert',
    Title         : {
      $Type: 'UI.DataField',
      Value: BookingID
    }
  },
  Facets    : [{
    $Type : 'UI.ReferenceFacet',
    ID    : 'FacetIdentifier1',
    Target: '@UI.FieldGroup'
  }],
  LineItem  : [
    {Value: BookingID},
    {Value: BookingDate},
    {Value: ConnectionID},
    {Value: FlightDate},
    {Value: FlightPrice}
  ],
  FieldGroup: {Data: [
    {
      $Type: 'UI.DataField',
      Value: BookingID
    },
    {
      $Type: 'UI.DataField',
      Value: BookingDate
    },
    {
      $Type: 'UI.DataField',
      Value: FlightDate
    },
    {
      $Type: 'UI.DataField',
      Value: FlightPrice
    }
  ]}
});

annotate service.TravelAgency with @(UI: {FieldGroup #Link: {Data: [{
  $Type: 'UI.DataFieldWithUrl',
  Value: Name,
  Url  : WebAddress
}]}});

```

**FILE**: localService.cds

**LANGUAGE**: CDS

**CODE**:
```cds
using {TravelService.Travel} from '../../../../../service/service';
using from '../../../../../service/annotations';

extend entity TravelService.Travel with {
  FlightRoute : String(1024);
  CityFrom    : String;
  CityTo      : String;
};

```

**FILE**: Travel.json

**LANGUAGE**: JSON

**CODE**:
```json
[
	{
		"TravelUUID": "52657221A8E4645C17002DF03754AB66",
		"TravelID": "00000001",
		"BeginDate": "2023-08-04",
		"EndDate": "2023-08-04",
		"BookingFee": "20.00",
		"TotalPrice": "900.00",
		"CurrencyCode_code": "USD",
		"Description": "Business Trip for Christine, Pierre",
		"FlightRoute": "2.3522219;48.856614;0;-74.0059731;40.7143528;0",
		"CityFrom": "Paris",
		"CityTo": "New York",
		"TravelStatus_code": "A"
	},
	{
		"TravelUUID": "53657221A8E4645C17002DF03754AB66",
		"TravelID": "00000002",
		"BeginDate": "2023-08-04",
		"EndDate": "2024-06-02",
		"BookingFee": "80.00",
		"TotalPrice": "4164.00",
		"CurrencyCode_code": "USD",
		"Description": "Vacation",
		"FlightRoute": "2.3522219;48.856614;0;-74.0059731;40.7143528;0",
		"CityFrom": "Paris",
		"CityTo": "New York",
		"TravelStatus_code": "O"
	},
	{
		"TravelUUID": "54657221A8E4645C17002DF03754AB66",
		"TravelID": "00000003",
		"BeginDate": "2023-08-04",
		"EndDate": "2024-06-02",
		"BookingFee": "40.00",
		"TotalPrice": "1871.00",
		"CurrencyCode_code": "USD",
		"Description": "Vacation",
		"FlightRoute": "2.3522219;48.856614;0;-74.0059731;40.7143528;0",
		"CityFrom": "Paris",
		"CityTo": "New York",
		"TravelStatus_code": "X"
	}
]

```

Custom Section

object page extensions
custom section
custom subsection
custom action
custom header facet


**TITLE**: Custom Subsection

**INTRODUCTION**: No introduction

**TAGS**: building block table, UI.CollectionFacet, UI.ReferenceFacet

**STEP**: Configuring Subsections in the Manifest

**DESCRIPTION**: Define your custom subsections in the manifest.json file under content.body.sections.[sectionName].subSections. Each subsection references a fragment that contains the custom content.

**LANGUAGE**: JSON

**CODE**:
```json
{
	"_version": "1.12.0",
	"sap.app": {
		"id": "sap.fe.core.fpmExplorer.customSubSection",
		"type": "application",
		"i18n": {
			"bundleName": "sap.fe.core.fpmExplorer.customSubSection.i18n.i18n",
			"supportedLocales": [""],
			"fallbackLocale": ""
		},
		"applicationVersion": {
			"version": "1.0.0"
		},
		"dataSources": {
			"mainService": {
				"uri": "/sap/fe/core/mock/customSubSection/",
				"type": "OData",
				"settings": {
					"annotations": [],
					"odataVersion": "4.0"
				}
			}
		}
	},
	"sap.ui5": {
		"dependencies": {
			"minUI5Version": "1.111.1",
			"libs": {
				"sap.ui.core": {},
				"sap.fe.templates": {},
				"sap.ui.vbm": {}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.fe.core.fpmExplorer.customSubSection.i18n.i18n"
				}
			},
			"@i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.fe.core.fpmExplorer.customSubSection.i18n.i18n"
				}
			},
			"": {
				"dataSource": "mainService",
				"settings": {
					"operationMode": "Server",
					"autoExpandSelect": true,
					"earlyRequests": true
				}
			}
		},
		"rootView": {
			"viewName": "sap.fe.core.fpmExplorer.customSubSection.CustomSubSection"
		},
		"routing": {
			"config": {
				"controlId": "customSubSection"
			},
			"routes": [
				{
					"pattern": "/Travel({key}):?query:",
					"name": "default",
					"target": "sample"
				},
				{
					"pattern": "/Travel({key})/to_Booking({key2}):?query:",
					"name": "Booking",
					"target": "Booking"
				}
			],
			"targets": {
				"Booking": {
					"type": "Component",
					"id": "booking",
					"name": "sap.fe.templates.ObjectPage",
					"options": {
						"settings": {
							"contextPath": "/Travel/to_Booking"
						}
					}
				},
				"sample": {
					"type": "Component",
					"id": "Default",
					"name": "sap.fe.templates.ObjectPage",
					"viewLevel": 1,
					"options": {
						"settings": {
							"contextPath": "/Travel",
							"navigation": {
								"items": {
									"detail": {
										"route": "to_Booking"
									}
								}
							},
							"content": {
								"body": {
									"sections": {
										"TravelData": {
											"subSections": {
												"flightMap": {
													"name": "sap.fe.core.fpmExplorer.customSubSection.CustomSubSectionFlightMap",
													"type": "XMLFragment",
													"title": "{i18n>FlightMap}"
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
```

**STEP**: Defining Subsection Titles

**DESCRIPTION**: Define subsection titles using i18n keys to support multiple languages. The title property in the subsection configuration references the i18n bundle.

**LANGUAGE**: JSON

**CODE**:
```json
{
	"_version": "1.12.0",
	"sap.app": {
		"id": "sap.fe.core.fpmExplorer.customSubSection",
		"type": "application",
		"i18n": {
			"bundleName": "sap.fe.core.fpmExplorer.customSubSection.i18n.i18n",
			"supportedLocales": [""],
			"fallbackLocale": ""
		},
		"applicationVersion": {
			"version": "1.0.0"
		},
		"dataSources": {
			"mainService": {
				"uri": "/sap/fe/core/mock/customSubSection/",
				"type": "OData",
				"settings": {
					"annotations": [],
					"odataVersion": "4.0"
				}
			}
		}
	},
	"sap.ui5": {
		"dependencies": {
			"minUI5Version": "1.111.1",
			"libs": {
				"sap.ui.core": {},
				"sap.fe.templates": {},
				"sap.ui.vbm": {}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.fe.core.fpmExplorer.customSubSection.i18n.i18n"
				}
			},
			"@i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.fe.core.fpmExplorer.customSubSection.i18n.i18n"
				}
			},
			"": {
				"dataSource": "mainService",
				"settings": {
					"operationMode": "Server",
					"autoExpandSelect": true,
					"earlyRequests": true
				}
			}
		},
		"rootView": {
			"viewName": "sap.fe.core.fpmExplorer.customSubSection.CustomSubSection"
		},
		"routing": {
			"config": {
				"controlId": "customSubSection"
			},
			"routes": [
				{
					"pattern": "/Travel({key}):?query:",
					"name": "default",
					"target": "sample"
				},
				{
					"pattern": "/Travel({key})/to_Booking({key2}):?query:",
					"name": "Booking",
					"target": "Booking"
				}
			],
			"targets": {
				"Booking": {
					"type": "Component",
					"id": "booking",
					"name": "sap.fe.templates.ObjectPage",
					"options": {
						"settings": {
							"contextPath": "/Travel/to_Booking"
						}
					}
				},
				"sample": {
					"type": "Component",
					"id": "Default",
					"name": "sap.fe.templates.ObjectPage",
					"viewLevel": 1,
					"options": {
						"settings": {
							"contextPath": "/Travel",
							"navigation": {
								"items": {
									"detail": {
										"route": "to_Booking"
									}
								}
							},
							"content": {
								"body": {
									"sections": {
										"TravelData": {
											"subSections": {
												"flightMap": {
													"name": "sap.fe.core.fpmExplorer.customSubSection.CustomSubSectionFlightMap",
													"type": "XMLFragment",
													"title": "{i18n>FlightMap}"
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
```

**STEP**: Configuring the Fragment Type

**DESCRIPTION**: Set the fragment type to XMLFragment in the subsection configuration to ensure your custom content loads and renders correctly.

**LANGUAGE**: JSON

**CODE**:
```json
{
	"_version": "1.12.0",
	"sap.app": {
		"id": "sap.fe.core.fpmExplorer.customSubSection",
		"type": "application",
		"i18n": {
			"bundleName": "sap.fe.core.fpmExplorer.customSubSection.i18n.i18n",
			"supportedLocales": [""],
			"fallbackLocale": ""
		},
		"applicationVersion": {
			"version": "1.0.0"
		},
		"dataSources": {
			"mainService": {
				"uri": "/sap/fe/core/mock/customSubSection/",
				"type": "OData",
				"settings": {
					"annotations": [],
					"odataVersion": "4.0"
				}
			}
		}
	},
	"sap.ui5": {
		"dependencies": {
			"minUI5Version": "1.111.1",
			"libs": {
				"sap.ui.core": {},
				"sap.fe.templates": {},
				"sap.ui.vbm": {}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.fe.core.fpmExplorer.customSubSection.i18n.i18n"
				}
			},
			"@i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.fe.core.fpmExplorer.customSubSection.i18n.i18n"
				}
			},
			"": {
				"dataSource": "mainService",
				"settings": {
					"operationMode": "Server",
					"autoExpandSelect": true,
					"earlyRequests": true
				}
			}
		},
		"rootView": {
			"viewName": "sap.fe.core.fpmExplorer.customSubSection.CustomSubSection"
		},
		"routing": {
			"config": {
				"controlId": "customSubSection"
			},
			"routes": [
				{
					"pattern": "/Travel({key}):?query:",
					"name": "default",
					"target": "sample"
				},
				{
					"pattern": "/Travel({key})/to_Booking({key2}):?query:",
					"name": "Booking",
					"target": "Booking"
				}
			],
			"targets": {
				"Booking": {
					"type": "Component",
					"id": "booking",
					"name": "sap.fe.templates.ObjectPage",
					"options": {
						"settings": {
							"contextPath": "/Travel/to_Booking"
						}
					}
				},
				"sample": {
					"type": "Component",
					"id": "Default",
					"name": "sap.fe.templates.ObjectPage",
					"viewLevel": 1,
					"options": {
						"settings": {
							"contextPath": "/Travel",
							"navigation": {
								"items": {
									"detail": {
										"route": "to_Booking"
									}
								}
							},
							"content": {
								"body": {
									"sections": {
										"TravelData": {
											"subSections": {
												"flightMap": {
													"name": "sap.fe.core.fpmExplorer.customSubSection.CustomSubSectionFlightMap",
													"type": "XMLFragment",
													"title": "{i18n>FlightMap}"
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
```

**STEP**: Defining a Custom Subsection Fragment

**DESCRIPTION**: Create a fragment that defines your custom subsection content. This example shows a flight map visualization using the VBM (Visual Business Map) control within a subsection.

**LANGUAGE**: XML

**CODE**:
```xml
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:vbm="sap.ui.vbm" height="100%" displayBlock="true">
	<vbm:AnalyticMap id="vbi-subsection" width="100%" height="600px">
		<vbm:vos>
			<vbm:Routes>
				<vbm:Route
					position="{FlightRoute}"
					color="rgb(117,148,34)"
					colorBorder="rgb(255,255,255)"
					linewidth="3"
					routetype="Geodesic"
				/>
			</vbm:Routes>
		</vbm:vos>
	</vbm:AnalyticMap>
</core:FragmentDefinition>
```

**ADDITIONAL RELATED CODE BLOCKS**:

**FILE**: service.cds

**LANGUAGE**: CDS

**CODE**:
```cds
using {
  sap,
  managed,
  Currency,
  Country
} from '@sap/cds/common';

using from '../service/annotations';

@cds.autoexpose  @readonly
aspect MasterData {}

service TravelService {
  @odata.draft.enabled
  @Common.SemanticKey: [TravelID]

  entity Travel : managed {
    key TravelUUID    : UUID;

        @Common.Label          : 'ID'
        @Common.Text           : Description
        TravelID      : Integer default 0                         @readonly;

        @Common.Label          : 'Begin Date'
        BeginDate     : Date;

        @Common.Label          : 'End Date'
        EndDate       : Date;

        @Common.Label          : 'Booking Fee'
        BookingFee    : Decimal(10, 2) default 0                  @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label          : 'Total Price'
        TotalPrice    : Decimal(10, 2)                            @readonly  @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label          : 'Currency'
        CurrencyCode  : Association to CurrencyCode default 'EUR' @mandatory;

        @Common.Label          : 'Description'
        Description   : String(1024);

        @Common.Label          : 'Travel Details'
        @UI.MultiLineText
        TravelDetails : String(1024);

        @title                 : 'Status'
        @Common.Text           : TravelStatus.name
        @Common.TextArrangement: #TextOnly
        TravelStatus  : Association to TravelStatus default 'O'   @readonly;

        @title                 : 'Agency'
        @Common.Text           : to_Agency.Name
        @Common.TextArrangement: #TextFirst
        to_Agency     : Association to TravelAgency               @mandatory;

        to_Booking    : Composition of many Booking
                          on to_Booking.to_Travel = $self;
  };

  entity Booking : managed {
    key BookingUUID   : UUID;

        @Common.Label: 'Booking ID'
        BookingID     : Integer                                  @Core.Computed;

        @Common.Label: 'Booking Date'
        BookingDate   : Date;

        @Common.Label: 'Connection'
        ConnectionID  : String(4)                                @mandatory;

        @Common.Label: 'Flight Date'
        FlightDate    : Date                                     @mandatory;

        @Common.Label: 'Flight Price'
        FlightPrice   : Decimal(10, 2)                           @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label: 'Currency'
        CurrencyCode  : Currency default 'EUR'                   @mandatory;

        @Common.Label: 'Status'
        BookingStatus : Association to BookingStatus default 'N' @mandatory;
        to_Travel     : Association to Travel                    @mandatory;

        PaymentMethod : String(1) default 'B'                    @Common              : {
          Label                   : 'Payment Method',
          Text                    : _Payment.Method,
          TextArrangement         : #TextOnly,
          ValueListWithFixedValues: true,
          ValueList               : {
            Label         : 'Payment Method',
            CollectionPath: 'Payment',
            Parameters    : [{
              $Type            : 'Common.ValueListParameterInOut',
              LocalDataProperty: PaymentMethod,
              ValueListProperty: 'code'
            }]
          }
        };
        _Payment      : Association to one Payment
                          on _Payment.code = PaymentMethod;
  };

  entity Payment {
    key code   : String(1) @(Common: {
          Label          : 'Payment Code',
          Text           : Method,
          TextArrangement: #TextFirst
        });
        Method : String    @(
          Core.Immutable: true,
          Common.Label  : 'Payment Method'
        );
  }

  entity TravelStatus : sap.common.CodeList {
    key code        : String(1) @Common.Text: descr;
        name        : String(255);
        descr       : String(1000);
        criticality : Int16     @odata.Type : 'Edm.Byte' enum {
          Neutral  = 0;
          Negative = 1;
          Critical = 2;
          Positive = 3;
          NewItem  = 5
        };
  };

  entity CurrencyCode : sap.common.CodeList {
        @Common.Label: 'Currency Code'
    key code  : String(3);

        @Common.Label: 'Currency Description'
        descr : String(255);
  };

  entity BookingStatus : sap.common.CodeList {
    key code : BookingStatusCode
  };

  entity TravelAgency : MasterData {
        @Common.Label: 'Agency ID'
        @Common.Text : Name
    key AgencyID       : String(6);

        @Common.Label: 'Agency Name'
        Name           : String(80);
        Street         : String(60);

        @Common.Label: 'Postal Code'
        PostalCode     : String(10);

        @Common.Label: 'City'
        City           : String(40);

        @Common.Label: 'Country Code'
        CountryCode    : Country;

        @Common.Label: 'Phone Number'
        PhoneNumber    : String(30);

        @Common.Label: 'Email Address'
        EMailAddress   : String(256);

        @Common.Label: 'Web Address'
        WebAddress     : String(256);
        Rating         : Integer;
        Recommendation : Integer;
  };

  type TravelStatusCode  : String(1) enum {
    Open     = 'O';
    Accepted = 'A';
    Canceled = 'X';
  };

  type BookingStatusCode : String(1) enum {
    New      = 'N';
    Booked   = 'B';
    Canceled = 'X';
  };
}

```

**FILE**: annotations.cds

**LANGUAGE**: CDS

**CODE**:
```cds
using TravelService as service from '../service/service';

annotate service.Travel {
  TravelStatus @Common.ValueListWithFixedValues;
  CurrencyCode @Common.ValueList: {
    CollectionPath: 'Currencies',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: CurrencyCode_code,
        ValueListProperty: 'code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'descr'
      }
    ]
  };
}

annotate service.Travel with @UI.LineItem: [
  {Value: TravelID},
  {
    $Type : 'UI.DataFieldForAnnotation',
    Target: '@UI.ConnectedFields#TripDates'
  },
  {Value: to_Agency_AgencyID},
  {
    Value             : TravelStatus_code,
    Criticality       : TravelStatus.criticality,
    @UI.Importance    : #High,
    @HTML5.CssDefaults: {width: '10em'}
  },
  {Value: BookingFee},
  {Value: TotalPrice}
];

annotate service.Travel with @(UI: {SelectionFields: [
  TravelID,
  to_Agency_AgencyID,
  TravelStatus_code,
  BeginDate,
  EndDate
]});

annotate service.Travel with @Capabilities.FilterRestrictions.FilterExpressionRestrictions: [
  {
    Property          : 'BeginDate',
    AllowedExpressions: 'SingleRange'
  },
  {
    Property          : 'EndDate',
    AllowedExpressions: 'SingleRange'
  }
];

annotate service.Travel with @(UI: {
  FieldGroup #TravelData    : {Data: [
    {Value: TravelID},
    {Value: to_Agency_AgencyID},
    {Value: BeginDate},
    {Value: EndDate}
  ]},
  FieldGroup #ApprovalData  : {Data: [
    {
      $Type      : 'UI.DataField',
      Value      : TravelStatus_code,
      Criticality: TravelStatus.criticality,
      Label      : 'Status'
    },
    {Value: BookingFee},
    {Value: TotalPrice}
  ]},
  FieldGroup #HeaderMain    : {Data: [
    {Value: BeginDate},
    {Value: EndDate},
    {Value: TotalPrice}
  ]},
  ConnectedFields #TripDates: {
    Label   : 'Business Trip Dates',
    Template: '{BeginDate} / {EndDate}',
    Data    : {
      BeginDate: {
        $Type: 'UI.DataField',
        Value: BeginDate
      },
      EndDate  : {
        $Type: 'UI.DataField',
        Value: EndDate
      }
    }
  },
  Facets                    : [
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'TravelData',
      Label : 'Travel Information',
      Target: '@UI.FieldGroup#TravelData',
    },
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'ApprovalData',
      Label : 'Approval Data',
      Target: '@UI.FieldGroup#ApprovalData'
    },
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'BookingList',
      Label : 'Bookings',
      Target: 'to_Booking/@UI.LineItem'
    }
  ],
  HeaderFacets              : [{
    $Type : 'UI.ReferenceFacet',
    Target: '@UI.FieldGroup#HeaderMain'
  }],
  HeaderInfo                : {
    TypeName      : 'Travel',
    TypeNamePlural: 'Travels',
    Title         : {
      $Type: 'UI.DataField',
      Value: Description
    },
    Description   : {
      $Type: 'UI.DataField',
      Value: TravelID
    },
    TypeImageUrl  : 'sap-icon://header',
  }
});

annotate service.Travel {
  to_Agency @Common.ValueList: {
    CollectionPath: 'TravelAgency',
    Label         : '',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: to_Agency_AgencyID,
        ValueListProperty: 'AgencyID'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'Name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'Street'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'PostalCode'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'City'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'CountryCode_code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'PhoneNumber'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'EMailAddress'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'WebAddress'
      }
    ]
  };
}

annotate service.TravelAgency with @(UI: {
  DataPoint #Recommendation: {
    Value        : Recommendation,
    TargetValue  : 100.0,
    Title        : 'Recommendation',
    Visualization: #Progress
  },
  DataPoint #Rating        : {
    Value        : Rating,
    TargetValue  : 5.0,
    Title        : 'Rating',
    Visualization: #Rating
  },
  FieldGroup #Contact      : {Data: [{
    $Type : 'UI.DataFieldForAnnotation',
    Target: '@Communication.Contact',
    Label : 'Travel Agency'
  }]}
});

annotate service.TravelAgency with @(
  Communication.Contact : {
    email: [{
      type   : #work,
      address: EMailAddress
    }],
    fn   : Name,
    adr  : [{
      type    : #work,
      code    : PostalCode,
      country : CountryCode_code,
      locality: City
    }]
  },
  Common.IsNaturalPerson: false
);

annotate service.Booking {
  CurrencyCode @Common.ValueList: {
    CollectionPath: 'Currencies',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: CurrencyCode_code,
        ValueListProperty: 'code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'descr'
      }
    ]
  };
}

annotate service.Booking with @(UI: {
  HeaderInfo: {
    TypeName      : 'Booking',
    TypeNamePlural: 'Bookings',
    TypeImageUrl  : 'sap-icon://alert',
    Title         : {
      $Type: 'UI.DataField',
      Value: BookingID
    }
  },
  Facets    : [{
    $Type : 'UI.ReferenceFacet',
    ID    : 'FacetIdentifier1',
    Target: '@UI.FieldGroup'
  }],
  LineItem  : [
    {Value: BookingID},
    {Value: BookingDate},
    {Value: ConnectionID},
    {Value: FlightDate},
    {Value: FlightPrice}
  ],
  FieldGroup: {Data: [
    {
      $Type: 'UI.DataField',
      Value: BookingID
    },
    {
      $Type: 'UI.DataField',
      Value: BookingDate
    },
    {
      $Type: 'UI.DataField',
      Value: FlightDate
    },
    {
      $Type: 'UI.DataField',
      Value: FlightPrice
    }
  ]}
});

annotate service.TravelAgency with @(UI: {FieldGroup #Link: {Data: [{
  $Type: 'UI.DataFieldWithUrl',
  Value: Name,
  Url  : WebAddress
}]}});

```

**FILE**: localService.cds

**LANGUAGE**: CDS

**CODE**:
```cds
using {TravelService.Travel} from '../../../../../service/service';
using from '../../../../../service/annotations';

extend entity TravelService.Travel with {
  FlightRoute : String(1024);
  CityFrom    : String;
  CityTo      : String;
};

```

**FILE**: Travel.json

**LANGUAGE**: JSON

**CODE**:
```json
[
	{
		"TravelUUID": "52657221A8E4645C17002DF03754AB66",
		"TravelID": "00000001",
		"BeginDate": "2023-08-04",
		"EndDate": "2023-08-04",
		"BookingFee": "20.00",
		"TotalPrice": "900.00",
		"CurrencyCode_code": "USD",
		"Description": "Business Trip for Christine, Pierre",
		"FlightRoute": "2.3522219;48.856614;0;-74.0059731;40.7143528;0",
		"CityFrom": "Paris",
		"CityTo": "New York",
		"TravelStatus_code": "A"
	},
	{
		"TravelUUID": "53657221A8E4645C17002DF03754AB66",
		"TravelID": "00000002",
		"BeginDate": "2023-08-04",
		"EndDate": "2024-06-02",
		"BookingFee": "80.00",
		"TotalPrice": "4164.00",
		"CurrencyCode_code": "USD",
		"Description": "Vacation",
		"FlightRoute": "2.3522219;48.856614;0;-74.0059731;40.7143528;0",
		"CityFrom": "Paris",
		"CityTo": "New York",
		"TravelStatus_code": "O"
	},
	{
		"TravelUUID": "54657221A8E4645C17002DF03754AB66",
		"TravelID": "00000003",
		"BeginDate": "2023-08-04",
		"EndDate": "2024-06-02",
		"BookingFee": "40.00",
		"TotalPrice": "1871.00",
		"CurrencyCode_code": "USD",
		"Description": "Vacation",
		"FlightRoute": "2.3522219;48.856614;0;-74.0059731;40.7143528;0",
		"CityFrom": "Paris",
		"CityTo": "New York",
		"TravelStatus_code": "X"
	}
]

```

Custom Subsection


**TITLE**: Show/Hide Content

**INTRODUCTION**: No introduction

**TAGS**: UI.PartOfPreview, show more, show details, show less

**STEP**: Show or Hide Fields

**DESCRIPTION**: You can show or hide fields inside reference facets by applying the @UI.PartOfPreview annotation. This renders the Show Details and Hide Details buttons.

**LANGUAGE**: CDS

**CODE**:
```cds
using {TravelService.Travel} from '../../../../../service/service';
using from '../../../../../service/annotations';

annotate TravelService.Travel with @(UI: {
  Facets                : [
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'TravelData',
      Label : 'Travel Information',
      Target: '@UI.FieldGroup#TravelData'
    },
    {
      $Type               : 'UI.ReferenceFacet',
      ID                  : 'BookingList',
      Label               : 'Bookings',
      Target              : 'to_Booking/@UI.LineItem',
      ![@UI.PartOfPreview]: false
    }
  ],

  FieldGroup #TravelData: {Data: [
    {Value: TravelID},
    {Value: to_Agency_AgencyID},
    {
      Value               : BeginDate,
      ![@UI.PartOfPreview]: false
    },
    {
      Value               : EndDate,
      ![@UI.PartOfPreview]: false
    }
  ]}
});
```

**LANGUAGE**: XML

**CODE**:
```xml
<Annotation Term="UI.FieldGroup" Qualifier="TravelData">
	<Record Type="UI.FieldGroupType">
		<PropertyValue Property="Data">
			<Collection>
				<Record Type="UI.DataField">
					<PropertyValue Property="Value" Path="TravelID" />
				</Record>
				<Record Type="UI.DataField">
					<PropertyValue Property="Value" Path="to_Agency_AgencyID" />
				</Record>
				<Record Type="UI.DataField">
					<PropertyValue Property="Value" Path="BeginDate" />
					<Annotation Term="UI.PartOfPreview" Bool="false" />
				</Record>
				<Record Type="UI.DataField">
					<PropertyValue Property="Value" Path="EndDate" />
					<Annotation Term="UI.PartOfPreview" Bool="false" />
				</Record>
			</Collection>
		</PropertyValue>
	</Record>
</Annotation>
```

**STEP**: Show or Hide Facets

**DESCRIPTION**: You can show or hide reference facets by applying the @UI.PartOfPreview annotation on facet level. This renders the Show More and Show Less buttons.

**LANGUAGE**: CDS

**CODE**:
```cds
using {TravelService.Travel} from '../../../../../service/service';
using from '../../../../../service/annotations';

annotate TravelService.Travel with @(UI: {
  Facets                : [
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'TravelData',
      Label : 'Travel Information',
      Target: '@UI.FieldGroup#TravelData'
    },
    {
      $Type               : 'UI.ReferenceFacet',
      ID                  : 'BookingList',
      Label               : 'Bookings',
      Target              : 'to_Booking/@UI.LineItem',
      ![@UI.PartOfPreview]: false
    }
  ],

  FieldGroup #TravelData: {Data: [
    {Value: TravelID},
    {Value: to_Agency_AgencyID},
    {
      Value               : BeginDate,
      ![@UI.PartOfPreview]: false
    },
    {
      Value               : EndDate,
      ![@UI.PartOfPreview]: false
    }
  ]}
});
```

**LANGUAGE**: ABAP

**CODE**:
```abap
@UI: {
    facet: [{
        id: 'BookingList',
        type: #LINEITEM_REFERENCE,
        label: 'Bookings',
        targetElement: '_Booking',
        targetQualifier: 'bookingTable',
        isPartOfPreview: false
    }]
}
```

**LANGUAGE**: XML

**CODE**:
```xml
<Record Type="UI.ReferenceFacet">
	<PropertyValue Property="Label" String="Bookings" />
	<PropertyValue Property="ID" String="BookingList" />
	<PropertyValue Property="Target" AnnotationPath="to_Booking/@UI.LineItem" />
	<Annotation Term="UI.PartOfPreview" Bool="false" />
</Record>
```

Show/Hide Content

UI.PartOfPreview
show more
show details
show less


**TITLE**: Object Page

**INTRODUCTION**: No introduction

**TAGS**: object page, ObjectPage, overview, detail view, entity, sections

**STEP**: Header Facet

**DESCRIPTION**: The object page consists of facets that display data. You can use the header facet and header info to show essential business object details that remain permanently visible on the UI.

**LANGUAGE**: CDS

**CODE**:
```cds
using TravelService as service from '../service/service';

annotate service.Travel {
  TravelStatus @Common.ValueListWithFixedValues;
  CurrencyCode @Common.ValueList: {
    CollectionPath: 'Currencies',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: CurrencyCode_code,
        ValueListProperty: 'code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'descr'
      }
    ]
  };
}

annotate service.Travel with @UI.LineItem: [
  {Value: TravelID},
  {
    $Type : 'UI.DataFieldForAnnotation',
    Target: '@UI.ConnectedFields#TripDates'
  },
  {Value: to_Agency_AgencyID},
  {
    Value             : TravelStatus_code,
    Criticality       : TravelStatus.criticality,
    @UI.Importance    : #High,
    @HTML5.CssDefaults: {width: '10em'}
  },
  {Value: BookingFee},
  {Value: TotalPrice}
];

annotate service.Travel with @(UI: {SelectionFields: [
  TravelID,
  to_Agency_AgencyID,
  TravelStatus_code,
  BeginDate,
  EndDate
]});

annotate service.Travel with @Capabilities.FilterRestrictions.FilterExpressionRestrictions: [
  {
    Property          : 'BeginDate',
    AllowedExpressions: 'SingleRange'
  },
  {
    Property          : 'EndDate',
    AllowedExpressions: 'SingleRange'
  }
];

annotate service.Travel with @(UI: {
  FieldGroup #TravelData    : {Data: [
    {Value: TravelID},
    {Value: to_Agency_AgencyID},
    {Value: BeginDate},
    {Value: EndDate}
  ]},
  FieldGroup #ApprovalData  : {Data: [
    {
      $Type      : 'UI.DataField',
      Value      : TravelStatus_code,
      Criticality: TravelStatus.criticality,
      Label      : 'Status'
    },
    {Value: BookingFee},
    {Value: TotalPrice}
  ]},
  FieldGroup #HeaderMain    : {Data: [
    {Value: BeginDate},
    {Value: EndDate},
    {Value: TotalPrice}
  ]},
  ConnectedFields #TripDates: {
    Label   : 'Business Trip Dates',
    Template: '{BeginDate} / {EndDate}',
    Data    : {
      BeginDate: {
        $Type: 'UI.DataField',
        Value: BeginDate
      },
      EndDate  : {
        $Type: 'UI.DataField',
        Value: EndDate
      }
    }
  },
  Facets                    : [
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'TravelData',
      Label : 'Travel Information',
      Target: '@UI.FieldGroup#TravelData',
    },
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'ApprovalData',
      Label : 'Approval Data',
      Target: '@UI.FieldGroup#ApprovalData'
    },
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'BookingList',
      Label : 'Bookings',
      Target: 'to_Booking/@UI.LineItem'
    }
  ],
  HeaderFacets              : [{
    $Type : 'UI.ReferenceFacet',
    Target: '@UI.FieldGroup#HeaderMain'
  }],
  HeaderInfo                : {
    TypeName      : 'Travel',
    TypeNamePlural: 'Travels',
    Title         : {
      $Type: 'UI.DataField',
      Value: Description
    },
    Description   : {
      $Type: 'UI.DataField',
      Value: TravelID
    },
    TypeImageUrl  : 'sap-icon://header',
  }
});

annotate service.Travel {
  to_Agency @Common.ValueList: {
    CollectionPath: 'TravelAgency',
    Label         : '',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: to_Agency_AgencyID,
        ValueListProperty: 'AgencyID'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'Name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'Street'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'PostalCode'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'City'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'CountryCode_code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'PhoneNumber'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'EMailAddress'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'WebAddress'
      }
    ]
  };
}

annotate service.TravelAgency with @(UI: {
  DataPoint #Recommendation: {
    Value        : Recommendation,
    TargetValue  : 100.0,
    Title        : 'Recommendation',
    Visualization: #Progress
  },
  DataPoint #Rating        : {
    Value        : Rating,
    TargetValue  : 5.0,
    Title        : 'Rating',
    Visualization: #Rating
  },
  FieldGroup #Contact      : {Data: [{
    $Type : 'UI.DataFieldForAnnotation',
    Target: '@Communication.Contact',
    Label : 'Travel Agency'
  }]}
});

annotate service.TravelAgency with @(
  Communication.Contact : {
    email: [{
      type   : #work,
      address: EMailAddress
    }],
    fn   : Name,
    adr  : [{
      type    : #work,
      code    : PostalCode,
      country : CountryCode_code,
      locality: City
    }]
  },
  Common.IsNaturalPerson: false
);

annotate service.Booking {
  CurrencyCode @Common.ValueList: {
    CollectionPath: 'Currencies',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: CurrencyCode_code,
        ValueListProperty: 'code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'descr'
      }
    ]
  };
}

annotate service.Booking with @(UI: {
  HeaderInfo: {
    TypeName      : 'Booking',
    TypeNamePlural: 'Bookings',
    TypeImageUrl  : 'sap-icon://alert',
    Title         : {
      $Type: 'UI.DataField',
      Value: BookingID
    }
  },
  Facets    : [{
    $Type : 'UI.ReferenceFacet',
    ID    : 'FacetIdentifier1',
    Target: '@UI.FieldGroup'
  }],
  LineItem  : [
    {Value: BookingID},
    {Value: BookingDate},
    {Value: ConnectionID},
    {Value: FlightDate},
    {Value: FlightPrice}
  ],
  FieldGroup: {Data: [
    {
      $Type: 'UI.DataField',
      Value: BookingID
    },
    {
      $Type: 'UI.DataField',
      Value: BookingDate
    },
    {
      $Type: 'UI.DataField',
      Value: FlightDate
    },
    {
      $Type: 'UI.DataField',
      Value: FlightPrice
    }
  ]}
});

annotate service.TravelAgency with @(UI: {FieldGroup #Link: {Data: [{
  $Type: 'UI.DataFieldWithUrl',
  Value: Name,
  Url  : WebAddress
}]}});
```

**LANGUAGE**: XML

**CODE**:
```xml
<Annotations Target="TravelService.Travel">
	...
	<Annotation Term="UI.HeaderFacets">
		<Collection>
			<Record Type="UI.ReferenceFacet">
				<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#HeaderMain" />
			</Record>
		</Collection>
	</Annotation>

	<Annotation Term="UI.HeaderInfo">
		<Record Type="UI.HeaderInfoType">
			<PropertyValue Property="TypeName" String="Travel" />
			<PropertyValue Property="TypeNamePlural" String="Travels" />
			<PropertyValue Property="Title">
				<Record Type="UI.DataField">
					<PropertyValue Property="Value" Path="TravelID" />
				</Record>
			</PropertyValue>
			<PropertyValue Property="Description">
				<Record Type="UI.DataField">
					<PropertyValue Property="Value" Path="Description" />
				</Record>
			</PropertyValue>
			<PropertyValue Property="TypeImageUrl" String="sap-icon://header" />
		</Record>
	</Annotation>
</Annotations>
```

**STEP**: Facets

**DESCRIPTION**: You can use facets to show the data collected in field groups, and to group and show related information on the UI. Facets correspond to sections on the UI.

**LANGUAGE**: CDS

**CODE**:
```cds
using TravelService as service from '../service/service';

annotate service.Travel {
  TravelStatus @Common.ValueListWithFixedValues;
  CurrencyCode @Common.ValueList: {
    CollectionPath: 'Currencies',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: CurrencyCode_code,
        ValueListProperty: 'code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'descr'
      }
    ]
  };
}

annotate service.Travel with @UI.LineItem: [
  {Value: TravelID},
  {
    $Type : 'UI.DataFieldForAnnotation',
    Target: '@UI.ConnectedFields#TripDates'
  },
  {Value: to_Agency_AgencyID},
  {
    Value             : TravelStatus_code,
    Criticality       : TravelStatus.criticality,
    @UI.Importance    : #High,
    @HTML5.CssDefaults: {width: '10em'}
  },
  {Value: BookingFee},
  {Value: TotalPrice}
];

annotate service.Travel with @(UI: {SelectionFields: [
  TravelID,
  to_Agency_AgencyID,
  TravelStatus_code,
  BeginDate,
  EndDate
]});

annotate service.Travel with @Capabilities.FilterRestrictions.FilterExpressionRestrictions: [
  {
    Property          : 'BeginDate',
    AllowedExpressions: 'SingleRange'
  },
  {
    Property          : 'EndDate',
    AllowedExpressions: 'SingleRange'
  }
];

annotate service.Travel with @(UI: {
  FieldGroup #TravelData    : {Data: [
    {Value: TravelID},
    {Value: to_Agency_AgencyID},
    {Value: BeginDate},
    {Value: EndDate}
  ]},
  FieldGroup #ApprovalData  : {Data: [
    {
      $Type      : 'UI.DataField',
      Value      : TravelStatus_code,
      Criticality: TravelStatus.criticality,
      Label      : 'Status'
    },
    {Value: BookingFee},
    {Value: TotalPrice}
  ]},
  FieldGroup #HeaderMain    : {Data: [
    {Value: BeginDate},
    {Value: EndDate},
    {Value: TotalPrice}
  ]},
  ConnectedFields #TripDates: {
    Label   : 'Business Trip Dates',
    Template: '{BeginDate} / {EndDate}',
    Data    : {
      BeginDate: {
        $Type: 'UI.DataField',
        Value: BeginDate
      },
      EndDate  : {
        $Type: 'UI.DataField',
        Value: EndDate
      }
    }
  },
  Facets                    : [
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'TravelData',
      Label : 'Travel Information',
      Target: '@UI.FieldGroup#TravelData',
    },
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'ApprovalData',
      Label : 'Approval Data',
      Target: '@UI.FieldGroup#ApprovalData'
    },
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'BookingList',
      Label : 'Bookings',
      Target: 'to_Booking/@UI.LineItem'
    }
  ],
  HeaderFacets              : [{
    $Type : 'UI.ReferenceFacet',
    Target: '@UI.FieldGroup#HeaderMain'
  }],
  HeaderInfo                : {
    TypeName      : 'Travel',
    TypeNamePlural: 'Travels',
    Title         : {
      $Type: 'UI.DataField',
      Value: Description
    },
    Description   : {
      $Type: 'UI.DataField',
      Value: TravelID
    },
    TypeImageUrl  : 'sap-icon://header',
  }
});

annotate service.Travel {
  to_Agency @Common.ValueList: {
    CollectionPath: 'TravelAgency',
    Label         : '',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: to_Agency_AgencyID,
        ValueListProperty: 'AgencyID'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'Name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'Street'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'PostalCode'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'City'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'CountryCode_code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'PhoneNumber'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'EMailAddress'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'WebAddress'
      }
    ]
  };
}

annotate service.TravelAgency with @(UI: {
  DataPoint #Recommendation: {
    Value        : Recommendation,
    TargetValue  : 100.0,
    Title        : 'Recommendation',
    Visualization: #Progress
  },
  DataPoint #Rating        : {
    Value        : Rating,
    TargetValue  : 5.0,
    Title        : 'Rating',
    Visualization: #Rating
  },
  FieldGroup #Contact      : {Data: [{
    $Type : 'UI.DataFieldForAnnotation',
    Target: '@Communication.Contact',
    Label : 'Travel Agency'
  }]}
});

annotate service.TravelAgency with @(
  Communication.Contact : {
    email: [{
      type   : #work,
      address: EMailAddress
    }],
    fn   : Name,
    adr  : [{
      type    : #work,
      code    : PostalCode,
      country : CountryCode_code,
      locality: City
    }]
  },
  Common.IsNaturalPerson: false
);

annotate service.Booking {
  CurrencyCode @Common.ValueList: {
    CollectionPath: 'Currencies',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: CurrencyCode_code,
        ValueListProperty: 'code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'descr'
      }
    ]
  };
}

annotate service.Booking with @(UI: {
  HeaderInfo: {
    TypeName      : 'Booking',
    TypeNamePlural: 'Bookings',
    TypeImageUrl  : 'sap-icon://alert',
    Title         : {
      $Type: 'UI.DataField',
      Value: BookingID
    }
  },
  Facets    : [{
    $Type : 'UI.ReferenceFacet',
    ID    : 'FacetIdentifier1',
    Target: '@UI.FieldGroup'
  }],
  LineItem  : [
    {Value: BookingID},
    {Value: BookingDate},
    {Value: ConnectionID},
    {Value: FlightDate},
    {Value: FlightPrice}
  ],
  FieldGroup: {Data: [
    {
      $Type: 'UI.DataField',
      Value: BookingID
    },
    {
      $Type: 'UI.DataField',
      Value: BookingDate
    },
    {
      $Type: 'UI.DataField',
      Value: FlightDate
    },
    {
      $Type: 'UI.DataField',
      Value: FlightPrice
    }
  ]}
});

annotate service.TravelAgency with @(UI: {FieldGroup #Link: {Data: [{
  $Type: 'UI.DataFieldWithUrl',
  Value: Name,
  Url  : WebAddress
}]}});
```

**LANGUAGE**: XML

**CODE**:
```xml
<Annotations Target="TravelService.Travel">
	...
	<Annotation Term="UI.Facets">
		<Collection>
			<Record Type="UI.ReferenceFacet">
				<PropertyValue Property="ID" String="TravelData" />
				<PropertyValue Property="Label" String="Travel Information" />
				<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#TravelData" />
			</Record>
			<Record Type="UI.ReferenceFacet">
				<PropertyValue Property="ID" String="ApprovalData" />
				<PropertyValue Property="Label" String="Approval Data" />
				<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#ApprovalData" />
			</Record>
			<Record Type="UI.ReferenceFacet">
				<PropertyValue Property="ID" String="BookingList" />
				<PropertyValue Property="Label" String="Bookings" />
				<PropertyValue Property="Target" AnnotationPath="to_Booking/@UI.LineItem" />
			</Record>
		</Collection>
	</Annotation>
</Annotations>
```

**ADDITIONAL RELATED CODE BLOCKS**:

**FILE**: manifest.json

**LANGUAGE**: JSON

**CODE**:
```json
{
	"_version": "1.12.0",
	"sap.app": {
		"id": "sap.fe.core.fpmExplorer.simpleObjectPage",
		"type": "application",
		"i18n": {
			"bundleUrl": "i18n/i18n.properties",
			"supportedLocales": [""],
			"fallbackLocale": ""
		},
		"applicationVersion": {
			"version": "1.0.0"
		},
		"dataSources": {
			"mainService": {
				"uri": "/sap/fe/core/mock/service/",
				"type": "OData",
				"settings": {
					"annotations": [],
					"odataVersion": "4.0"
				}
			}
		}
	},
	"sap.ui5": {
		"dependencies": {
			"minUI5Version": "1.111.1",
			"libs": {
				"sap.ui.core": {},
				"sap.fe.templates": {}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"": {
				"dataSource": "mainService",
				"settings": {
					"operationMode": "Server",
					"autoExpandSelect": true,
					"earlyRequests": true
				}
			}
		},
		"rootView": {
			"viewName": "sap.fe.core.fpmExplorer.simpleObjectPage.SimpleObjectPage"
		},
		"routing": {
			"routes": [
				{
					"pattern": "/Travel({key}):?query:",
					"name": "objectPage",
					"target": "objectPage"
				},
				{
					"pattern": "/Travel({key})/to_Booking({key2}):?query:",
					"name": "subObjectPage",
					"target": "subObjectPage"
				}
			],
			"targets": {
				"objectPage": {
					"type": "Component",
					"id": "Default",
					"name": "sap.fe.templates.ObjectPage",
					"viewLevel": 1,
					"options": {
						"settings": {
							"contextPath": "/Travel",
							"controlConfiguration": {
								"to_Booking/@com.sap.vocabularies.UI.v1.LineItem": {
									"actions": {}
								}
							},
							"navigation": {
								"Booking": {
									"detail": {
										"route": "subObjectPage"
									}
								}
							}
						}
					}
				},
				"subObjectPage": {
					"type": "Component",
					"id": "subObjectPage",
					"name": "sap.fe.templates.ObjectPage",
					"viewLevel": 2,
					"options": {
						"settings": {
							"contextPath": "/Travel/to_Booking"
						}
					}
				}
			}
		}
	}
}

```

**FILE**: service.cds

**LANGUAGE**: CDS

**CODE**:
```cds
using {
  sap,
  managed,
  Currency,
  Country
} from '@sap/cds/common';

using from '../service/annotations';

@cds.autoexpose  @readonly
aspect MasterData {}

service TravelService {
  @odata.draft.enabled
  @Common.SemanticKey: [TravelID]

  entity Travel : managed {
    key TravelUUID    : UUID;

        @Common.Label          : 'ID'
        @Common.Text           : Description
        TravelID      : Integer default 0                         @readonly;

        @Common.Label          : 'Begin Date'
        BeginDate     : Date;

        @Common.Label          : 'End Date'
        EndDate       : Date;

        @Common.Label          : 'Booking Fee'
        BookingFee    : Decimal(10, 2) default 0                  @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label          : 'Total Price'
        TotalPrice    : Decimal(10, 2)                            @readonly  @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label          : 'Currency'
        CurrencyCode  : Association to CurrencyCode default 'EUR' @mandatory;

        @Common.Label          : 'Description'
        Description   : String(1024);

        @Common.Label          : 'Travel Details'
        @UI.MultiLineText
        TravelDetails : String(1024);

        @title                 : 'Status'
        @Common.Text           : TravelStatus.name
        @Common.TextArrangement: #TextOnly
        TravelStatus  : Association to TravelStatus default 'O'   @readonly;

        @title                 : 'Agency'
        @Common.Text           : to_Agency.Name
        @Common.TextArrangement: #TextFirst
        to_Agency     : Association to TravelAgency               @mandatory;

        to_Booking    : Composition of many Booking
                          on to_Booking.to_Travel = $self;
  };

  entity Booking : managed {
    key BookingUUID   : UUID;

        @Common.Label: 'Booking ID'
        BookingID     : Integer                                  @Core.Computed;

        @Common.Label: 'Booking Date'
        BookingDate   : Date;

        @Common.Label: 'Connection'
        ConnectionID  : String(4)                                @mandatory;

        @Common.Label: 'Flight Date'
        FlightDate    : Date                                     @mandatory;

        @Common.Label: 'Flight Price'
        FlightPrice   : Decimal(10, 2)                           @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label: 'Currency'
        CurrencyCode  : Currency default 'EUR'                   @mandatory;

        @Common.Label: 'Status'
        BookingStatus : Association to BookingStatus default 'N' @mandatory;
        to_Travel     : Association to Travel                    @mandatory;

        PaymentMethod : String(1) default 'B'                    @Common              : {
          Label                   : 'Payment Method',
          Text                    : _Payment.Method,
          TextArrangement         : #TextOnly,
          ValueListWithFixedValues: true,
          ValueList               : {
            Label         : 'Payment Method',
            CollectionPath: 'Payment',
            Parameters    : [{
              $Type            : 'Common.ValueListParameterInOut',
              LocalDataProperty: PaymentMethod,
              ValueListProperty: 'code'
            }]
          }
        };
        _Payment      : Association to one Payment
                          on _Payment.code = PaymentMethod;
  };

  entity Payment {
    key code   : String(1) @(Common: {
          Label          : 'Payment Code',
          Text           : Method,
          TextArrangement: #TextFirst
        });
        Method : String    @(
          Core.Immutable: true,
          Common.Label  : 'Payment Method'
        );
  }

  entity TravelStatus : sap.common.CodeList {
    key code        : String(1) @Common.Text: descr;
        name        : String(255);
        descr       : String(1000);
        criticality : Int16     @odata.Type : 'Edm.Byte' enum {
          Neutral  = 0;
          Negative = 1;
          Critical = 2;
          Positive = 3;
          NewItem  = 5
        };
  };

  entity CurrencyCode : sap.common.CodeList {
        @Common.Label: 'Currency Code'
    key code  : String(3);

        @Common.Label: 'Currency Description'
        descr : String(255);
  };

  entity BookingStatus : sap.common.CodeList {
    key code : BookingStatusCode
  };

  entity TravelAgency : MasterData {
        @Common.Label: 'Agency ID'
        @Common.Text : Name
    key AgencyID       : String(6);

        @Common.Label: 'Agency Name'
        Name           : String(80);
        Street         : String(60);

        @Common.Label: 'Postal Code'
        PostalCode     : String(10);

        @Common.Label: 'City'
        City           : String(40);

        @Common.Label: 'Country Code'
        CountryCode    : Country;

        @Common.Label: 'Phone Number'
        PhoneNumber    : String(30);

        @Common.Label: 'Email Address'
        EMailAddress   : String(256);

        @Common.Label: 'Web Address'
        WebAddress     : String(256);
        Rating         : Integer;
        Recommendation : Integer;
  };

  type TravelStatusCode  : String(1) enum {
    Open     = 'O';
    Accepted = 'A';
    Canceled = 'X';
  };

  type BookingStatusCode : String(1) enum {
    New      = 'N';
    Booked   = 'B';
    Canceled = 'X';
  };
}

```

**FILE**: Travel.json

**LANGUAGE**: JSON

**CODE**:
```json
[
	{
		"TravelUUID": "52657221A8E4645C17002DF03754AB66",
		"TravelID": "00000001",
		"BeginDate": "2025-11-04",
		"EndDate": "2025-11-06",
		"BookingFee": "20.00",
		"TotalPrice": "900.00",
		"CurrencyCode_code": "USD",
		"Description": "Business Trip for Christine, Pierre",
		"TravelDetails": "This business trip includes a two-day customer workshop at the airport. The goal is the evaluation of the customer's use cases and the alignment on the road map for the upcoming year.",
		"TravelStatus_code": "A",
		"to_Agency_AgencyID": "070001"
	},
	{
		"TravelUUID": "53657221A8E4645C17002DF03754AB66",
		"TravelID": "00000002",
		"BeginDate": "2025-12-04",
		"EndDate": "2025-12-16",
		"BookingFee": "80.00",
		"TotalPrice": "3164.00",
		"CurrencyCode_code": "USD",
		"Description": "Lars Jensen site visit for system rollout support",
		"TravelDetails": "Will be provided soon...",
		"TravelStatus_code": "O",
		"to_Agency_AgencyID": "070002"
	},
	{
		"TravelUUID": "54657221A8E4645C17002DF03754AB66",
		"TravelID": "00000003",
		"BeginDate": "2025-08-04",
		"EndDate": "2025-08-08",
		"BookingFee": "40.00",
		"TotalPrice": "1871.00",
		"CurrencyCode_code": "USD",
		"Description": "John Smith customer workshop at Acme Corp headquarters",
		"TravelDetails": "Will be provided soon...",
		"TravelStatus_code": "O",
		"to_Agency_AgencyID": "070003"
	},
	{
		"TravelUUID": "55657221A8E4645C17002DF03754AB66",
		"TravelID": "00000004",
		"BeginDate": "2025-09-04",
		"EndDate": "2025-09-05",
		"BookingFee": "40.00",
		"TotalPrice": "1240.00",
		"CurrencyCode_code": "USD",
		"Description": "Anna Müller onboarding with new project team in Berlin",
		"TravelDetails": "Will be provided soon...",
		"TravelStatus_code": "X",
		"to_Agency_AgencyID": "070003"
	}
]

```

**FILE**: Booking.json

**LANGUAGE**: JSON

**CODE**:
```json
[
	{
		"BookingUUID": "1A757221A8E4645C17002DF03754AB66",
		"to_Travel_TravelUUID": "52657221A8E4645C17002DF03754AB66",
		"BookingID": "0001",
		"BookingDate": "2025-10-20",
		"ConnectionID": "1001",
		"FlightDate": "2025-11-04",
		"FlightPrice": "405.00",
		"CurrencyCode_code": "USD",
		"BookingStatus_code": "N",
		"PaymentMethod": "B"
	},
	{
		"BookingUUID": "1B757221A8E4645C17002DF03754AB66",
		"to_Travel_TravelUUID": "52657221A8E4645C17002DF03754AB66",
		"BookingID": "0002",
		"BookingDate": "2025-10-20",
		"ConnectionID": "1002",
		"FlightDate": "2025-11-06",
		"FlightPrice": "495.00",
		"CurrencyCode_code": "USD",
		"BookingStatus_code": "N",
		"PaymentMethod": "B"
	},
	{
		"BookingUUID": "2A757221A8E4645C17002DF03754AB66",
		"to_Travel_TravelUUID": "53657221A8E4645C17002DF03754AB66",
		"BookingID": "0001",
		"BookingDate": "2025-11-20",
		"ConnectionID": "2001",
		"FlightDate": "2025-12-04",
		"FlightPrice": "1492.08",
		"CurrencyCode_code": "USD",
		"BookingStatus_code": "N",
		"PaymentMethod": "B"
	},
	{
		"BookingUUID": "2B757221A8E4645C17002DF03754AB66",
		"to_Travel_TravelUUID": "53657221A8E4645C17002DF03754AB66",
		"BookingID": "0002",
		"BookingDate": "2025-11-20",
		"ConnectionID": "2002",
		"FlightDate": "2025-12-16",
		"FlightPrice": "1671.92",
		"CurrencyCode_code": "USD",
		"BookingStatus_code": "N",
		"PaymentMethod": "B"
	},
	{
		"BookingUUID": "3A757221A8E4645C17002DF03754AB66",
		"to_Travel_TravelUUID": "54657221A8E4645C17002DF03754AB66",
		"BookingID": "0001",
		"BookingDate": "2025-07-20",
		"ConnectionID": "3001",
		"FlightDate": "2025-08-04",
		"FlightPrice": "785.82",
		"CurrencyCode_code": "USD",
		"BookingStatus_code": "N",
		"PaymentMethod": "B"
	},
	{
		"BookingUUID": "3B757221A8E4645C17002DF03754AB66",
		"to_Travel_TravelUUID": "54657221A8E4645C17002DF03754AB66",
		"BookingID": "0002",
		"BookingDate": "2025-07-20",
		"ConnectionID": "3002",
		"FlightDate": "2025-08-08",
		"FlightPrice": "1085.18",
		"CurrencyCode_code": "USD",
		"BookingStatus_code": "N",
		"PaymentMethod": "B"
	},
	{
		"BookingUUID": "4A757221A8E4645C17002DF03754AB66",
		"to_Travel_TravelUUID": "55657221A8E4645C17002DF03754AB66",
		"BookingID": "0001",
		"BookingDate": "2025-08-20",
		"ConnectionID": "4001",
		"FlightDate": "2025-09-04",
		"FlightPrice": "632.40",
		"CurrencyCode_code": "USD",
		"BookingStatus_code": "N",
		"PaymentMethod": "B"
	},
	{
		"BookingUUID": "4B757221A8E4645C17002DF03754AB66",
		"to_Travel_TravelUUID": "55657221A8E4645C17002DF03754AB66",
		"BookingID": "0002",
		"BookingDate": "2025-08-20",
		"ConnectionID": "4002",
		"FlightDate": "2025-09-05",
		"FlightPrice": "607.60",
		"CurrencyCode_code": "USD",
		"BookingStatus_code": "N",
		"PaymentMethod": "B"
	}
]

```

Object Page

object page
ObjectPage
overview
detail view
entity
sections


**TITLE**: Overview Page

**INTRODUCTION**: Overview pages provide quick access to vital business information through visual, actionable cards that display key data at a glance. The user-friendly interface makes viewing, filtering, and acting upon data both quick and intuitive. Business users can instantly grasp the big picture while simultaneously focusing on critical tasks, enabling faster decision-making and immediate action.

**TAGS**: overview page, OverviewPage, OVP, overview, dashboard, cards, summary

**STEP**: Defining Overview Cards

**DESCRIPTION**: The cards shown on the overview page are defined in your application's manifest.json file. You can choose from a variety of card types, such as list cards, analytical cards, and custom cards, to best represent your data.

**LANGUAGE**: JSON

**CODE**:
```json
{
	"_version": "1.12.0",
	"sap.app": {
		"id": "sap.fe.core.fpmExplorer.overviewPage",
		"type": "application",
		"i18n": {
			"bundleUrl": "i18n/i18n.properties",
			"supportedLocales": [""],
			"fallbackLocale": ""
		},
		"applicationVersion": {
			"version": "1.0.0"
		},
		"dataSources": {
			"mainService": {
				"uri": "/sap/fe/core/mock/overviewPage/",
				"type": "OData",
				"settings": {
					"annotations": [],
					"odataVersion": "4.0"
				}
			}
		}
	},
	"sap.ovp": {
		"globalFilterModel": "mainModel",
		"globalFilterEntitySet": "Travel",
		"containerLayout": "resizable",
		"enableLiveFilter": true,
		"considerAnalyticalParameters": false,
		"cards": {
			"card_open_travels": {
				"model": "mainModel",
				"template": "sap.ovp.cards.v4.list",
				"settings": {
					"title": "{{TravelAgenciesCard}}",
					"subTitle": "{{TravelAgenciesCardSub}}",
					"entitySet": "TravelAgency",
					"annotationPath": "com.sap.vocabularies.UI.v1.LineItem#Agency",
					"presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#AgencyList",
					"selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#ByCountryAll",
					"sortBy": "Name",
					"sortOrder": "Ascending"
				}
			},
			"card_tableopen_travels": {
				"model": "mainModel",
				"template": "sap.ovp.cards.v4.table",
				"settings": {
					"title": "{{TravelDetailsCard}}",
					"subTitle": "{{TravelDetailsCardSub}}",
					"entitySet": "Travel",
					"annotationPath": "com.sap.vocabularies.UI.v1.LineItem"
				}
			},
			"card_barChart_bookingFeeLocation": {
				"model": "mainModel",
				"template": "sap.ovp.cards.v4.charts.analytical",
				"settings": {
					"title": "{{BookingFeeByLocationCard}}",
					"subTitle": "{{BookingFeeByLocationCardSub}}",
					"entitySet": "Travel",
					"chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#bookingFeeByLocation",
					"presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#bookingFeeByLocationPV",
					"dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#bookingFeeDataPoint",
					"navigation": "noHeaderNav"
				}
			},
			"card_donut_bookingFeeLocation": {
				"model": "mainModel",
				"template": "sap.ovp.cards.v4.charts.analytical",
				"settings": {
					"title": "{{TravellersStatusCard}}",
					"subTitle": "{{TravellersStatusCardSub}}",
					"entitySet": "TravelStatistics",
					"chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#donutCountByStatusLabeled",
					"presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#donutCountByStatusLabeledPV",
					"dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#countPerStatus",
					"navigation": "noHeaderNav"
				}
			}
		},
		"globalFilterControlType": "MacroFilterBar",
		"useDateRangeType": true,
		"chartSettings": {}
	},
	"sap.ui5": {
		"flexEnabled": true,
		"dependencies": {
			"minUI5Version": "1.111.1",
			"libs": {
				"sap.m": {
					"lazy": false
				},
				"sap.ui.core": {
					"lazy": false
				},
				"sap.fe.templates": {
					"lazy": false
				},
				"sap.ovp": {
					"lazy": false
				},
				"sap.ui.rta": {
					"lazy": false
				},
				"sap.ui.layout": {
					"lazy": false
				}
			}
		},
		"extends": {
			"component": "sap.ovp.app",
			"minVersion": "1.32.0",
			"extensions": {}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"mainModel": {
				"dataSource": "mainService",
				"preload": true,
				"settings": {
					"operationMode": "Server",
					"autoExpandSelect": true,
					"earlyRequests": true
				}
			}
		},
		"rootView": {
			"viewName": "sap.fe.core.fpmExplorer.overviewPage.OverviewPage"
		},
		"resources": {
			"css": []
		},
		"routing": {
			"config": {
				"controlId": "overviewPage"
			},
			"routes": [],
			"targets": {}
		}
	}
}
```

Overview Page

overview page
OverviewPage
OVP
overview
dashboard
cards
summary


**TITLE**: Analytical chart on List Page Fiori Elements Odata V4

**INTRODUCTION**: The analytical chart on list page offers a unique way to analyze data step by step from different perspectives, to investigate a root cause through drilldown, and to act on transactional content.
In SAP Fiori elements for OData V4, the ALP (Analytical List Report) is not a separate floorplan, but rather a 'flavor' of the list report. When application developers configure a list report template, they can decide to create the template using the 'ALP flavor'. Application developers must then add the "views" configuration as shown in the following manifest.json sample below.

**TAGS**: analytical list page, analytics, charts, insights, ALP, analytical table, ApplySupported, Aggregation, Analytics.AggregatedProperty, UI.chart

**STEP**: Configure the manifest.json

**DESCRIPTION**:
The primary annotation path can be either UI.Chart, UI.PresentationVariant, or UI.SelectionPresentationVariant. If you specify a UI.PresentationVariant or UI.SelectionPresentationVariant, SAP Fiori elements picks the first chart visualization and renders it. If the primary annotation path leads to a PresentationVariant that has no chart visualization, SAP Fiori elements looks for the default chart (Ui.Chart without a qualifier) and renders it. If the default chart is not found, SAP Fiori elements renders a blank chart.
Adding a chart to the list report requires the service to include the `@Aggregation.ApplySupported` annotation.

Tip

If the specified primary or secondary annotationPath is not found, there is no fallback and the application will fail to load.

The secondary annotation path can be either UI.LineItem, UI.PresentationVariant, or UI.SelectionPresentationVariant. If you specify UI.PresentationVariant or UI.SelectionPresentationVariant, SAP Fiori elements picks the first LineItem visualization and renders it. If the secondary annotation path leads to a PresentationVariant that has no table visualization, SAP Fiori elements looks for the default table (UI.LineItem w/o qualifier) and renders it. If the default table is not found, SAP Fiori elements renders a blank table.

"defaultPath" can be "primary", "secondary", or "both". If it is "primary", SAP Fiori elements loads the app in chart-only view. If it is "secondary", SAP Fiori elements loads the app in table-only view. If 'defaultPath' is "both", SAP Fiori elements loads the list page in hybrid view showing both the chart and the list.

Note

Do not use arrays for the "paths", "primary" and "secondary" properties even though they are provided in the manifest, because SAP Fiori elements currently does not support this.

**LANGUAGE**: JSON

**CODE**:
```JSON
              "views": {
                "paths": [
                  {
                    "primary": [
                      {
                        "annotationPath": "com.sap.vocabularies.UI.v1.Chart#alpChart"
                      }
                    ],
                    "secondary": [
                      {
                        "annotationPath": "com.sap.vocabularies.UI.v1.LineItem"
                      }
                    ],
                    "defaultPath": "both"
                  }
                ]
```

**ADDITIONAL RELATED CODE BLOCKS**:

**FILE**: manifest.json

**LANGUAGE**: manifest.json

**CODE**:
```JSON
{
  .....
  "sap.ui5": {
    "flexEnabled": true,
    "dependencies": {
      "minUI5Version": "1.136.7",
      "libs": {
        "sap.m": {},
        "sap.ui.core": {},
        "sap.fe.templates": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "com.sap.travel.travelmanagementapp.i18n.i18n"
        }
      },
      "": {
        "dataSource": "mainService",
        "preload": true,
        "settings": {
          "operationMode": "Server",
          "autoExpandSelect": true,
          "earlyRequests": true
        }
      },
      "@i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "uri": "i18n/i18n.properties"
      }
    },
    "resources": {
      "css": []
    },
    "routing": {
      "config": {},
      "routes": [
        {
          "pattern": ":?query:",
          "name": "TravelsList",
          "target": "TravelsList"
        },
        {
          "pattern": "Travels({key}):?query:",
          "name": "TravelsObjectPage",
          "target": "TravelsObjectPage"
        },
        {
          "pattern": "Travels({key})/toBookings({key2}):?query:",
          "name": "BookingsObjectPage",
          "target": "BookingsObjectPage"
        }
      ],
      "targets": {
        "TravelsList": {
          "type": "Component",
          "id": "TravelsList",
          "name": "sap.fe.templates.ListReport",
          "options": {
            "settings": {
              "contextPath": "/Travels",
              "variantManagement": "Page",
              "initialLoad": "Enabled",
              "navigation": {
                "Travels": {
                  "detail": {
                    "route": "TravelsObjectPage"
                  }
                }
              },
              "controlConfiguration": {
                "@com.sap.vocabularies.UI.v1.LineItem": {
                  "tableSettings": {
                    "type": "ResponsiveTable"
                  }
                }
              },
              "views": {
                "paths": [
                  {
                    "primary": [
                      {
                        "annotationPath": "com.sap.vocabularies.UI.v1.Chart#alpChart"
                      }
                    ],
                    "secondary": [
                      {
                        "annotationPath": "com.sap.vocabularies.UI.v1.LineItem"
                      }
                    ],
                    "defaultPath": "both"
                  }
                ]
              }
            }
          }
        },
        "TravelsObjectPage": {
          "type": "Component",
          "id": "TravelsObjectPage",
          "name": "sap.fe.templates.ObjectPage",
          "options": {
            "settings": {
              "editableHeaderContent": false,
              "contextPath": "/Travels",
              "navigation": {
                "toBookings": {
                  "detail": {
                    "route": "BookingsObjectPage"
                  }
                }
              },
              "content": {
                "body": {
                  "sections": {
                    "TravelNotesSection": {
                      "template": "com.sap.travel.travelmanagementapp.ext.fragment.TravelNotesSection",
                      "position": {
                        "placement": "After",
                        "anchor": "GeneralInfoSection"
                      },
                      "title": "Travel Notes"
                    }
                  }
                }
              }
            }
          }
        },
        "BookingsObjectPage": {
          "type": "Component",
          "id": "BookingsObjectPage",
          "name": "sap.fe.templates.ObjectPage",
          "options": {
            "settings": {
              "editableHeaderContent": false,
              "contextPath": "/Travels/toBookings"
            }
          }
        }
      }
    }
  },
  "sap.fiori": {
    "registrationIds": [],
    "archeType": "transactional"
  }
}

```

**FILE**: annotations.cds

**LANGUAGE**: cds

**CODE**:
```cds
 Analytics.AggregatedProperty #TotalPrice_average : {
        $Type : 'Analytics.AggregatedPropertyType',
        Name : 'TotalPrice_average',
        AggregatableProperty : TotalPrice,
        AggregationMethod : 'average',
        @Common.Label : 'TotalPrice (Average)',
    },
    UI.Chart #alpChart : {
        $Type : 'UI.ChartDefinitionType',
        ChartType : #Column,
        Dimensions : [
            Destination,
        ],
        DynamicMeasures : [
            '@Analytics.AggregatedProperty#TotalPrice_average',
        ],
    },
```

**FILE**: service.cds

**LANGUAGE**: cds

**CODE**:
```cds
  @Aggregation.ApplySupported : {
    $Type : 'Aggregation.ApplySupportedType',
    AggregatableProperties : [
      { $Type : 'Aggregation.AggregatablePropertyType', Property : ReservationFee },
      { $Type : 'Aggregation.AggregatablePropertyType', Property : TotalPrice }
    ],
    GroupableProperties : [
      TravelStatus,
      toAgency_ID,
      toCustomer_ID,
      Destination,
      StartDate,
      EndDate
    ]
  }
```

analytical list page
analytics
charts
insights
ALP
analytical table
ApplySupported
Aggregation
Analytics.AggregatedProperty
UI.chart