Von der Anwendung bereitgestellte Modalwerte ändern

Die Modaldialoge werden verwendet, um kritische Informationen darzustellen oder Benutzereingaben anzufordern, die zum Ausführen bestimmter Benutzeraktionen erforderlich sind. Zu den Benutzeraktionen gehören das Stornieren eines Auftrags, das Anzeigen von Seriennummern, das Hinzufügen oder Anzeigen von Hinweisen für einen Auftrag oder eine Auftragsposition usw.

Ein modales Dialogfeld ähnelt einem Popup-Fenster, das ein Dialogfeld öffnet, um einen Bildschirm über dem Hauptanwendungsinhalt anzuzeigen. Alle Modaldialoge werden in der übergeordneten Anzeige angezeigt. Wenn ein modales Dialogfeld geöffnet ist, können Benutzer nicht zur übergeordneten Anzeige zurückkehren. Außerdem wird jede Benutzeraktion ignoriert, bis die modale Task abgeschlossen oder das modale Dialogfeld geschlossen ist.

Sie können die von der Anwendung bereitgestellten Modale nach Bedarf für Ihr Unternehmen anpassen.

Vorbemerkungen

Die von der Anwendung bereitgestellten Modale sind im Modalverzeichnis der entsprechenden Seitenkomponenten oder -anzeige vorhanden, wie in den folgenden Beispielen erläutert:

Die Modalkomponente "Auftrag stornieren" erscheint, wenn Sie in der Anzeige Auftragsübersicht auf die verwandte Task Auftrag stornieren klicken. Die Modalkomponente 'cancel order' befindet sich im Verzeichnis <store-temp>/packages/features/orders/src/app/features/orders/order-summary-page/modals/cancel-order-modal .
Die Modalkomponente "Unterdeckung erfassen" wird angezeigt, wenn Sie eine Produktmenge auf der Seite Entnahme des Umzugsbestandsflusses als Unterdeckung markieren wollen. Die Modalkomponente 'Unterdeckung erfassen' ist im Verzeichnis <store-temp>/packages/features/move-inventory/src/app/features/move-inventory/move-inventory-wizard-page/modals/record-shortage vorhanden.

Um einen von der Anwendung bereitgestellten Modaldialog zu überschreiben, müssen Sie die modalId des Modaldialogs kennen. modalId wird verwendet, um das von der Anwendung bereitgestellte Modal eindeutig zu identifizieren. Daher wird sie vom Befehl 'override-modal' verwendet, mit dem Sie das modale Dialogfeld anpassen können.

Die modalId ist wie im folgenden Beispiel als Variable in der von der Anwendung bereitgestellten Modalkomponente definiert:

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

Wenn Sie einen von der Anwendung bereitgestellten Modaldialog überschreiben, wird das gesamte modale Komponentenverzeichnis in das Verzeichnis <store-temp>/extensions/features/override-modals kopiert. Sie können die für Ihr Unternehmen kopierte Modalkomponente nach Bedarf ändern.

Hinweis Wenn Sie nur den Modalcode ändern möchten, kopieren Sie nicht die übergeordnete Anzeige oder den Komponentencode.

Verwenden Sie die Konfigurationsdatei <store-temp>/extensions/features/override-modals/src/assets/override-modals/config/isf-modal-config.json , um das von der Anwendung bereitgestellte Modal mit dem angepassten Modaldialog oder dem Überschreibmodaldialog zuzuordnen. Sie können das von der Anwendung bereitgestellte modale Dialogfeld, das überschrieben wird, und die angepasste modale Komponente, die zum Überschreiben verwendet wird, ohne großen Aufwand ermitteln.

In der folgenden Tabelle wird die Schemadefinition der Datei isf-modal-config.json beschrieben:

Tabelle 1. Attribute und Beschreibungen der Schemadefinition
Attributname	Beschreibung
applicationProvidedModalId	Ein eindeutiger Bezeichner, der den von der Anwendung bereitgestellten Modalen zugewiesen wird, für die die Namenskonvention`<feature-name>.<parent-page-name>.<modal-name>` gilt. Zum Beispiel `orders.order-summary-page.cancel-order-modal`.
overrideModalId	Eine eindeutige Kennung, die den überschriebenen oder angepassten Modalen zugeordnet wird, für die die Namenskonvention `custom-<applicationProvidedModalId>`gilt. Zum Beispiel`custom-orders.order-summary-page.cancel-order-modal`.

Vorgehensweise

Wechseln Sie in das Verzeichnis <store-temp> und führen Sie den folgenden Befehl aus:
```
yarn override-modal --application-provided-modal-id=<component-modal-id>
```
Beispiel:
```
yarn override-modal --application-provided-modal-id=functional-components.identify-customer-modal
```
Hier bezieht sich --application-provided-modal-id auf die Modal-ID der von der Anwendung bereitgestellten Modalkomponente, die Sie ändern möchten.

