Adding search criteria

Goal: Configure search criteria

Configure the search criteria input field and parameters for you search page.

1. Request Object

Add additional properties to the <feature>-bff.yaml

Adapt in File: <feature>-bff.yaml

Search<Feature>Request:
      type: object
      properties:
        pageNumber:
          type: integer
          format: int32
          default: 0
          description: 'The number of the page.'
        pageSize:
          type: integer
          format: int32
          default: 100
          maximum: 1000
          description: 'The size of the page.'
        id:
          type: string
        # Add additional properties here

2. Parameters

Please define the members for your <%= featurePropertyName %>SearchCriteriasSchema

Adapt in File: <feature>-search.parameters.ts

    exampleString: z.string().optional(),
    exampleNumber: z
        .string()
        .transform((v) => (v ? Number(v) : undefined))
        .optional(),
    exampleStringArray: z
        .union([z.string(), z.array(z.string())])
        .transform((v: string | string[] | undefined): string[] | undefined =>
        v instanceof Array || !v
            ? (v as string[] | undefined)
            : ([v] as string[]),
        )
        .transform((v: string[] | undefined) => v?.map((e) => e))
        .optional(),
    exampleNumberArray: z
        .union([z.string(), z.array(z.string())])
        .transform((v: string | string[] | undefined): string[] | undefined =>
        v instanceof Array || !v
            ? (v as string[] | undefined)
            : ([v] as string[]),
        )
        .transform((v: string[] | undefined) => v?.map((e) => Number(e)))
        .optional(),
    exampleEnum: z
        .string()
        .transform((v) => v as <%= featurePropertyName %>SearchRequestExampleEnum)
        .optional(),

3. HTML

Please specify here your desired search criterias

  • The input fields must be added

    • formControlName must match to your SearchCriteria model

Adapt in File: <feature>-search.component.html

 <form [formGroup]="criteriaGroup">
      <div class="grid mt-0 p-fluid">
        <div class="col-12 md:col-3">
          <span class="p-float-label">
           // PLACE YOUR INPUT FIELD HERE
          </span>
        </div>
        ...

Examples for different input fields

  • text input field of type string

    • Remove // PLACE YOUR INPUT FIELD HERE and paste the following code

    • Adapt id, formControlName, ngModel and for as well as the labels translation key

    <input
      id="id"
      pInputText
      type="text"
      formControlName="id"
      class="p-inputtext p-component"
    />
    <label for="id">{{
      'YOUR_PRODUCT.CRITERIA.ID' | translate
    }}</label>