Modifying application-provided functional components

The application provides reusable functional components that are packaged in the @store/functional-components angular library. These components are built for addressing specific domain or functional use case, and are widely used across the application.

You can customize the application-provided functional components or create new custom components as needed for your business.

Before you begin

The application-provided functional components are present in the <store-temp>/packages/libs/functional-components/src/lib folder. Each of these components encapsulate a specific capability and is widely used across the application.

To map the application-provided functional component with the custom component, use the <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-component-extn-config.json file. In the JSON file, ensure that you map the unique identifiers of the application-provided components with the custom or overridden components.

The following table describes the schema definition of the isf-component-extn-config.json file:

Attribute name	Description
applicationProvidedComponentId	A unique identifier that is assigned to the application-provided functional component. For example, `MiniCartComponent`.
overrideComponentId	A unique identifier that is assigned to the overridden or custom component. For example, `MiniCartCustomComponent`.

When you override an application-provided functional component, update <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-component-extn-config.json with the attributes that are described in the table.

Procedure

Modify an application-provided functional component in any of the following ways:
- Create a new custom component.
  1. Browse to <store-temp>/extensions/features/override-component/src/app/components directory, and run the following command:
```
ng g c <componentName> --prefix=isf
```
  2. Add the componentName static string variable with the value as the component class name as follows:
    public static componentName = 'MiniCartCustomComponent';
- Copy and modify the application-provided component as needed for your business.
  1. Identify the application-provided functional component that you want to extend.
  2. Copy the entire component source folder and copy to the <store-temp>/extensions/features/override-component/src/app/components directory.
Update the custom component class name.
Go to the <store-temp>/extensions/features/override-component/src/app directory. Open the app.module.ts file, and update the custom component class name in the customComponentDeclarations object.

Note: If the extended component imports files outside of the component folder, ensure that you manually copy such files to the appropriate location within the component folder. Also, ensure that you import and declare the components in the app.module.ts file that is present in the <store-temp>/extensions/features/override_component/src/app folder. If application has dependency on other angular module, import the appropriate module. For example, FormsModule, CommonModule, ReactiveFormsModule, and so on.
Update the <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-component-extn-config.json file with the appropriate details. For example, to replace the application-provided mini-cart component with the custom mini-cart component, update as follows:
```
[{
    "applicationProvidedComponentId": "MiniCartComponent",
    "overrideComponentId": "MiniCartCustomComponent"
  }]
```

To support localization and internationalization, the i18n folders are maintained in the <store-temp>/extensions/features/override-component/src/assets/override-component/i18n/ folder. The en.json bundle file for English language is included in i18n folder. You can also create a language-specific bundle JSON file.

Note:

If you modify the application-provided AddressCaptureComponent or AddressDisplayComponent, complete the following steps:
1. Copy AddressRegistryService and AddressConfigList from <store-temp>/packages/libs/functional-components/src/lib/address to the <store-temp>/extensions/features/override-component/src/app/components/customAddress folder.
  Here, customAddress refers to the folder name that contains the extended address display or capture components.
2. Import AddressRegistryService and AddressConfigList to the app.module.ts file.
3. Register AddressConfigList in AddressRegistryService in the constructor of the app.module.ts file as follows:
```
class AppModule implements OnDestroy, DoBootstrap {
......
    constructor() {
      .....
      AddressRegistryService.registerAddress(AddressConfigList, []);
      .....
    }
.......
}
```
If you modify the application-provided GlobalSearchRegistryService, complete the following steps:
1. Copy GlobalSearchRegistryService from <store-temp>/packages/libs/functional-components/src/lib/global-search to the <store-temp>/extensions/features/override-component/src/app/components/global-search-extn folder.
  Here, global-search-extn refers to the folder name that contains the extended global search components.
2. Import GlobalSearchRegistryService to the app.module.ts file.
3. Declare searchComponentDeclarations.
```
const searchComponentDeclarations = [
	  OrderSearchComponent,
	  CustomerSearchComponent,
	  ProductSearchComponent,
	  ShipmentSearchComponent
	];
```
4. Register searchComponentDeclarations in GlobalSearchRegistryService in the constructor of the app.module.ts file as follows:
```
GlobalSearchRegistryService.registerSearchComponents(searchComponentDeclarations);
```

What to do next

To locally verify the extended application-provided functional component, start the application by running the following command, and go to the screen where the functional component is displayed.
```
yarn start-app
```
To verify the changes in the developer toolkit, extract and deploy the customizations. For more information about extracting and deploying customizations, see Extracting customizations.