Configure the search criteria and parameters

After generating the search page, you can add filter criteria. These criteria must be defined in the BFF’s OpenAPI spec and represented in TypeScript for use in the UI. Users enter criteria via HTML input fields placed at the top of the page.

ACTION S1: Add additional properties to search request schema

The Search<FeatureName>Request component in the OpenAPI yaml must be adapted.

You should have a Search<Feature>Request defined in the OpenAPI specification. By modifying the Search<Feature>Request, you can add additional parameters to your search request.

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.

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 S2: Search criteria representation in zod

The criteria you added in "Action S1" now have to be added to the <feature>SearchCriteriasSchema. Assure the keys and types match the ones you defined in the OpenAPI specification.

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

Remove the "ACTION" comment after working on this task

ACTION S3: HTML input fields for search criteria

To make the search criteria visible and usable for the user, you need to add corresponding HTML input fields to the search component’s HTML file.

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. You can add different types of input fields, like Text, Calendar, Dropdown, MultiSelect, AutoComplete. 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"
  }

Translations are needed for your input fields, additional labels or dropdown values.

Refer to the Multi-Language Cookbook for more information.

Now you can continue with the next section Configure search results