Next-generation platformDeprecated

Modifying application-provided components

Edit online

Components are the most basic user interface building blocks in an Angular application. An Angular application contains a tree of Angular components. You can copy application-provided components and customize them as needed for your business.

The procedure to modify application-provided components in any of the feature modules is the same as that of modifying an application-provided portlet. For example, the procedure to modify an application-provided portlet component in HomeModule. For instructions to modify an application-provided portlet, see Modifying application-provided portlets.
Important:
  • When upgrading to a newer major update version, to get the out-of-the-box product changes in an overridden component, you must compare the out-of-the-box code with the code in your corresponding customized files, and merge the latest code from out-of-the-box files to your customized component files. This activity must be done when the preview developer toolkit is released for a major update.

    For a minor update, you must first upgrade the developer toolkit environment and take the latest source files from there, compare with your customized files, and merge the code changes.

  • While modifying an application-provided component, once you copy the component folder contents, you own the complete portlet component including the HTML, SCSS, TS, and related data service files.

    For example, if you are modifying an application-provided PickOrderPageComponent component in BackroomPickModule, once you copy the pick-order-page folder in SCREEN_EXTENSIONS_HOME/features/backroom-pick/pick-order-page, you own the complete PickOrderPageComponent component.

  • Even if you have to modify only HTML or SCSS files, you must still copy the complete folder. This instruction applies to modifying any component present in any of the modules including feature and shared modules as well. This is required to ensure seamless upgrade.
Draft comment: shailaskumar@in.ibm.com
Commented this point as discussed in the private Slack Channel with Mansi, https://ibm-studios.slack.com/archives/DT0MPHUQ6/p1645096789848589
  • If you have customized any of the following data service files, it is mandatory to merge the out-of-the-box product code changes with your corresponding customized files.
    • src\app\features\lookup-inventory\remove-inventory-page\remove-inventory-data.service.ts
    • src\app\features\receive-inventory\utils\notes-data.service.ts
    • src\app\features\receive-inventory\product-list-page\product-page-data.service.ts
    • src\app\features\receive-inventory\container-list-page\container-list-page-data.service.ts
    • src\app\features\shipment-summary\shipment-summary-page\shipment-summary-data.service.ts
    • src\app\features\transfer-inventory\transfer-order-summary-page\transfer-order-summary-data.service.ts