Extend 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 component objects in the OpenAPI specification for Create/Update Requests and Responses.

The Request objects are referencing the data object to be Created/Updated. Please, adjust the data object if not prepared already. Data object properties will be used for extending the form.

Be cautious while making changes to the data object, it is used for the other features like search and details pages.

If extending the data object is not an option, instead please consider modifying the Create/Update Request component objects to use flat field list instead of the data object and adjust them based on the needs. Such modification also requires changes to the preparation of the request.

Changes to Response component objects require a modification in response handling. By default response properties are not used by the generated code.

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 data object properties.

Example data object
Example:
type: object
required:
    - id
properties:
    modificationCount:
        type: integer
        format: int32
    id:
        type: string
    property:
        type: string
Example form field
<div [title]="'EXAMPLE_CREATE_UPDATE.FORM.PROPERTY' | translate">
    <span class="p-float-label" controlErrorAnchor>
    <input
        pInputText
        type="text"
        id="example_detail_form_property"
        class="w-full pt-3 pb-2"
        formControlName="property"
    />
    <label class="ocx-required-label" for="example_detail_form_property">
        {{ 'EXAMPLE_CREATE_UPDATE.FORM.PROPERTY' | 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 the corresponding form controls into the formGroup. Please, ensure that form control names match the data object properties.

Use appropriate validators if required.

Example data object
Example:
type: object
required:
    - id
properties:
    modificationCount:
        type: integer
        format: int32
    id:
        type: string
    property:
        type: string
Example form control
this.formGroup = new FormGroup({
    property: 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.