Tutorial: Customizing the Schedule order action

In this tutorial, you learn how to customize an existing Order Hub application to customize the Schedule orders action.

The customization by code approach is used in this tutorial, where:
  • The differential customization approach is used to identify the existing extension points available in the Schedule order modal.
  • The customization by overrides approach is used to modify an existing table action by only overriding the action service class. Overrides are used because the tutorial takes over an existing table action instead of adding a new one.

Assume that your company needs to customize Order Hub's Schedule orders action. In your company's order process flow, you want to allow users to manually enter a note to explain the reason for their scheduling selections as they schedule certain orders.

Learning objectives

  • How to customize pages in the Orders application.
  • How to modify an existing table action by only overriding the action service class.
  • How to add extra elements in a modal and chain some backend API calls from the UI.
  • How to call an OMS API.

Time required

This tutorial should take approximately 60 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 Schedule from the Order search results table, a modal appears. In the modal, you will now have a new "Add note" section with the following fields:

  • Date picker to choose a date to contact the customer.
  • Time picker to choose a time to contact the customer.
  • Text fields to provide the contact information. Any current customer information is automatically populated.
  • Text field to enter the note.
  • Drop-down menu to choose a reason for the note. The menu calls getCommonCodeList to populate values.
  • Drop-down menu to choose contact type. The menu calls getCommonCodeList to populate values.
  • Text field to enter contact reference information.
  • Save button calls modifyFulfillmentOptions to save the note.
A red box outlines the new Add note section that you will customize into the Schedule order modal