Modifying application-provided portlets

You can customize and replace the application-provided portlets with custom portlets.

Before you begin

Identify the application-provided portlet that you want to customize. The application-provided portlets are present in the <store-temp>/packages/features/home/src/app/portlet-set directory. You can either create a new portlet component or copy and modify the application-provided portlet.

Procedure

Copy the appropriate application-provided portlet component folder from <store-temp>/packages/features/home/src/app/portlet-set directory to the <store-temp>/extensions/features/override-component/src/app/components directory.
In the component.ts file of the portlet, update the portlet's component class name. Add the componentName variable and update the portletname and componentName variables with the component class name.
Update the portlet component class name by completing the following steps:
1. Browse to the /extensions/features/override-component/src/app/ directory.
2. Open the apps.module.ts file.
3. In the customComponentsDeclarations object, update the portlet component class name.
4. Import the portlet component class name.
Copy the application-provided portlet JSON configuration from the <store-temp>/packages/features/app-shell/src/assets/app-shell/config/isf-persona-config.json file to the <store-temp>/extensions/override-static-assets/portlets/config/isf-persona-config.json file. You can identify the application-provided portlet by using the component class name. Also, add the extensionType attribute with appropriate values. For more information, see Associating new portlets with an appropriate view.
In the JSON configuration, update the custom portlet component class name in the portletComponent attribute that you copied to the <store-temp>/extensions/override-static-assets/portlets/config/isf-persona-config.json file.

Note: In the JSON configuration, do not change the portletTID attribute.
Declare all components that are part of the app module in the app.module.ts file.
Start the application by running the following command, and verify that the new portlet is loaded in the home page.
```
yarn start-app
```

What to do next

To support localization and internationalization, the i18n folder is present in the <store-temp>/extensions/features/override-component/src/assets/override-component/ folder. You can create the language-specific bundle JSON file. For example, en.json for the English locale and add the custom bundle entries language-specific JSON file, which is en.json for English locale. If you are overriding the application-provided portlets, ensure that the bundles static variable in the app-module-ts contains the assets that are loaded from the home application. See the following sample code snippet.
```
class OverrideComponentBundlesModule {
  static bundles: Array<any> = [
    {
      prefix: './assets/override-component/i18n/',
      suffix: '.json'
    },
    {
      prefix: './assets/home/i18n/',
      suffix: '.json'
    }
  ].concat(CommonBundlesModule.bundles);
};
```
For more information, see Modifying bundle entries for the application-defined components.
You can navigate to different screens or angular routes by using the StoreRouterService angular service. For more information, see Navigating to routes.
To verify the changes in the developer toolkit, extract and deploy the customizations. For more information, see Extracting customizations.