Modification de la barre de navigation fournie par l'application

Actuellement, la barre de navigation contient des options de menu de recherche globale et d'alertes qui se trouvent dans le répertoire <store-temp>/<packages>/libs/functional-components/src/lib correspondant.

• Le composant de navigation Alertes s'affiche dans la barre de navigation, qui affiche les alertes entrantes. Ce composant se trouve dans le répertoire <store-temp>/packages/libs/functional-components/src/lib/alert et se développe ou se réduit lorsque vous cliquez sur l'icône en forme de cloche.
• Le composant de navigation Recherche globale s'affiche dans la barre de navigation. Vous pouvez effectuer une recherche globale pour ouvrir rapidement une commande. Ce composant se trouve dans le répertoire <store-temp>/packages/libs/functional-components/src/lib/global-search et se développe ou se réduit lorsque vous cliquez sur l'icône de recherche.

Les cas d'utilisation de personnalisation suivants sont pris en charge pour la barre de navigation:

• Vous pouvez remplacer les options de menu de recherche globale et d'alerte fournies par l'application par des composants personnalisés.
• Vous pouvez masquer les options de menu de recherche globale et d'alerte fournies par l'application.
• Vous pouvez ajouter une option de menu. Pour plus d'informations, voir Ajouter une option de menu.

Le tableau suivant décrit la définition de schéma du fichier isf-navbar-extn-config.json :

Tableau 1. Attributs et descriptions de la définition du schéma

Nom d'attribut	Descriptif
menuTID	Indique l'identificateur unique de l'option de menu affichée dans la barre de navigation. Les valeurs valides sont navBarMenuWidget_1 ou navBarMenuWidget_2.
componentName	Indique le nom du composant chargé dans la barre de navigation. Par exemple, AlertsExtnComponent ou GlobalSearchExtnComponent.
affichage	Indique si l'option de menu doit être affichée ou masquée dans la barre de navigation. Les valeurs valides sont true ou false. La valeur par défaut est true.

[
    {
        "menuTID": "navBarMenuWidget_1",
        "display": false
    },
    {
        "menuTID": "navBarMenuWidget_2",
        "componentName": "AlertsExtensionComponent"
    }
   
]

1. Créez un composant personnalisé.
   Accédez au répertoire <store-temp>/extensions/features/override-component/src/app/components et exécutez la commande suivante:

   ng g c <componentName> --prefix=isf

2. Ajoutez la variable de chaîne statique overrideComponent avec la valeur comme nom de classe de composant, comme illustré.

   ....
   public static overrideComponent = 'AlertsExtensionComponent';
   ....

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

4. Mettez à jour le fichier <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-navbar-extn-config.json avec les détails appropriés. Par exemple, pour remplacer le composant d'alerte fourni par l'application par le AlertsExtensionComponentpersonnalisé, procédez à la mise à jour comme suit:

   [
       {
           "menuTID": "navBarMenuWidget_2",
           "componentName": "AlertsExtensionComponent"
       }
   
   ]

5. Vérifiez que vos modifications sont reflétées dans la barre de navigation.
   Pour vérifier localement la barre de navigation fournie par l'application étendue, démarrez l'application en exécutant la commande suivante:

   yarn start-app