Configure Detail View
After generating the base of the detail component, you can configure the detail view to display and manage the details of the specified resource/entity. By default, the generator creates data structures used in GET request to fetch the details of the resource/entity and display them in the detail view.
ACTION D1
- Add Detail Properties in TypeScript Component
-
To display additional properties in the detail view, you need to adapt the TypeScript component of the detail view.
| Directory |
|
| File |
|
Example: Generated Details in Book Component
Original book-details.component.ts
export class BookDetailsComponent implements OnInit {
private readonly store = inject(Store)
private readonly breadcrumbService = inject(BreadcrumbService)
viewModel$: Observable<BookDetailsViewModel> = this.store.select(selectBookDetailsViewModel)
objectDetails$: Observable<ObjectDetailItem[]> = this.viewModel$.pipe(
map((vm) => {
const labels: ObjectDetailItem[] = [
//ACTION D1: Add header values here
{
label: 'BOOK_DETAILS.FORM.ID',
labelPipe: TranslatePipe,
value: vm.details?.id
}
]
return labels
})
)
...Example: Book Details in Book Component
Book details in book-details.component.ts
export class BookDetailsComponent implements OnInit {
private readonly store = inject(Store)
private readonly breadcrumbService = inject(BreadcrumbService)
viewModel$: Observable<BookDetailsViewModel> = this.store.select(selectBookDetailsViewModel)
objectDetails$: Observable<ObjectDetailItem[]> = this.viewModel$.pipe(
map((vm) => {
const labels: ObjectDetailItem[] = [
//ACTION D1: Add header values here
{
label: 'BOOK_DETAILS.FORM.BOOK_TITLE',
labelPipe: TranslatePipe,
value: vm.details?.bookTitle
},
{
label: 'BOOK_DETAILS.FORM.BOOK_TYPE',
labelPipe: TranslatePipe,
value: vm.details?.bookType
}
]
return labels
})
)
...
constructor() {
this.formGroup = new FormGroup({
//ACTION D1: Add form fields here
bookTitle: new FormControl(null, [Validators.maxLength(255)]),
bookType: new FormControl(null, [Validators.maxLength(255)])
})
...
this.formGroup.patchValue({
//ACTION D1: Add form fields here
bookTitle: vm.details?.bookTitle,
bookType: vm.details?.bookType
})
...Where bookTitle and bookType are properties of the book entity to be displayed and managed in the detail view.
ACTION D2
- Add Detail Properties in HTML
-
To display additional properties in the detail view, you need to adapt the HTML of the detail view.
| Directory |
|
| File |
|
Example: Generated Book Details in HTML
Original book-details.component.html
...
<form [formGroup]="formGroup" errorTailor>
<!-- ACTION D2: Add form fields here -->
<p-floatlabel variant="on" controlErrorAnchor>
<input
pInputText
type="text"
id="book_detail_id"
class="w-full pt-3 pb-2 text-responsive"
formControlName="id"
required
aria-required="true"
/>
<label class="ocx-required-label" for="book_detail_id">
{{ 'BOOK_DETAILS.FORM.ID' | translate }}
</label>
</p-floatlabel>
</form>
...Example: Book Details in HTML
Book details in book-details.component.html
<p-floatlabel variant="on" controlErrorAnchor>
<input
pInputText
type="text"
id="book_detail_book_title"
class="w-full pt-3 pb-2 text-responsive"
formControlName="bookTitle"
required
aria-required="true"
/>
<label class="ocx-required-label" for="book_detail_book_title">
{{ 'BOOK_DETAILS.FORM.BOOK_TITLE' | translate }}
</label>
</p-floatlabel>
<p-floatlabel variant="on" controlErrorAnchor>
<input
pInputText
type="text"
id="book_detail_book_type"
class="w-full pt-3 pb-2 text-responsive"
formControlName="bookType"
required
aria-required="true"
/>
<label class="ocx-required-label" for="book_detail_book_type">
{{ 'BOOK_DETAILS.FORM.BOOK_TYPE' | translate }}
</label>
</p-floatlabel>Where bookTitle and bookType are properties of the book entity to be displayed and managed in the detail view.
ACTION D3
- Add Translations
-
Ensure that all necessary translations are added.
More details in Multi-Language.
Template: Generated Translations
| Directory |
|
| Files |
|
Adust translations in en.json
"BOOK_DETAILS": {
"CHANGE_ME": "ACTION D3: Adjust translation keys for details header",
"HEADER": "Book Details",
"SUB_HEADER": "Display of Book Details",
"HELP_ARTICLE_ID": "Help Article",
"BREADCRUMB": "Details",
"ARIA_LABEL": "Page Header with Details",
"ERROR_MESSAGES": {
"DETAILS_LOADING_FAILED": "Loading details failed."
},
...
"FORM": {
"FORM_FIELDS": "ACTION D3: Adjust translation keys for the form",
"ID": "ID"
},
...
"UPDATE": {
"CHANGE_ME": "ACTION D3: Adjust translation keys for update dialog",
...
"DELETE": {
"CHANGE_ME": "ACTION D3: Adjust translation keys for delete dialog",
...
}Here, ACTION D3 marks translation keys that must be adapted to the context of your application.
Example
| Directory |
|
| Files |
|
Example: Translations in en.json
"BOOK_DETAILS": {
"CHANGE_ME": "ACTION D3: Adjust translation keys for details header",
"HEADER": "Book Details",
"SUB_HEADER": "Display of Book Details",
"HELP_ARTICLE_ID": "Help Article",
"BREADCRUMB": "Details",
"ARIA_LABEL": "Page Header with Details",
"ERROR_MESSAGES": {
"DETAILS_LOADING_FAILED": "Loading details failed."
},
"GENERAL": {
"BACK": "Back",
"MORE": "More",
"EDIT": "Edit",
"DELETE": "Delete",
"CANCEL": "Cancel",
"SAVE": "Save"
},
"FORM": {
"FORM_FIELDS": "ACTION D3: Adjust translation keys for the form",
"BOOK_TITLE": "Book Title",
"BOOK_TYPE": "Book Type"
},
"CANCEL": {
"HEADER": "Confirm cancellation",
"MESSAGE": "Please confirm that you want to cancel editing and reset changes.",
"CONFIRM": "Confirm"
},
"UPDATE": {
"CHANGE_ME": "ACTION D3: Adjust translation keys for update dialog",
"HEADER": "Update Book",
"SUCCESS": "Update successful",
"ERROR": "Update failed",
"FORM": {
"SAVE": "Save",
"CANCEL": "Cancel"
}
},
"DELETE": {
"CHANGE_ME": "ACTION D3: Adjust translation keys for delete confirmation dialog",
"HEADER": "Delete Book",
"MESSAGE": "Please confirm that you want to delete this Book item.",
"CONFIRM": "Confirm",
"CANCEL": "Cancel",
"SUCCESS": "Book successfully deleted",
"ERROR": "Could not delete Book"
}
},Example: Translations in de.json
"BOOK_DETAILS": {
"CHANGE_ME": "ACTION D3: Adjust translation keys for details header",
"HEADER": "Buchdetails",
"SUB_HEADER": "Anzeige von Buchdetails",
"HELP_ARTICLE_ID": "Hilfeartikel",
"BREADCRUMB": "Details",
"ARIA_LABEL": "Seitenkopf mit Details",
"ERROR_MESSAGES": {
"DETAILS_LOADING_FAILED": "Details konnten nicht geladen werden."
},
"GENERAL": {
"BACK": "Zurück",
"MORE": "Mehr",
"EDIT": "Bearbeiten",
"DELETE": "Löschen",
"CANCEL": "Abbrechen",
"SAVE": "Speichern"
},
"FORM": {
"FORM_FIELDS": "ACTION D3: Adjust translation keys for the form",
"BOOK_TITLE": "Buchtitel",
"BOOK_TYPE": "Buchtyp"
},
"CANCEL": {
"HEADER": "Abbruch bestätigen",
"MESSAGE": "Bitte bestätigen Sie, dass Sie die Bearbeitung abbrechen und die Änderungen zurücksetzen möchten.",
"CONFIRM": "Bestätigen"
},
"UPDATE": {
"CHANGE_ME": "ACTION D3: Adjust translation keys for update dialog",
"SUCCESS": "Speichern erfolgreich",
"ERROR": "Speichern fehlgeschlagen",
"FORM": {
"SAVE": "Speichern",
"CANCEL": "Abbrechen"
},
"HEADER": "Buch ändern"
},
"DELETE": {
"CHANGE_ME": "ACTION D3: Adjust translation keys for delete confirmation dialog",
"HEADER": "Buch löschen",
"MESSAGE": "Bitte bestätigen Sie, dass Sie das Buch löschen möchten.",
"CONFIRM": "Bestätigen",
"CANCEL": "Abbrechen",
"SUCCESS": "Buch erfolgreich gelöscht",
"ERROR": "Konnte Buch nicht löschen"
}
},