Modification des fenêtres modales fournies par l'application

Les boîtes de dialogue modales sont utilisées pour présenter des informations critiques ou pour demander une entrée utilisateur nécessaire pour effectuer des actions utilisateur spécifiques. Les actions utilisateur incluent l'annulation d'une commande, l'affichage de numéros de série, l'ajout ou l'affichage de notes pour une commande ou une ligne de commande, etc.

Une boîte de dialogue modale est similaire à un écran en incrustation, qui ouvre une boîte de dialogue pour afficher un écran sur le contenu principal de l'application. Toutes les boîtes de dialogue modales sont affichées dans l'écran parent. Lorsqu'une boîte de dialogue modale est ouverte, les utilisateurs ne peuvent pas revenir à l'écran parent. En outre, toute action utilisateur est ignorée tant que la tâche modale n'est pas terminée ou que la boîte de dialogue modale n'est pas fermée.

Vous pouvez personnaliser les modales fournies par l'application en fonction des besoins de votre entreprise.

Avant de commencer

Les fenêtres modales fournies par l'application sont présentes dans le répertoire des fenêtres modales des composants de page ou de l'écran correspondants, comme expliqué dans les exemples suivants:

Le composant modal Annuler la commande s'affiche lorsque vous cliquez sur la tâche connexe Annuler la commande dans l'écran Récapitulatif de la commande . Le composant modal d'annulation de commande est présent dans le répertoire <store-temp>/packages/features/orders/src/app/features/orders/order-summary-page/modals/cancel-order-modal .
Le composant modal de rupture de stock d'enregistrement s'affiche lorsque vous souhaitez marquer une quantité de produit comme rupture de stock dans la page Prélèvement du flux de stock de transfert. Le composant modal de rupture de stock d'enregistrements est présent dans le répertoire <store-temp>/packages/features/move-inventory/src/app/features/move-inventory/move-inventory-wizard-page/modals/record-shortage .

Pour remplacer une fenêtre modale fournie par l'application, vous devez connaître le modalId de la fenêtre modale. modalId est utilisé pour identifier de manière unique le modal fourni par l'application. Par conséquent, il est utilisé par la commande override-modal qui vous permet de personnaliser le modal.

modalId est défini en tant que variable dans la classe de composant modal fournie par l'application, comme illustré dans l'exemple suivant:

