Add core data to the details page header
On the details page you can display data in the the header and below there is a content pane. You can customize the content pane as needed.
The details page will reuse the created Resource. If the search-result object differs from the details object, you can define a separate <Feature>Details object in the OpenAPI specification and modify the endpoints accordingly (get, put, delete). You also need to modify the used Resource in the state, viewmodel, etc. to use it.
Similar to the create-update generation, you can adapt the schema for update requests, see Extend form fields.
ACTION D1: Define values to be shown in the header
Adapt in File: <feature>-details.component.ts
The details page will display a page header with a title and subtitle. To customize, you can modify the headerLabels$ property.
headerLabels$: Observable<ObjectDetailItem[]> = this.viewModel$.pipe(
map((vm) => {
const labels: ObjectDetailItem[] = [
//ACTION D1: Add header values here
{
label: 'HOUSE_DETAILS.FORM.CITY',
labelPipe: TranslatePipe,
value: vm.details?.address?.city,
},
];
return labels;
})
);You can also add additional actions to the header using the headerActions$ property.
Check the PageHeader Component for more information.
| Remove the "ACTION" comment after working on this task |