Ajout de nouveaux types d'alerte

Vous pouvez étendre l'implémentation des alertes par défaut dans Sterling Store Engagement pour ajouter de nouveaux types d'alertes et des composants d'alertes personnalisés.

Procédure

Créez la structure de dossier suivante sous SCREEN_EXTENSIONS_HOME, si elle n'existe pas déjà : SCREEN_EXTENSIONS_HOME/features/alert
Accédez au dossier SCREEN_EXTENSIONS_HOME/features/alert .
Copiez alert-extension.module.ts depuis <WORKSPACE>/store-frontend/src/app/features/alert vers le dossier <WORKSPACE>/store-frontend/store-extensions-src/app/features/alert .
Si alert-extension.module.ts est déjà présent, ne copiez pas le fichier. Les composants d'alerte personnalisés et les fournisseurs sont déclarés dans ce fichier.

Pour créer un composant d'alerte, procédez comme suit:

Exécutez la commande suivante :

ng g c <componentName> --project=store-extensions --skip-import

Mettez à jour le nom de classe de composant d'alerte dans les déclarations et la propriété entryComponents du décorateur @NgModule dans alert-extension.module.ts.

Une fois le composant personnalisé créé, vous pouvez accéder à l'objet de configuration d'alerte et à l'objet de détails d'alerte (boîte de réception) renvoyés par l'API getExceptionList en les injectant dans le constructeur du composant, comme indiqué dans le fragment de code suivant:

constructor(
    @Inject('config') public config,
    @Inject('data') public data,
    @Inject('parentComponentId') public parentComponentId
  ) { }

Le tableau suivant fournit les descriptions de chaque liaison d'entrée:


Liaison	Descriptif
`config`	Objet de configuration `alertType` associé à son `alertType`correspondant. Ceci est défini dans la propriété `extensionAlertConfig` .
`data`	Détails de l'enregistrement d'alerte (boîte de réception).
`parentComponentId`	ID unique du composant de conteneur d'alerte `AlertContainerComponent`.

Vous pouvez définir des actions telles que la commande de prélèvement, la commande d'emballage, la confirmation ou la suppression dans le composant d'alerte personnalisé en fonction de vos besoins métier.
Après avoir effectué ces actions, pour fermer le panneau d'alerte, émetrez un événement avec l'action AlertCloseAction.CLOSE comme indiqué dans le fragment de code suivant. Cela permet de s'assurer que le panneau d'alerte est fermé.
```
@Output() eventEmitter: EventEmitter<any> = new EventEmitter<any>();
 this.eventEmitter.emit(AlertCloseAction.CLOSE);
```

Pour créer un service ou un fournisseur pour le nouveau composant d'alerte, procédez comme suit:
1. Exécutez la commande suivante :
```
ng g s <serviceName> --project=store-extensions
```
2. Mettez à jour le nom de service ou de fournisseur dans les fournisseurs de décorateur @NgModule dans alert-extension.module.ts.
Remarque :
- Il est obligatoire de transmettre l'argument --project=store-extensions. Sinon, le composant sera créé dans le dossier src fourni par l'application (<WORKSPACE>/store-frontend/src). Les fichiers créés ici sont ignorés et ne sont pas rendus sur le navigateur.
- Veillez à importer les classes de composant, de service ou de fournisseur d'alerte personnalisée que vous venez de créer dans alert-extension.module.ts à partir de store-extensions-src et non à partir du dossier store-app-build .
- Veillez à importer les services, les composants et les fichiers de type prêts à l'emploi à l'aide des notations @sim-app, @sim-coreou @sim-shared .

Enregistrez l'alerte dans une vue de l'une des manières suivantes. Pour plus d'informations, consultez l'inscription à View-Alert.

Enregistrez l'alerte dans une vue existante.

Par exemple, si vous souhaitez ajouter une alerte personnalisée, YCD_BACKORDER_NOTICE, à une vue existante, Order_Fulfillment, la spécification JSON se présentera comme suit:

{
            personaName: 'Order_Fulfillment',
            alertTypes: [
                   {
                         tid: 'YCD_BACKORDER_NOTICE',
                         exceptionType: 'YCD_BACKORDER_NOTICE',
                          component: ExtnBackOrderNoticeAlertComponent,
                          descBundleKey: 'alerts.LABEL_BackorderNotice'
                    }
            ]
 }

Dans le fichier store-customization-impl.ts , mettez à jour la propriété extensionAlertConfig dans la spécification JSON alert-persona comme suit:

static extensionAlertConfig: IAlertsConfig =      {
        alertConfigList: [
       {
            personaName: 'Order_Fulfillment',
            alertTypes: [
                   {
                         tid: 'YCD_BACKORDER_NOTICE',
                         exceptionType: 'YCD_BACKORDER_NOTICE',
                          component: ExtnBackOrderNoticeAlertComponent,
                          descBundleKey: 'alerts.LABEL_BackorderNotice'
                    }
               ]
        }
      ]
}