Modifying application-provided page components

You can modify a page components and also its child component by using Sterling Store Engagementapplication as per your business requirements.

Components are the most basic user interface building blocks in an Angular application. An Angular application contains a tree of Angular components. A page component is a route level angular component that is used to define a route in a routing module. These components have the PageComponent suffix in the class.

Following is an example of a route definition where PickOrderListPageComponent is a page component.

{
    path: 'pick-order-list',
    component: PickOrderListPageComponent
  }

In Sterling Store Engagement, we support page or route level customization. You can copy the application-provided page components and customize them as per your business requirement. Perform the following steps to customize the application-provided page components:

Identify the screen that needs to be customized.
Identify the screen route looking at the routing module definition of the feature module.
The component corresponding to the route will be the page component to be customized.

Customize the page component

You can customize your page components as per your business requirements. For example, if you want to customize a page component, pick-order-list, by changing screen title displayed by the PickOrderListPageComponent from <WORKSPACE>/store-frontend/src/app/features/backroom-pick which is used in a angular route, http://localhost:4500/store/backroom-pick/pick-order-list, perform the following steps.

You can identify that PickOrderListPageComponent belongs to pick-order-list route and the corresponding page component for the route pick-order-list is BackroomPickRoutingModule which is at the same PickOrderListPageComponent folder location by the following route definition.
```
  {
    path: 'pick-order-list',
    component: PickOrderListPageComponent
  }
```
Copy the PickOrderListPageComponent folder from <WORKSPACE>/store-frontend/src/app/features/backroom-pick/pick-order-list-page to <WORKSPACE>/store-frontend/store-extensions-src/app/features/backroom-pick/pick-order-list-page. You can create the appropriate folder structure features/backroom-pick/pick-order-list-page under SCREEN_EXTENSIONS_HOME, if not already present.
Note: If a route contains multiple angular children components they also need to be copied. For Example, if PickOrderListPageComponent contains child components like PickUpOrderComponent, ShipOrderComponent, and WalkInOrderComponent all these components also need to copied into SCREEN_EXTENSIONS_HOME even thought the changes are to be made just in PickOrderListPageComponent file.
After copying the appropriate route folders, you can customize the page component based on your needs.

Customize the child component part of page component

You can customize the child component part of a page component. For example, if you want to customize PickUpOrderComponent from <WORKSPACE>/store-frontend/src/app/features/backroom-pick which is used in angular route http://localhost:4500/store/backroom-pick/pick-order-list, perform the following steps.

If PickUpOrderComponent belongs to pick-order-list route and the corresponding page component for the pick-order-list route can be identified from BackroomPickRoutingModule at the same folder location which is PickOrderListPageComponent based on the following route definition.
```
{
    path: 'pick-order-list',
    component: PickOrderListPageComponent
  }
```
Copy the PickOrderListPageComponent folder from <WORKSPACE>/store-frontend/src/app/features/backroom-pick/pick-order-list-page to <WORKSPACE>/store-frontend/store-extensions-src/app/features/backroom-pick/pick-order-list-page. You can create the appropriate folder structurefeatures/backroom-pick/pick-order-list-page under SCREEN_EXTENSIONS_HOME, if not already present.
Note: If a route contains multiple angular children components they also need to be copied. For Example, if PickOrderListPageComponent contains child components like PickUpOrderComponent, ShipOrderComponent, and WalkInOrderComponent all these components also need to copied into SCREEN_EXTENSIONS_HOME even thought the changes are to be made just in PickOrderListPageComponent file.
After copying the appropriate route folders, you can customize the page component based on your needs.

Important: Once you copy the folder and its contents in SCREEN_EXTENSIONS_HOME/features/backroom-pick/pick-order-list-page, you own the complete pick-order-list-page component including HTML, SCSS, TS & related data service files. This ensures a seamless upgrade.

Wizard guidelines

Wizard is a structured sequence of screens that can be displayed in an application. A wizard is used to create flows where more than one screen is required to complete a task. For example the Move inventory execution flow is implemented as a wizard with a route definition in MoveInventoryRoutingModule located at <WORKSPACE>/store-frontend/src/app/features/move-inventory/

Following is the route definition for move inventory module.

const routes: Routes = [
  {
    path: 'requests-list',
    component: MoveRequestsListPageComponent,
  },


  {
    path: 'summary/:requestKey',
    component: MoveSummaryPageComponent
  },


  {
    path: ':requestKey',
    component: MoveInventoryWizardPageComponent,
    canDeactivate: [BackHandlingGuardService],
    children: [
      {
        path: 'deposit-products',
        component: DepositProductsPageComponent
      },
      {
        path: 'pick-complete',
        component: PickCompletePageComponent
      },
      {
        path: 'pick-products',
        component: PickProductsPageComponent
      }
               ]
  }
]

The MoveInventoryWizardPageComponent is the wizard component which is a parent route with child routes like pick-products, pick-complete, and deposit-products. If Deposit screen needs to be modified, then child route deposit-products of parent route path: ':requestKey' needs to be considered.

{
        path: 'deposit-products',
        component: DepositProductsPageComponent
}

The entire DepositProductsPageComponent contents needs to be copied to SCREEN_EXTENSIONS_HOME/features/move-inventory/move-inventory-wizard-page/deposit-products-page.

Tip:

In case of adding a new screen or deleting existing child route from a wizard, own the complete wizard component, that is, the parent wizard route.
In case of overriding the screen, own only the child route component. No need to change the route definition unless you want to change the URL.