Preparing to customize the Order search results page

The Order search results page and actions belong to the buc-app-order module. In this lesson, you learn how to enable customization for the buc-app-order module and then copy the necessary assets to start customization.

1. Open the devtoolkit_docker/orderhub-code/buc-app-order/overrides.json file.
2. For order-search-result, set runAsCustomization to true to enable customization for this route. This configuration tells Order Hub to look at your custom code when the order-search-result route is called.
   Important: Only set runAsCustomization to true for the routes that are currently being customized. It is recommended to customize a maximum of five routes at a time.
3. Open a terminal and go to the devtoolkit_docker/orderhub-code/buc-app-order/ directory.
4. Start the application by running the following command.

   yarn start-app

   It can take several minutes to compile and start the application. Wait for the "Compiled successfully" message for each route where runAsCustomization is set to true. For example,

   order-search-result: √ Compiled successfully.

   
   

   You will see a message "** Angular Live Development Server is listening on localhost:<port>, open your browser on https://localhost:<port>/buc-app-order/order-search-result **". You can ignore this message. You must use Order Hub to view the module. Step 5 describes how to test the module in Order Hub.

The Order screens are modularized into different packages in the buc-app-order application. Each package follows the src and src-custom folder structure.

• src contains IBM provided code. Do not modify anything in this folder.
• src-custom contains all your customization code.
• src-merged is generated after building the application, which merges both src and src-custom.

5. Configure Order Hub to render the buc-app-order module from your developer toolkit.
   For more information, see Testing existing module customizations in Order Hub.
6. Verify that you can add content to the existing extension points available in the Schedule order modal by using the differential customization approach:
   1. Within Order Hub, click Orders > Outbound.
   2. Search for an order.
   3. On the search results page, click the overflow menu at the end of a row and then click Schedule.
   4. Press Ctrl + D to show the available extension points on the modal.
      
   5. Make note of the identifiers of the extension points that you want to add content to.

      In this case, we will use the schedule_modal_shared_bottom extension point for the customization.

   6. When you are finished, press Ctrl + Shift + D to hide the available extension points on the modal.