Configure the search criteria and parameters

ACTION S1: Add additional properties

The Search<FeatureName>Request data structure in the BFF yaml must be adapted.

All the data that should be used in the request must be in that data structure either on top-level or in sub data structures.

Adapt in File: <feature>-bff.yaml

Example:
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
        exampleProperty:
          type: string

Please refer to the adding search criteria general cookbook for more information.

After updating the OpenAPI specification, execute the command npm run apigen to generate the corresponding TypeScript code.
Remove the "ACTION" comment after working on this task

ACTION S2: Define the members

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

Adapt search parameters:

  • keys need to match the keys from your OpenAPIs SearchCriteria Object

  • always start with z.string()

  • when required, you can use .transform() to extend the validation

  • dates are always mapped to strings (as JSON does not know DateTime)

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

Example:
    exampleString: z.string().optional(),
    exampleNumber: z
        .string()
        .transform((v) => (v ? Number(v) : undefined))
        .optional(),

Refer to the adding search criteria parameters cookbook for more types.

Remove the "ACTION" comment after working on this task

ACTION S3: Specify desired search criterias

Please specify your desired search criterias by adding input fields.

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

Example text input field:
  <form [formGroup]="criteriaGroup">
      <div class="grid mt-0 p-fluid">
        <div class="col-12 md:col-3">
          <span class="p-float-label">
            <input
              id="id"
              pInputText
              type="text"
              formControlName="id"
              class="p-inputtext p-component"
            />
            <label for="id">{{
              'EXAMPLE_FEATURE_SEARCH.CRITERIA.ID' | translate
              }}</label>
          </span>
        </div>
      </div>
  </form>

Please refer to the adding search criteria html cookbook for more information.

Examples for different input fields

Depending on what kind of input fields you want to add, the implementation differs.

Refer to the adding search criteria examples for different input fields cookbook.

ACTION S4: Add translations

Adapt in File: de.json / en.json

Please ensure that all input field labels have the necessary translations added.

Example
  {
    "EXAMPLE_FEATURE_SEARCH.CRITERIA.ID": "Example input field label"
  }

Now you can continue with the next section Configure search results