Performing customization by overrides
Use the customization by overrides approach if none of the other customization approaches satisfy your scenario. You can perform any customization in Order Hub by using the customization by overrides approach. The customization by overrides approach provides complete flexibility to customize anything in existing pages. However, after you make changes to the code, you are taking ownership of that route or page and all the companion code assets that come with that page. Therefore, when IBM releases new updates, you will not automatically get updates for that page. To get new updates, you will need to re-synchronize your customization changes to the latest code release.
The Order Hub application runs from the source code seen under the src-merged folder. The <order_hub_code_directory>/packages/src-merged folder is generated by merging the code from the src and src-custom folders during code compilation. A compilation occurs every time that you save code changes on your machine. Do not modify code in the src-merged folder. Instead, update the src-custom folder as needed.
Procedure
- Setup the Order Hub customization environment: Customizing existing applications.
- Prepare the route for customization by overrides: Preparing pages and routes for customizations.
- Identify the source code for the component for the screen that you want to make changes to.
- Copy the files from the src folder to src-custom, duplicating the exact folder structure: Understanding important folders and files.
- Start making changes to the files in src-custom and save to see the changes compile. Hint: Check if the desired customization is an existing pattern in Order Hub, then find the component in the Order Hub source code and replicate as needed.
- Refresh the web browser and go into the page to see the changes.
Customizing a component that is defined under the shared folder
The preceding steps describe the customization by overrides approach for files inside the package. However, there are cases where a component from the shared package needs to be changed. To bring over components from the shared folder, apply the copy into a new component approach.
- Copy the entire component from the shared folder into the src-custom folder.
- Rename the component (i.e. prefix it with the word Custom) and rename the selector name to be unique. Do not conflict with the existing component defined in the shared folder.
- Import the new component and define it in the app-customization.impl.ts file.
- Fix up the imports in the new component .ts file. The original file was importing files within shared so it would have used relative paths, but since it is moved out of shared, then the import references should be from @buc/-shared instead.
- Bring the file that uses the component to switch it to use the new component instead of the component in the shared folder.