Preparing to customize the "Inventory search results" table

The Inventory search results table is part of the Inventory search results page within the buc-app-inventory module. In this lesson, you learn how to enable customization for the buc-app-inventory module and copy the necessary assets to start customization.

Procedure

  1. Open the devtoolkit_docker/orderhub-code/buc-app-inventory/overrides.json file.
  2. For inventory-search-results, set runAsCustomization to true to enable customization for this route. This configuration tells Order Hub to look at your custom code when the inventory-search-results route is called.
    Important: Only set runAsCustomization to true for the routes that are currently being customized. It is recommended to customize a maximum of five routes at a time.
  3. Find the source code for the existing inventory-search-results page.
    In this case, the files are in the buc-app-inventory/packages/inventory-search-results/src/app/features/search directory.
  4. Replicate the src folder structure into the src-custom folder.
    1. Go to the buc-app-inventory/packages/inventory-search-result/src-custom/app directory.
    2. Create a folder with the name features.
      Ensure that the resulting path is: buc-app-inventory/packages/inventory-search-result/src-custom/app/features/.
  5. Copy the buc-app-inventory/packages/inventory-search-results/src/app/features/search folder and paste into the buc-app-inventory/packages/inventory-search-results/src-custom/app/features directory.
  6. Copy the buc-app-inventory/packages/inventory-search-results/src/app/features/ext-search.module.ts file and paste into the packages/inventory-search-results/src-custom/app/features directory.
  7. Set up translation strings and environment configurations.
    1. Create an assets folder in the buc-app-inventory/packages/inventory-search-results/src-custom directory.
    2. Copy the buc-app-inventory/packages/inventory-shared/assets/buc-app-inventory folder and paste to the buc-app-inventory/packages/inventory-search-results/src-custom/assets folder.
    3. Open the buc-app-inventory/angular.json file.
    4. Replace the current contents of the projects > inventory-search-results > architect > build > configurations > merged > assets array with the following entries. The purpose of this step to direct the module to use the customized assets files instead of the files from /inventory-shared.
                  "assets": [
      {
        "glob": "**",
        "input": "packages/inventory-search-results/src-merged/assets",
        "output": "assets"
      },	
      {
        "glob": "*.json",
        "input": "packages/inventory-search-results/src-merged/assets/buc-app-inventory",
        "output": "assets/inventory-search-results"
      },
      {
        "glob": "**",
        "input": "node_modules/@buc/svc-angular/assets",
        "output": "assets"
      },
      {
        "glob": "**",
        "input": "node_modules/@buc/common-components/assets",
        "output": "assets"
      }
      
                  ],
    5. Also replace the contents in the projects > inventory-search-results > architect > build > configurations > merged-prod > assets array.
    6. Copy the environments folder from buc-app-inventory/packages/inventory-search-results/src and paste into buc-app-inventory/packages/inventory-search-results/src-custom.
    7. Go to the buc-app-inventory/packages/inventory-search-results/src-custom/environments directory.
    8. Add the following line to the end of both the environment.ts and envrionment.prod.ts files.
      environment.customization = true;
    9. Stop and restart the server so that changes to the angular.json and overrides.json files take effect.
      Stop the job in the terminal. Then run:
      yarn stop-app
      yarn start-app
    10. Create a custom folder under 'buc-app-inventory/packages/inventory-search-results/src-custom/assets'. You can place your custom assets in this folder.