Création d'un portlet

Vous pouvez créer un portlet personnalisé dans le dossier <store-temp>/extensions/features/override-component/src/app/components .

dossier.

Procédure

Accédez au dossier <store-temp>/extensions/features/override-component/src/app/components .
Pour créer un composant de portlet, exécutez la commande suivante:
```
ng g c <portletName> --prefix=isf
```

Ajoutez des variables de chaîne statique portletname et componentName avec la valeur comme nom de classe de composant de portlet, comme illustré.

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

Mettez à jour le nom de classe de composant personnalisé.

Accédez au répertoire <store-temp>/extensions/features/override-component/src/app . Ouvrez le fichier app.module.ts et mettez à jour le nom de classe de composant personnalisé dans l'objet customComponentDeclarations .
Vous pouvez créer un service angulaire pour le nouveau composant de portlet en exécutant la commande suivante:
```
ng g s <serviceName>
```
Remarque: Cette commande crée des fichiers de service .ts dans le même répertoire que celui où vous avez exécuté la commande.

Enregistrez le nouveau portlet dans une vue existante d'exécution de commande ou de gestion de stock.

Dans le fichier <store-temp>/extensions/override-static-assets/portlets/config/isf-persona-config.json , définissez la configuration JSON du portlet comme suit.

[
   {
      "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"
               }
            ]
         }
      ]
   }
]

Remarque: dans le fichier <store-temp>/extensions/override-static-assets/home/i18n/en.json , définissez l'entrée de bundle de traduction pour l'attribut portletTitleBundleKey comme indiqué.

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

Pour plus d'informations sur l'enregistrement des portlets de vue, consultez la section Association de nouveaux portlets à une vue appropriée.

Démarrez l'application en exécutant la commande suivante et vérifiez si le nouveau portlet est chargé dans la page d'accueil.
```
yarn start-app
```