DeprecatedNext-generation platform

Using custom directives, pipes, components, providers of shared module in application-provided components

Edit online

You can use newly added custom shared components, directives, pipes or services in application provided screens as per your needs.

Procedure

  1. Identify the components and modules where you want to use the newly added custom shared components/directives/pipes/services.
  2. To customize the application-provided components, browse to the corresponding component folder and copy the entire component folder to the appropriate location under SCREEN_EXTENSIONS_HOME. If you are modifying components in the application-provided feature module components, then appropriate folder structure must be created under SCREEN_EXTENSIONS_HOME before copying the files.

Example

  • You have a custom directive, AudioOnEnterDirective (isfAudioOnEnter) and you want to use it on the bar code scan textfield in Pick order portlet component.
    1. Copy the folder pick-order-portlet folder from <WORKSPACE>/storefrontend/src/app/features/home/portlet-set and place it in the <WORKSPACE>/store-frontend/store-extensions-src/app/features/home/portlet-set folder.
    2. Modify the pick order portlet HTML and component class .ts file to include the custom directive and event handlers respectively.
  • You have a custom directive, StickyFocus (isfStickyFocus) and you want to use it in the bar code scan text field in the Pick order portlet component.
    1. Copy the folder pick-order-portlet folder from <WORKSPACE>/storefrontend/src/app/features/home/portlet-set and place it in the <WORKSPACE>/store-frontend/store-extensions-src/app/features/home/portlet-set folder.
    2. Modify the pick order portlet HTML and component class .ts file to include the custom directive and event handlers respectively.
    Similarly, you can add custom pipes, components & services in any of application provided components.
Important:
  • While customizing the application-provided components, it's mandatory to replicate the existing application-provided folder structure of component in SCREEN_EXTENSIONS_HOME. Failing to do so can result in errors.
  • Once you copy a component folder into SCREEN_EXTENSIONS_HOME, you completely own all the contents of the component folder including .html, .scss, .ts and the related data service .ts files. Even if you have to modify only HTML or SCSS file, you still need to copy the complete folder.
  • This ensures seamless upgrade.