Customization options

You can customize and configure next-generation Order Hub to meet your business needs by creating new applications and pages or by modifying existing applications and pages. Your choice depends on your customization requirements and how you want to handle and process updates.

Customization by creating new applications and pages

When you add capabilities by designing and coding a new, separate, custom application or page, you control and own your code. Your code is isolated from IBM® code and does not affect any of the modules or pages that are provided by IBM. Therefore, when monthly feature updates come out from IBM, the updates do not affect your customizations. To get started with this type of customization, follow the Order Hub instructions to set up your development environment with the option of generating a new code module repository. For more information, see Creating new applications in next-generation Order Hub.

Customization by modifying existing applications

You can add capabilities by modifying existing applications and pages that are provided by IBM. This method has different approaches. Depending on the approach that you take, you either write new code or for simple customizations, you make configuration changes. In either case, you have flexibility in how updates are processed and rolled out and what they affect. Which approach you use depends on your customization requirements and how you want to maintain and update your code.

The customization by configuration approach

With the customization by configuration approach, you can customize existing pages without writing code. Certain pages or patterns in next-generation Order Hub allow for simple customizations by completing configuration changes that are defined in JSON files. The patterns that support this capability are the search forms, tables, and field attributes that have the settings icon image. You can learn more about the customization by configuration approach in the following tutorials:

For more information about customization by configuration, see Customizable elements by configuration.

The customization by code approach

With the customization by code approach, you customize existing pages by writing code in one of two ways:

  • Differential customization
  • Customization by overrides
With differential customization, you keep your customization code separate from IBM code. When IBM releases updates to a page that is customized, your updates are preserved. You don't need to merge your code, recompile it with the monthly DTK code. With differential customization, you can:
Add custom pages
When you add new pages to the navigation, it acts as an iFrame inside the common shell. For more information, see Creating new applications in next-generation Order Hub.
Add content to existing pages by using extension points
Every component that makes up a page contains two extension points for inserting custom code into any existing page. Fixes and new capabilities are easily picked up due to clean code separation. For more information, see Adding content to existing pages by using extension points.
Add custom tabs and page actions
Add custom tabs and page actions in the order that you specify. For more information, see Adding custom tabs to existing pages and Adding custom actions to existing pages.

Learn more about the differential customization approach in the Tutorial: Customizing the Schedule order action tutorial.

With customization by overrides, you can customize an existing page in next-generation Order Hub with complete flexibility. However, after you modify the code, you take ownership of that route or page and all the corresponding companion code assets that come with that page. Therefore, when new updates are released, you do not automatically get updates for that page. To get the new updates, you must resynchronize your customization changes to the latest next-generation Order Hub code release. Learn more about the customization in the following tutorials:

Tip: Check whether the wanted customization is an existing pattern in next-generation Order Hub and then find the component in the next-generation Order Hub source code and replicate as needed.

Customization approaches quick comparison

When you decide which approach to take for your customizations, consider the following coding and update or code merging requirements.
Table 1. Customization approach quick comparison
Approach Is coding needed? Is a code merge needed for IBM fix updates?
Customization by configuration No No
Customization by code Yes
No for differential customization
Recompile with the monthly DTK code.
Yes for customization by overrides
Manually resynchronize your customization changes to the latest code release.

References

  • Order Hub is built using the Angular framework and supports Carbon components. For information about current Angular and Carbon versions, compatibility, and migration, see Angular and Carbon versions.
  • Get started with quickly prototyping UI fragments for your next-generation Order Hub pages by using the IBM Carbon UI Builder. For more information, see https://builder.carbondesignsystem.com.
  • View the custom components in next-generation Order Hub by accessing the storybook. Access the storybook at https://localhost:8443. The orderhub extension Docker container must be running to access the storybook. If the container is not running, in the devtoolkit_docker/compose directory, run the ./om-compose.sh start orderhubext command.