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:
type: object
required:
- id
properties:
modificationCount:
type: integer
format: int32
id:
type: string
property:
type: string
<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:
type: object
required:
- id
properties:
modificationCount:
type: integer
format: int32
id:
type: string
property:
type: string
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. |