Configure the search results.

To configure the search results, the following actions must be taken.

ACTION S5: Add additional properties to entity schema

Here you can add additional properties which you e.g., need for your <SearchFeatureResponse>.

To understand the applied API Concept read the API Guidelines first.

Note that:

  • If you have chosen a custom resource name in the generation, the schema entry will be named accordingly

  • All data displayed in the results must be in that data structure

  • Stick to necessary properties only to keep the payload small

Adapt in File: <feature>-bff.yaml

Example:
  <Feature>:
        type: object
        required:
          - 'modificationCount'
          - 'id'
        properties:
          modificationCount:
            type: integer
            format: int32
          id:
            type: integer
            format: int64
          houseType:
            type: string

Where houseType is an additional property added to the schema of the entity <Feature>.

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 S6: Column configuration

The next step is to configure the columns of the search results table. Here you can define which properties of your entity should be displayed in the results table, as well as their characteristics (e.g., if they are sortable or filterable).

Adapt in File: <feature>-search.columns.ts .Example:

  export const FeatureSearchColumns: DataTableColumn[] = [
      {
        columnType: ColumnType.TRANSLATION_KEY,
        id: 'houseType',
        nameKey: 'FEATURE_SEARCH.COLUMNS.HOUSETYPE',
        filterable: true,
        sortable: true,
        predefinedGroupKeys: [
          'FEATURE_SEARCH.PREDEFINED_GROUP.DEFAULT',
          'FEATURE_SEARCH.PREDEFINED_GROUP.EXTENDED',
          'FEATURE_SEARCH.PREDEFINED_GROUP.FULL',
        ],
      },
      {
        columnType: ColumnType.STRING,
        id: 'city',
        nameKey: 'FEATURE_SEARCH.COLUMNS.CITY',
        filterable: true,
        sortable: true,
        predefinedGroupKeys: [
          'FEATURE_SEARCH.PREDEFINED_GROUP.EXTENDED',
          'FEATURE_SEARCH.PREDEFINED_GROUP.FULL',
        ],
      }
  ]

In this example, a column for the property houseType is added to the results table. The column is of type TRANSLATION_KEY, is filterable and sortable. Additionally, a column for the property city is added, which is of type STRING, filterable, sortable, and belongs to only two predefined groups.

A predefined group allows users to quickly switch between different sets of columns in the UI using a dropdown. By configuring the predefinedGroupKeys, you can define which columns belong to which groups. The key is at the same time the translation key for the group name.

Refer to the DataTableColumn overview for more information.

Remove the "ACTION" comment after working on this task

ACTION S7: Mapping from Feature to Row Item

Here you can create a mapping of your Resource to the row item used in the data table. This is also the place to add translation keys for columns with the type TRANSLATION_KEY.

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

Example:
  export const selectResults = createSelector(
    ExampleFeatureSearchSelectors.selectResults,
    (results): RowListGridData[] => {
      return results.map((item) => ({
        imagePath: '',
        ...item,
        houseType: item.houseType
          ? `FEATURE_SEARCH.RESULTS.HOUSETYPES.${item.houseType}`
          : '',
        city: item.address?.city,
      }));
    }
  );

This example shows how to map a property houseType to a translation key. If the value of houseType is VILLA, the resulting translation key will be FEATURE_SEARCH.RESULTS.HOUSETYPE.VILLA.

It also shows how to map a nested property address.city to a flat property city used in the data table.

Remove the "ACTION" comment after working on this task

ACTION S8: Add translations

Adapt in File: de.json / en.json

Please ensure that all column headers and the values in columns with the type TRANSLATION_KEY have the necessary translations added. For our examples above, the following entries would be necessary:

  {
    "FEATURE_SEARCH": {
      ...,
      "RESULTS": {
        "HOUSETYPE": "House Type",
        "HOUSETYPES": {
          "VILLA": "Villa",
          "TOWNHOUSE": "Townhouse",
          "APARTMENT": "Apartment",
        },
        "CITY": "City"
      }
    }
  }

Refer to the Multi-Language Cookbook for more information.

Remove the "ACTION" comment after working on this task