Creating search page components

Create a search page that displays configurable fields and grouping options. Use this schematic to quickly scaffold a search UI, which helps you define search criteria in a consistent layout and reduce manual setup work.

About this task

Create a search page component for users to specify search criteria and search for data.

The search-panel schematic creates the search page component and includes code to support the following features:
  1. A breadcrumb trail
  2. Save search function
  3. Customize search criteria function
  4. Search by groupings
The following screen capture shows the Shipment search page and highlights the features within the search page.
A screen capture of the shipment search page. The breadcrumb trail is surrounded by a box with the label number 1. The Saved search button is surrounded by a box with the label 2. The Customize search criteria button is surrounded by a box with the label 3. The Search-by grouping is surrounded by a box with the label 4.

Procedure

  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. 
    ng g @buc/schematics:search-panel --name <name> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--shared-lib <shared-lib> \
--path <path> \
--json-file-name <json-file-name> \
--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 "SearchComponent". For example, if you specify the name my-sample, the generated class name is MySampleSearchComponent.
    json-file-path
    (Required) The path to where you want to update or create the configuration file (search_fields.json). For example, packages/order-shared/assets/buc-app-order.
    In the search_fields.json file, the schematic creates an object name by appending "-search" to the name. For example, my-sample-search.
    translation-file-path
    (Required) The path to where you want to update or create the translation literals (en.json). For example, packages/order-shared/assets/buc-app-order/i18n.
    In the en.json file, the schematic creates an object name by appending "-search" to the name. For example, my-sample-search.
    shared-lib
    (Required) The name of the shared library folder.
    path
    (Optional) The path to create the component file, 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 search_fields.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 is order-search-result.
    The following command provides an example with parameters.
    ng g @buc/schematics:search-panel --name my-sample --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

Results

The schematic creates the new component and updates the shared files. The output summarizes the files that were created and updated.

What to do next

You can use the component as is, or extend it to meet specific business requirements.