Tutorial: Customizing the Create order flow

In this tutorial, you learn how to customize the existing Order Hub Create order flow.

The customization by configuration approach is used in this tutorial to make simple updates to existing pages.

The customization by code approach is used in this tutorial, where:
  • The customization by overrides approach is used to modify an existing page to capture extra data (customer purchase order number) and then send the data to the backend API. Since there is no buc-fields-details.json file to modify the order details page, the customization by overrides approach must be used.
Assume that your company needs to customize the Create order flow to include the following extra capabilities:
  1. When you create an order, you want to be able to optionally capture the "customer purchase order number".
  2. When you search for items to add to an order, you want to be able to search for items with a custom ItemAlias field that you use to represent the item's UPC code, EAN, or manufacturer code.
  3. You want to change the labels in the UI. Instead of using the existing labels "Requested ship date", "Requested cancel date" and "Requested delivery date", you want to use the labels "Desired ship date", "Desired cancel date" and "Desired delivery date".

Learning objectives

  • How to customize pages in the Orders application.
  • How to modify existing code in a page to capture extra data and then send the data to the backend API.
  • How to add an extra search parameter in a page and an API through customization by configuration.
  • How to change labels and messages in the application through customization by configuration.

Time required

This tutorial should take approximately 30 minutes to finish. If you explore other concepts that are related to this tutorial, it might take longer to complete.

Skill level

Beginner

Audience

Developers who want to customize Order Hub.

Prerequisites

Expected results

When a user clicks Create order from the Order search page, the Create order page loads with your customizations.
  • The Order details page includes a custom field Customer purchase order number.
    Screen capture of the Create order > Order details page
  • The Add lines > Advanced search modal includes a custom search field Alias value.
    Screen capture of the Create order > Advanced search modal
  • The Manage lines table includes custom table header strings Desired delivery date, Desired availability date, and Desired termination date.
    Screen capture of the Create order > Order details page