Extending address display

You can extend the address display capabilities in Sterling Store Engagement by adding or modifying address display templates.

Note: For more information about implementing the address display capability, see Implementing address capture and display.

Adding a new address display template

Use the following procedure to add a new address display template:

Create the following folder structure under SCREEN_EXTENSIONS_HOME, if not already present: SCREEN_EXTENSIONS_HOME/app-common/address/address-display
Copy address-extension.module.ts from <WORKSPACE>/store-frontend/src/app/app-common/address to the <WORKSPACE>/store-frontend/store-extensions-src/app/app-common/address folder.
Custom address display template components and providers are declared in this file.

If address-extension.module.ts is already present, then do not copy the file.
To create a new address display template, perform the following steps:
1. Run the following command:
```
ng g c app-common/address/address-display/components/<componentName> 
--project=store-extensions --skip-import
```
2. Update the address display template component class name in declarations and exports property of @NgModule decorator in address-extension.module.ts.
Register the new address display template in the address display configuration (IAddressDisplayConfig) file. In the store-customization-impl.ts file, update the extensionAddressConfigList property with the JSON specification as shown in the following example:
```
static extensionAddressConfigList: IAddressConfig[] =  [
          {
              countryCode: 'US',
              tid: 'US',
              displayComponent: USDisplayComponent
          }
]
```

The following table lists the properties in the IAddressDisplayConfig properties file:

Table 1. Configuration file properties and descriptions
Property	Description
`countryCode {string}`	Required. Type and unique identifier for the address display template.
`tid {string}`	Required. Unique identifier for testing the address display template.
`displayComponent {component}`	Optional. Reference of the component to be rendered for address display template.
`isDefaultComponent {boolean}`	Optional. Indicates that this must load as the default component if component does not exist for a particular country code.If not provided, it takes US by default.

Modifying address display templates

You can override the out-of-the-box address display template component by providing new component in the component property in the IAddressDisplayConfig file.

You can use a new custom address display template component, CustomDisplayComponent, for existing address display template with the JSON specification as shown in the following example:

static extensionAddressConfigList: IAddressConfig[] =  [
          {
              countryCode: 'US',
              tid: 'US',
              displayComponent: CustomDisplayComponent
          }
]

Note:

You must ensure that you import the corresponding address display component class into address-extension.module.ts file.
You must ensure that you are importing from the store-extensions-src folder and not from the store-app-build folder.

Setting the out-of-the-box address display template as default

You can set the out-of-the-box address display template as the default by setting the isDefaultComponent property as true in the IAddressDisplayConfig file.

The JSON specification for setting an address display template as the default is shown in the following example:

static extensionAddressConfigList: IAddressConfig[] =  [
          {
              countryCode: 'US',
              tid: 'US',
              displayComponent: USDisplayComponent,
              isDefaultComponent: true
          }
]

Add or remove and change validations on the out-of-the-box address display templates

You can add or remove and change validations on the out-of-the-box address display templates by replacing the specific address display template component folder in store-extensions-src.