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
- Open the devtoolkit_docker/orderhub-code/buc-app-order/overrides.json file.
-
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.
-
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/.
-
Replicate the src folder structure into the
src-custom folder.
- Go to the buc-app-order/packages/create-order/src-custom/app directory.
-
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/.
-
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.
-
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.
- Open the src-custom/app/features/order/create-order/order-setup/order-setup.component.html file.
- 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.
-
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.
-
Set up translation strings and environment configurations.
- Copy the assets folder from buc-app-order/packages/order-shared and paste to buc-app-order/packages/create-order/src-custom.
- Open the buc-app-order/angular.json file.
-
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" } ],
- Also replace the contents in the projects > create-order > architect > build > configurations > merged-prod > assets array.
- Copy the environments folder from 'buc-app-order/packages/create-order/src' into 'buc-app-order/packages/create-order/src-custom'.
- Go to the buc-app-order/packages/create-order/src-custom/environments directory.
-
Add the following line to the end of both the environment.ts and
envrionment.prod.ts files.
environment.customization = true;
-
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
- Create a custom folder under 'buc-app-order/packages/create-order/src-custom/assets'. You can place your custom assets in this folder.
- Create an i18n folder under 'buc-app-order/packages/create-order/src-custom/assets/custom'.
-
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.
-
Paste the following JSON content into the en.json file.
This translation file is used to display the English text for the input box that you created in step 9.{ "CREATE_ORDER": { "ORDER_SETUP": { "CUSTOMER_PO_ORDER_LABEL": "Customer purchase order number (optional)" } } }
- Open the src-custom/app/features/order/create-order/order-setup/order-setup.component.ts file.
-
Add the following variable to class OrderSetupComponent.
custPONo = '';
-
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.
-
By following the orderNo logic, add the following code to the
prepareOrderDetails() function.
this.custPONo = this.orderDetailsData.CustomerPONo;
For more information about theCustomerPONo
API, see the Javadoc. -
Add the following code to the changeOrder() function.
CustomerPONo: this.custPONo,
- 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.
-
By following the orderNo logic, add the following code to the
prepareOrderDetails() function.
-
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.
- Create a data-services folder under /packages/create-order/src-custom/app/.
-
Copy the
buc-app-order/packages/order-shared/src/lib/data-services/create-order-data.service.ts
file into this new folder.
- Open the buc-app-order/packages/create-order/src-custom/app/data-services/create-order-data.service.ts file
-
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';
-
Under createOrChangeOrder add the following code to pass the
CustomerPONo value from the input box.
CustomerPONo: params.CustomerPONo,
-
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.
import { CreateOrderDataService } from "./data-services/create-order-data.service"; export class AppCustomizationImpl { static readonly components = []; static readonly providers = [CreateOrderDataService]; static readonly imports = []; }
- Add an import statement:
-
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';
-
You successfully added an input box to the Create order details page. Now test the
changes.
- Log in to Order Hub.
- Click Orders > Outbound.
-
Click Create order
You can now see the field Customer purchase order number (optional).