Adding an input box to the "Create order" details page

The “Create order” flow is an Order action that belongs to the buc-app-order module. In this lesson, you learn how to enable customization for the buc-app-order module, copy the necessary assets to start customization, and then add an input box to capture a customer purchase order number.

Procedure

  1. Open the devtoolkit_docker/orderhub-code/buc-app-order/overrides.json file.
  2. For create-order, set runAsCustomization to true to enable customization for this route. This configuration tells Order Hub to look at your custom code when the create-order 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. Find the source code for the existing Create order page.
    In this case, the files are in buc-app-order/packages/create-order/src/app/features/order/create-order/order-setup/.
  4. Replicate the src folder structure into the src-custom folder.
    1. Go to the buc-app-order/packages/create-order/src-custom/app directory.
    2. Create the folders features/order/create-order/order-setup
      Ensure that the resulting path is: buc-app-order/packages/create-order/src-custom/app/features/order/create-order/order-setup/.
  5. Go to the buc-app-order/packages/create-order/src/app/features/order/create-order/order-setup directory and copy the order-setup.component.html and order-setup.component.ts files.
    Note: You do not need to copy the .scss file since this tutorial does not change the styling of the elements.
  6. Paste the files into the buc-app-order/packages/create-order/src-custom/app/features/order/create-order/order-setup directory.
    You might notice some errors due to relative paths. You can ignore these errors.
  7. Open the src-custom/app/features/order/create-order/order-setup/order-setup.component.html file.
  8. Since you need to add an input box, analyze the input boxes that exist in the order-setup.component.html file. You can use the Order number input box as a starting point. The following step uses code that is similar to the Order number input box.
  9. Add the new input box in the same row as the existing "Requested cancel date" field.

    Tip: Search for "Requested cancel date" and notice it is within a div with class bx--row. Add the following input box as a column within this row.

    <div class="combo-box bx--col-md-3">
                    <buc-label class="size--sm" [label]="'CREATE_ORDER.ORDER_SETUP.CUSTOMER_PO_ORDER_LABEL' | translate" placeholder=""
                        [(inputValue)]="custPONo" [isDisabled]="isEdit"></buc-label>
    </div>
    
    • This input box allows users to add a Customer purchase order number to the order that they are creating.
    • The [label] value uses dot-notation to retrieve the string from JSON translation files. You will create the en.json file that holds the literal string in later steps.
    • The custPONo is a custom variable that will hold the user input. You will update the .ts file to include this new custPONo variable in later steps.
  10. Set up translation strings and environment configurations.
    1. Copy the assets folder from buc-app-order/packages/order-shared and paste to buc-app-order/packages/create-order/src-custom.
    2. Open the buc-app-order/angular.json file.
    3. Replace the current contents of the projects > create-order > architect > build > configurations > merged > assets array with the following entries. The purpose of this step to direct the module to use the customized assets files instead of the files from /order-shared.
                  "assets": [
                    {
                      "glob": "**",
                      "input": "packages/create-order/src-merged/assets",
                      "output": "assets"
                    },
                    {
                      "glob": "*.json",
                      "input": "packages/create-order/src-merged/assets/buc-app-order",
                      "output": "assets/create-order"
                    },
                    {
                      "glob": "**",
                      "input": "node_modules/@buc/svc-angular/assets",
                      "output": "assets"
                    },
                    {
                      "glob": "**",
                      "input": "node_modules/@buc/common-components/assets",
                      "output": "assets"
                    }
                  ],
    4. Also replace the contents in the projects > create-order > architect > build > configurations > merged-prod > assets array.
    5. Copy the environments folder from 'buc-app-order/packages/create-order/src' into 'buc-app-order/packages/create-order/src-custom'.
    6. Go to the buc-app-order/packages/create-order/src-custom/environments directory.
    7. Add the following line to the end of both the environment.ts and envrionment.prod.ts files.
      environment.customization = true;
    8. Stop and restart the server so that changes to the angular.json and overrides.json files take effect.
      Stop the job in the terminal. Then run:
      yarn stop-app
      yarn start-app
    9. Create a custom folder under 'buc-app-order/packages/create-order/src-custom/assets'. You can place your custom assets in this folder.
    10. Create an i18n folder under 'buc-app-order/packages/create-order/src-custom/assets/custom'.
    11. Create an en.json file under 'buc-app-order/packages/create-order/src-custom/assets/custom/i18n.
      The en.json file includes the English literal strings to display in the UI. You can add translated strings by creating other JSON files. Name the files based on the ISO-639 language codes. For example, fr.json for strings in French.
    12. Paste the following JSON content into the en.json file.
      {
          "CREATE_ORDER": {
              "ORDER_SETUP": {
                  "CUSTOMER_PO_ORDER_LABEL": "Customer purchase order number (optional)"
              }
          }
      }
      
      This translation file is used to display the English text for the input box that you created in step 9.
  11. Open the src-custom/app/features/order/create-order/order-setup/order-setup.component.ts file.
  12. Add the following variable to class OrderSetupComponent.
    custPONo = '';
    image
  13. Since this custom input box is similar to the existing Order number input box, you can search in the order-setup.component. file for the orderNo variable and copy its implementation for the custPONo variable.
    1. By following the orderNo logic, add the following code to the prepareOrderDetails() function.
      this.custPONo = this.orderDetailsData.CustomerPONo;
      image
      For more information about the CustomerPONo API, see the Javadoc.
    2. Add the following code to the changeOrder() function.
      CustomerPONo: this.custPONo,
    3. The last place that the orderNo variable appears is in the onText($event, field) function. You do not need to use this function so ignore this part.
  14. Ensure that the parameter is passed to the API call. The API that is used to create an order is called createOrder and is located in buc-app-order/packages/order-shared/src/lib/data-services/create-order-data.service.ts. You now need to customize this .ts file.
    1. Create a data-services folder under /packages/create-order/src-custom/app/.
    2. Copy the buc-app-order/packages/order-shared/src/lib/data-services/create-order-data.service.ts file into this new folder.
      image
    3. Open the buc-app-order/packages/create-order/src-custom/app/data-services/create-order-data.service.ts file
    4. Update the import paths for Templates and CommonService.
      import { Templates } from '@buc/order-shared/lib/constants/order.constants';
      import { CommonService } from '@buc/order-shared/lib/data-services/common-service.service';
      
    5. Under createOrChangeOrder add the following code to pass the CustomerPONo value from the input box.
      CustomerPONo: params.CustomerPONo,
      image
    6. Modify the buc-app-order/packages/create-order/src-custom/app/app-customization.impl.ts file as follows.
      • Add an import statement:
        import { CreateOrderDataService } from "./data-services/create-order-data.service";
      • Add the CreateOrderDataService into the provider array.
      For example,
      import { CreateOrderDataService } from "./data-services/create-order-data.service";
      
      export class AppCustomizationImpl {
          static readonly components = [];
      
          static readonly providers = [CreateOrderDataService];
      
          static readonly imports = [];
      
      }
    7. In the src-custom/app/features/order/create-order/order-setup/order-setup.components.ts file, change the import path for the CreateOrderDataService to:
      import { CreateOrderDataService } from '../../../../data-services/create-order-data.service';
  15. You successfully added an input box to the Create order details page. Now test the changes.
    1. Log in to Order Hub.
    2. Click Orders > Outbound.
    3. Click Create order
      You can now see the field Customer purchase order number (optional).
      A screen capture of the Create order wizard. The Customer purchase order number is highlighted with a red box.