Creating search results components

Create a search results page that displays results with breadcrumbs and pagination. Use this schematic to standardize how results appear, which helps users navigate results easily and maintain a consistent experience across features.

About this task

Create a search results page component to display the results after a user runs a query from the search page component.

The search-result-component schematic generates two components.

• A search result component.
• A table component (BaseTableComponent type), whose selector is included in the search result component template.

The following screen capture shows the Shipment search results page and highlights the features within the results page.

1. Go to the module where you want to add the component.
   For example, devtoolkit_docker/orderhub-code/buc-app-order.
2. Create the component by running the following command. The schematic creates the component and updates the sample routing object for the search result component in the nearest routing module.

   ng g @buc/schematics:search-result-component --name <name> \
   --path <resultsPageComponentPath> \
   --table-path <tableComponentPath> \
   --json-file-path <json-file-path> \
   --translation-file-path <translation-file-path> \
   --shared-lib <shared-lib> \
   --project <project-name> \
   --skip-import

   Parameters

   name

   (Required) The name of the component.

   The schematic creates a component class name by removing special characters and appending the word "SearchResultComponent" to indicate a search results component and the word "TableComponent" to indicate a table component. For example, if you specify the name my-sample, the generated class names are MySampleSearchResultComponent and MySampleTableComponent.

   json-file-path

   (Required) The path to where you want to update or create the configuration file (buc-table-config.json).

   In the buc-table-config.json file, the schematic creates an object name by appending "-table" to the name. For example, my-sample-table.

   translation-file-path

   (Required) The path to where you want to update or create the translation literals (en.json).

   In the en.json file, the schematic creates an object name by appending "-table" to the name. For example, my-sample-table.

   shared-lib

   (Required) The name of the shared library folder.

   path

   (Optional) The path to create the search result component, relative to the current module. By default, a folder with the same name as the component is created in the module's root folder.

   table-path

   (Optional) The path to create the table component, relative to the current module. By default, a folder with the same name as the component is created in the module's root folder.

   json-file-name

   (Optional) By default, the schematic updates buc-table-config.json with test data. If you need to update or add your object to a different file, then use this parameter. If you specify a file name that does not exist in the assets folder, then a new file is created.

   project

   (Required) The name of the package folder that the schematic is being created in. For example, creating a search result component in packages/order-search-result the project name will be order-search-result.

   The following command provides an example with parameters.

   ng g @buc/schematics:search-result-component --name my-sample --path packages/order-search/src-custom/app/features/search --table-path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --shared-lib order-shared --project order-search --skip-import