Customizing existing applications

You can start with any of the existing Order Hub applications, and then customize the modules within the application. For example, you can customize the Order search results page to retrieve more data from the IBM® Sterling Order Management System API and display the data in an existing table.

Customizing an existing module

Make sure that you extracted the Order Hub code. For more information, see Getting started with customizing Order Hub.
Open a terminal and go to the Order Hub code directory.
- The default location is devtoolkit_docker/orderhub-code.

Go to the module that you want to customize. For example, if you want to update the order module, then go to the buc-app-order folder:

cd devtoolkit_docker/orderhub-code/buc-app-order

Table 1. Mapping between Order Hub menu item and folder name in the toolkit
Menu in Order Hub	Module/folder name	Port
Home Workspaces Alerts Settings > Alert rules	buc-app-workspace	8900
Nodes and capacity	buc-app-node	8200
Orders Shipments	buc-app-order	8300
Inventory	buc-app-inventory	8600
Fulfillment Promise and Fulfill	buc-app-fulfillment	9000
Exceptions	buc-app-exception	9100
Settings > Display settings Settings > User roles Settings > Customization Settings > About Configuration > Distribution groups	buc-app-settings	8400
Configurations > Nodes Configurations > Carriers Configurations > Custom attributes Configurations > Tenant	buc-app-configurations	9200

Run the following command to set strict-ssl to false.
```
yarn config set "strict-ssl" false
```
If you updated the developer toolkit environment with a new version, run the following command to ensure that you get the latest version of all open source and library dependencies.
```
yarn cache clean
```
Run the following command to install all the dependencies for the module.
```
yarn install --update-checksums
```
If you encounter an error similar to the follow message, then you can safely ignore the error. These errors do not affect the icons that are used by Order Hub.
```
Error: Failed to compile entry-point @carbon/icons-angular/
```
Open the overrides.json file at the root of the module/folder. For example, devtoolkit_docker/buc-app-order/overrides.json.
Update the routes for the pages that you are customizing by setting runAsCustomization to true. For example, if you wanted to edit the Order search page, set order-search to true.
```
    "order-search": {
      "runAsCustomization": true
    },
```
Start the server.
```
yarn start-app
```
It can take several minutes to compile and start the application.
Note: You see the following message.
```
"** Angular Live Development Server is listening on bucgenerichost:<port>, 
open your browser on https://localhost:<port>/<module>/<route> **"
```
You can ignore this message.
Note: If you encounter an error similar to the following message, increase the heap size before you start the new application.
```
Error command failed with exist code 134.
lerna ERR! yarn run start .... exited 134
```
Run the following command and then start the new application.
- Windows CMD prompt:
```
SET NODE_OPTIONS=--max_old_space_size=8048
```
- Bash/Git Bash:
```
export NODE_OPTIONS=--max_old_space_size=8048
```
- Powershell:
```
$Env:NODE_OPTIONS=--max_old_space_size=8048
```
Note: If you need to stop the server, stop the server job and run the yarn stop-app command to verify that everything is stopped properly.

Note: Only start the servers for the modules that you are customizing. Whenever you customize a module, you need to run yarn start-app in the respective module directory to view the customized the pages within the module.
You are now ready to customize.
Customize existing pages that are provided by IBM. Order Hub supports the following levels of customization when it comes to adding functionality to existing pages:
- Customization by configuration
- Customization by code
  - Differential customization
  - Customization by overrides
For more information, see Customizing next-generation Order Hub.
Or, go through the tutorials:
- Tutorial: Customizing the Schedule order action - Uses the differential customization and customization by overrides approach.
- Tutorial: Customizing the Create order flow - Uses the customization by configuration and customization by overrides approaches.
- Tutorial: Customizing the Inventory search results page - Uses the customization by configuration and customization by overrides approaches.
After customizing the module, you can test the customizations in Order Hub.