Sie können die modalId des von der Anwendung bereitgestellten Modaldialogs angeben, indem Sie den Quellcode der Modalkomponente referenzieren, die Sie anpassen wollen.
Der Befehl führt die folgenden Tasks aus:
- Kopiert den von der Anwendung bereitgestellten modalen Komponentenordner nach <store-temp>/extensions/features/override-modals/src/app/<feature-name>.
  Um die modals , die zu derselben Anwendung gehört, in einem einzigen Ordner zu organisieren, wird empfohlen, einen Ordner <feature-name> im Verzeichnis <store-temp>/extensions/features/override-modals/src/app zu erstellen.
- Importiert die Komponente automatisch und erstellt einen Eintrag der Komponente im Objekt customModalsDeclarations in der Datei app.module.ts , die sich im Ordner <store-temp>/extensions/features/override_modals/src/app befindet.
- Um Modalnamenskollisionen mit der von der Anwendung bereitgestellten modalIdszu vermeiden, aktualisiert der Befehl die modalId der angepassten Modalkomponente, indem er der vorhandenen modalId wie im Code-Snippet gezeigt das Präfix custom- voranstellt.
- Um die von der Anwendung bereitgestellte Datei modalId mit der angepassten Datei oder der Überschreibungsdatei modalIdzuzuordnen, aktualisieren Sie die Datei isf-modal-config.json , die sich im Ordner <store-temp>/extensions/features/override-modals/src/assets/override-modals/config/ befindet.
  Der folgende Codeausschnitt veranschaulicht den Beispieleintrag in isf-modal-config.json:
  [ { "applicationProvidedModalId": "orders.order-summary-page.cancel-order-modal", "overrideModalId": "custom-orders.order-summary-page.cancel-order-modal" }]
  Hinweis: Der CLI-Befehl kopiert nur die Dateien, die im Komponentenordner vorhanden sind. Wenn die erweiterte Komponente Dateien außerhalb des Komponentenordners importiert, stellen Sie sicher, dass Sie diese Dateien manuell an die entsprechende Position im neuen modalen Komponentenordner kopieren. Stellen Sie außerdem sicher, dass Sie die Datei app.module.ts , die sich im Ordner <store-temp>/extensions/features/override_modals/src/app befindet, importieren und deklarieren.
In der angepassten Modalkomponente finden Sie eine private _activeModal: NgbActiveModal im Konstruktor. Ersetzen Sie den Service NgbActiveModal durch StoreWrapperModalServiceund stellen Sie sicher, dass Sie StoreWrapperModalService aus '@store/core'importieren. Diese Änderung ist erforderlich, um die Modaldaten von der Anwendung 'override-modal' an die sofort einsatzfähige Anwendung zu übergeben.

Hinweis: Wenn das von der Anwendung bereitgestellte Modal Daten an die übergeordnete Anzeige sendet, muss das angepasste Modal auch Daten an die übergeordnete Anzeige senden. Stellen Sie sicher, dass Sie das ursprüngliche Datenmodellschema beibehalten, ohne den Typ zu ändern oder Attribute aus dem Datenobjekt zu entfernen.
Zur Unterstützung der Lokalisierung und Internationalisierung befinden sich die Ordner i18n im Ordner <store-temp>/extensions/features/override-modals/src/assets/override-modals/i18n/ . Sie können sprachspezifische JSON-Paketdateien erstellen und die sprachspezifische JSON-Datei für angepasste Paketeinträge hinzufügen. Erstellen Sie beispielsweise für die englische Ländereinstellung en.json und fügen Sie die sprachspezifische JSON-Datei für angepasste Paketeinträge hinzu.
Um die vorhandenen von der Anwendung bereitgestellten Paketeinträge wiederzuverwenden, die für das überschriebene modale Dialogfeld erforderlich sind, konfigurieren Sie den Pfad des entsprechenden Featuremoduls wie im Beispiel-Code-Snippet dargestellt.

Wenn Sie beispielsweise das Modaldialog 'Task zuordnen' für die Funktion für die zyklische Inventur überschreiben, fügen Sie die zyklische Inventur zum Bundle-Array in <store-temp>/extensions/features/override_modals/src/app/app.module.tshinzu.
```
static bundles: Array<any> = [
   {
     prefix: './assets/cycle-count/i18n/',
     suffix: '.json'
   },
   {
     prefix: './assets/override-modals/i18n/',
     suffix: '.json'
   }
 ].concat(CommonBundlesModule.bundles);
};
```
Hinweis: Fügen Sie im Bundle-Array './assets/override-modals/i18n/' am Ende hinzu.

Nächste Schritte

Um die von der erweiterten Anwendung bereitgestellte Anzeige lokal zu überprüfen, starten Sie die Anwendung, indem Sie den folgenden Befehl ausführen und zu der Anzeige navigieren, in der das modale Dialogfeld angezeigt wird.
```
yarn start-app
```
Extrahieren und implementieren Sie die Anpassungen, um die Änderungen im Developer Toolkit zu überprüfen. Weitere Informationen zum Extrahieren und Bereitstellen von Anpassungen finden Sie unter Extrahieren von Anpassungen.