Customize form fields

The form fields of the dialog need to be adapted

ACTION C1: Extend schemas inside OpenAPI

Adapt in File: <feature>-bff.yaml

The generator creates 4 new components in the OpenAPI specification for Create/Update Request & Response.

The Request objects are referencing the Resource, its properties are used by the form. You can modify it, but check here for side effects.

Changes to the response object itself require modification in the response handling. By default other response properties (apart from resource) are ignored.
Run the command npm run apigen after adapting the OpenAPI to transform the changes into typescript code.
Remove the "ACTION" comment after working on this task

ACTION C2: Add form fields to html component

Adapt in File: <feature>-create-update.component.html

Add new form fields similar to the generated example. Please, ensure that form control names match the Resource properties.

Example resource
Example:
type: object
required:
    - id
properties:
    modificationCount:
        type: integer
        format: int32
    id:
        type: string
    name:
        type: string
Example form field
<div [title]="'EXAMPLE_CREATE_UPDATE.FORM.NAME' | translate">
    <span class="p-float-label" controlErrorAnchor>
    <input
        pInputText
        type="text"
        id="example_detail_form_name"
        class="w-full pt-3 pb-2"
        formControlName="name"
    />
    <label class="ocx-required-label" for="example_detail_form_name">
        {{ 'EXAMPLE_CREATE_UPDATE.FORM.NAME' | translate }}</label
    >
    </span>
</div>
Remove the "ACTION" comment after working on this task

ACTION C3: Add form fields to ts component

Adapt in File: <feature>-create-update.component.ts

Add new form controls to the formGroup. Please, ensure that form control names match the properties of your Resource.

Use appropriate validators if required.

Example resource
Example:
type: object
required:
    - id
properties:
    modificationCount:
        type: integer
        format: int32
    id:
        type: string
    name:
        type: string
Example form control
this.formGroup = new FormGroup({
    name: new FormControl(null, [Validators.maxLength(255)]),
    ...
});
Remove the "ACTION" comment after working on this task
To configure the dialog or modify its contents, please refer to the PortalDialogService docs.