export class OrderTotalModalComponent implements OnInit {
  public static modalId = 'orders.order-total-modal';
  ...
  ...

Lorsque vous remplacez une fenêtre modale fournie par l'application, l'intégralité du répertoire du composant modal est copiée dans le répertoire <store-temp>/extensions/features/override-modals . Vous pouvez modifier le composant modal qui est copié selon les besoins de votre entreprise.

Remarque: Lorsque vous souhaitez modifier uniquement le code modal, ne copiez pas l'écran parent ou le code de composant.

Pour mapper le modal fourni par l'application avec le modal personnalisé ou de substitution, utilisez le fichier de configuration <store-temp>/extensions/features/override-modals/src/assets/override-modals/config/isf-modal-config.json . Vous pouvez facilement déterminer le modal fourni par l'application qui est remplacé et le composant modal personnalisé qui est utilisé pour le remplacement.

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

Tableau 1. Attributs et descriptions de la définition du schéma
Nom d'attribut	Descriptif
applicationProvidedModalId	Identifiant unique attribué aux modalités fournies par l'application et dont la convention d'appellation est`<feature-name>.<parent-page-name>.<modal-name>`. Par exemple, `orders.order-summary-page.cancel-order-modal`.
overrideModalId	Identificateur unique affecté aux fenêtres modales remplacées ou personnalisées pour lesquelles la convention de dénomination est `custom-<applicationProvidedModalId>`. Par exemple,`custom-orders.order-summary-page.cancel-order-modal`.

Procédure

Accédez au répertoire <store-temp> et exécutez la commande suivante:
```
yarn override-modal --application-provided-modal-id=<component-modal-id>
```
Exemple :
```
yarn override-modal --application-provided-modal-id=functional-components.identify-customer-modal
```
Ici, --application-provided-modal-id fait référence à l'ID modal du composant modal fourni par l'application que vous souhaitez modifier.

Vous pouvez identifier le modalId de la fenêtre modale fournie par l'application en faisant référence au code source du composant modal que vous souhaitez personnaliser.
La commande effectue les tâches suivantes:
- Copie le dossier de composant modal fourni par l'application dans <store-temp>/extensions/features/override-modals/src/app/<feature-name>.
  Pour organiser les modals appartenant à la même application dans un seul dossier, il est recommandé de créer un dossier <feature-name> dans le répertoire <store-temp>/extensions/features/override-modals/src/app .
- Importe automatiquement le composant et crée une entrée du composant dans l'objet customModalsDeclarations dans le fichier app.module.ts qui se trouve dans le dossier <store-temp>/extensions/features/override_modals/src/app .
- Pour éviter les conflits de noms modaux avec le modalIdsfourni par l'application, la commande met à jour le modalId du composant modal personnalisé en ajoutant le préfixe custom- au modalId existant, comme indiqué dans le fragment de code.
- Pour mapper le fichier modalId fourni par l'application avec le fichier modalIdpersonnalisé ou de substitution, met à jour le fichier isf-modal-config.json qui se trouve dans le dossier <store-temp>/extensions/features/override-modals/src/assets/override-modals/config/ .
  Le fragment de code suivant illustre l'exemple d'entrée dans isf-modal-config.json:
  [ { "applicationProvidedModalId": "orders.order-summary-page.cancel-order-modal", "overrideModalId": "custom-orders.order-summary-page.cancel-order-modal" }]
  Remarque: La commande de l'interface de ligne de commande copie uniquement les fichiers présents dans le dossier du composant. Si le composant étendu importe des fichiers en dehors du dossier de composant, veillez à copier manuellement ces fichiers à l'emplacement approprié dans le nouveau dossier de composant modal. Veillez également à importer et à déclarer dans le fichier app.module.ts qui se trouve dans le dossier <store-temp>/extensions/features/override_modals/src/app .
Dans le composant modal personnalisé, vous pouvez trouver un _activeModal: NgbActiveModal privé dans le constructeur. Remplacez le service NgbActiveModal par StoreWrapperModalServiceet veillez à importer StoreWrapperModalService depuis '@store/core'. Cette modification est nécessaire pour transmettre les données modales de l'application override-modal à l'application prête à l'emploi.

Remarque: Si le modal fourni par l'application envoie des données à l'écran parent, le modal personnalisé doit également envoyer des données à l'écran parent. Veillez à conserver le schéma de modèle de données d'origine sans modifier le type ni supprimer les attributs de l'objet de données.
Pour prendre en charge la localisation et l'internationalisation, les dossiers i18n sont présents dans le dossier <store-temp>/extensions/features/override-modals/src/assets/override-modals/i18n/ . Vous pouvez créer des fichiers JSON de bundle spécifiques à la langue et ajouter le fichier JSON spécifique à la langue des entrées de bundle personnalisées. Par exemple, pour l'environnement local anglais, créez en.json et ajoutez le fichier JSON spécifique à la langue des entrées de bundle personnalisées.
Pour réutiliser les entrées de bundle fournies par l'application qui sont requises pour la fenêtre modale remplacée, configurez le chemin du module de fonction correspondant, comme illustré dans l'exemple de fragment de code.

Par exemple, si vous remplacez la fonction d'affectation de tâche modale de la fonction de comptage de cycle, ajoutez le comptage de cycle à la grappe de bundles dans <store-temp>/extensions/features/override_modals/src/app/app.module.ts.
```
static bundles: Array<any> = [
   {
     prefix: './assets/cycle-count/i18n/',
     suffix: '.json'
   },
   {
     prefix: './assets/override-modals/i18n/',
     suffix: '.json'
   }
 ].concat(CommonBundlesModule.bundles);
};
```
Remarque: dans le tableau des bundles, ajoutez './assets/override-modals/i18n/' à la fin.

Etape suivante

Pour vérifier en local l'écran fourni par l'application étendue, démarrez l'application en exécutant la commande suivante et accédez à l'écran dans lequel s'affiche la fenêtre modale.
```
yarn start-app
```
Pour vérifier les modifications dans le kit d'outils de développement, extrayez et déployez les personnalisations. Pour plus d'informations sur l'extraction et le déploiement des personnalisations, voir Extraction des personnalisations.