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

Open the devtoolkit_docker/orderhub-code/buc-app-inventory/overrides.json file.
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.
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.
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/.
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.
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.
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.