Next-generation platform

Creating a portlet

You can create a custom portlet in the <store-temp>/extensions/features/override-component/src/app/components folder.



  1. Browse to the <store-temp>/extensions/features/override-component/src/app/components folder.
  2. To create a portlet component, run the following command:
    ng g c <portletName> --prefix=isf
  3. Add a portletname and componentName static string variables with the value as the portlet component class name as illustrated.
     export class CheckoutPortletComponent { 
       public static portletname = 'CheckoutPortletComponent'; // The class name of the component should be the value for portletname. 
       public static componentName = 'CheckoutPortletComponent'; // The class name of the component should be the value for componentName. 
  4. 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 customPortletsDeclarations object.

  5. You can create an angular service for the new portlet component by running the following command:
    ng g s <serviceName>
    Note: This command creates .ts service files in the same directory where you ran the command.
  6. Register the new portlet to an existing order fulfillment or inventory management view.

    In the <store-temp>/extensions/override-static-assets/portlets/config/isf-persona-config.json file, define the portlet JSON configuration as follows.


    For more information about the view-portlet registration, see Associating new portlets with an appropriate view.

  7. Start the application by running the following command, and verify if the new portlet is loaded in the home page.
    yarn start-app