Creating a portlet

Browse to the <store-temp>/extensions/features/override-component/src/app/components folder.

To create a portlet component, run the following command:

ng g c <portletName> --prefix=isf

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. 
...
...

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.

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.

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.

[
   {
      "personaName":"Order_Fulfillment",
      "personaIconClass":"app-icon-order_fulfill_20",
      "portlets":[
         {
            "portletTitleBundleKey":"invoicePortlet.TITLE_InvoicePortlet",
            "portletTID":"invoicePortlet",
            "extensionType":"CODE",
            "portletSequenceNumber":30,
            "portletComponent":"invoicePortletComponent",
            "portletIconClass":"app-icon-invoice",
            "portletColor":"#9772b2",
            "resourceId":"ISF000048",
            "requiresMultiLocation":false,
            "requiresInventory":false,
            "sitemap":[
               {
                  "portletBundleKey":"sitemap.TITLE_invoicePortlet",
                  "relativeUrl":"/store-frontend/invoice/invoice-list"
               }
            ]
         }
      ]
   }
]

Note: In the <store-temp>/extensions/override-static-assets/home/i18n/en.json file, define the translation bundle entry for the portletTitleBundleKey attribute as shown.

{
    invoicePortlet : {
        “TITLE_InvoicePortlet” : “Invoices”
    }
}

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

Start the application by running the following command, and verify whether the new portlet is loaded in the home page.

yarn start-app

Creating a portlet

Procedure