Von der Anwendung bereitgestellte Assistentenanzeigen ändern

• Geben Sie die Anzeige und die entsprechende Single-Spa-Anwendung an, die Sie anpassen wollen.
• Geben Sie die Einträge in feature-import-map.json und feature-routes.json für die ausgewählte Single-Spa-Anwendung an.

1. Melden Sie sich bei Sterling Store Engagement im Browser Google Chrome an und öffnen Sie die Entwicklerwerkzeuge.
2. Rufen Sie die Anzeige Versandübersicht auf.
3. Bestimmen Sie unter „Entwicklertools“ > Registerkarte „Netzwerk“ die folgenden URLs:
   • URL des Bundles main.js ", <http://hostname:port/isf/store-frontend/shell/shipment/summary/<shipmentKey>>
   • URL der Versandzusammenfassungsroute, <http://hostname:port/isf/store-frontend/shell/shipment/summary/<shipmentKey>>
   Dabei gilt:

   • isf/store-frontend bezieht sich auf den Anwendungspfad.
   • shipment bezieht sich auf die winkelförmige Single-Spa-Anwendung.
   • summary/<shipmentKey> bezieht sich auf den Winkelverlegungsweg.

     In diesem Fall ist es die Anwendung shipment-list-summary angular, die die Winkelroute summary/<shipmentKey>enthält, und die entsprechende Routenkomponente ist ShipmentSummaryPageComponent. Der Quellcode für die Anwendung "Versandlistenzusammenfassung" ist im Verzeichnis <store-temp>/packages/features/shipment-list-summary vorhanden. Erweitern Sie die shipment-list-summary -Anwendung, um die Anzeige Versandübersicht anzupassen.

• feature-import-map.json -Die UMD-Modulbundles für die einzelnen Single-Spa-Anwendungen werden in feature-import-map.json konfiguriert, das in <store-temp>/packages/apps/store-root-app/src/assets/root-config/config/feature-import-map.jsonvorhanden ist. Verwenden Sie den Namen der "shipment-list-summary" -Anwendung, um den Eintrag in feature-import-map.jsonzu identifizieren. Bestimmen Sie anschließend den Eintrag für "shipment-list-summary" in feature-import-map.json. Beispiel: "shipment-list-summary": "//localhost:4227/isf/store-frontend/shipment-list-summary/main.js",
• feature-routes.json - Routes in Sterling Store Engagement wird als Teil von feature-routes.json konfiguriert, das in <store-temp>/packages/apps/store-root-app/src/assets/root-config/config/feature-routes.json vorhanden ist. Geben Sie die Routendefinitionen für die shipment-list-summary -Anwendung an, indem Sie in feature-routes.jsonnach "name": "shipment-list-summary" suchen.
  Die folgende Liste von Routen gilt für die "shipment-list-summary" -Anwendung:

  {
  "type": "route",
  "path": "shell/shipment",
  "routes": [
  {
  "type": "application",
  "name": "shipment-list-summary"
  }
  ]
  },
  {
  "type": "route",
  "path": "shell/shipment/list",
  "routes": [
  {
  "type": "application",
  "name": "shipment-list-summary"
  }
  ]
  },
  {
  "type": "route",
  "path": "shell/shipment/summary/:shipmentKey",
  "routes": [
  {
  "type": "application",
  "name": "shipment-list-summary"
  }
  ]
  }

  Um die Routendefinition für den Bildschirm " Versandübersicht " zu ermitteln, betrachten Sie " http://hostname:port/isf/store-frontend/shell/shipment/summary/<shipmentKey> URL " für den Bildschirm " Versandübersicht ".

  Die relative URL für die Zusammenfassung der Versandroute lautet shell/shipment/summary/<shipmentKey>. Suchen Sie den passenden Eintrag aus liste für den Verwandten URL, indem Sie ihn mit dem Pfadattribut vergleichen.

  Das folgende Code-Snippet veranschaulicht feature-routes.json:

  {
  "type": "route",
  "path": "shell/shipment/summary/:shipmentKey",
  "routes": [
  {
  "type": "application",
  "name": "shipment-list-summary"
  }
  ]
  }

1. Wechseln Sie in das Verzeichnis <store-temp> und führen Sie den folgenden Befehl aus:

   yarn override-route --module-name=<module-name> --override-module-name=<override-module-name> --override-component-folder-name=<component-name-path> --port=<port>

   Beispiel:

   yarn override-route --module-name=custom-orders --override-module-name=orders --override-component-folder-name=order-capture-wizard-page/add-product-page --port=5100

   Dabei gilt:

   • --module-name steht für den Namen des Erweiterungsmoduls, das erstellt wird.
     Hinweis: Stellen Sie sicher, dass jedes Wort im Attributwert < modulname> durch einen Bindestrich (-) getrennt ist. Wenn der Modulname beispielsweise custom move inventorylautet, geben Sie custom-move-inventoryan.
   • --override-module-name bezieht sich auf den Namen des Moduls, das die von der Anwendung bereitgestellte Anzeige enthält. Beispiel: move-inventory.
   • --override-component-folder-name steht für den Ordnernamen der von der Anwendung bereitgestellten Anzeige, die Sie überschreiben möchten.
     Hinweis Wenn Sie die von der Anwendung bereitgestellte Assistentenanzeige erweitern, schließen Sie den Namen des übergeordneten Assistentenordners zusammen mit dem Namen der untergeordneten Route oder des Komponentenordners ein.

     Im Ablauf des Assistenten Ad-hoc-Bestand verschieben können Sie beispielsweise die Anzeige AdhocDepositProductsPageComponent anpassen. Setzen Sie anschließend den Parameter override-component-folder-name auf adhoc-move-create-wizard-page/adhoc-depositproducts-page.

   • --port steht für die Nummer des Ports, an dem die neue Anwendung ausgeführt wird.
   Der Befehl führt die folgenden Tasks aus:

   • Erzeugt eine neue Winkelanwendung im Ordner <store-temp>/extensions/features . Sie finden den Quellcode im Ordner <storetemp>/extensions/features/<module-name> .
   • Installiert das single-spa-angular -Knotenmodul in der erstellten Winkelanwendung.
   • Generiert eine main.single-spa.ts in Ihrem src -Projektordner.
   • Generiert ein Lazy-Lademodul mit <module-name> in Ihrem <store-temp>/extensions/features/<module-name>/src/app -Projektordner.
   • Aktualisiert die Routing-Moduldatei <store-temp>/extensions/features/<module-name>/src/app-routing.module.ts mit den folgenden Routendefinitionen:
     • Verzögert geladenes Modul mit der entsprechenden Routenpfaddefinition.
     • EmptyRouteComponent für nicht übereinstimmende Routen.
   • Aktualisiert package.json mit den Start-und Build-Scripts der Anwendung.
   • Registriert die neue Anwendung in <store-temp>/extensions/override-static-assets/root-config/custom/import-map.json. Die Datei import-map.json registriert das JavaScript -Modul, um eine bestimmte Anwendung zu laden.
   • Zur Unterstützung der Lokalisierung und Internationalisierung werden die Ordner i18n im Projektordner <store-temp>/extensions/features/<module-name>/src/assets generiert, um die sprachspezifischen Bundles zu verwalten. Eine leere JSON-Bundledatei en.json wird im Projektordner <store-temp>/extensions/features/<module-name>/src/assets/<module-name>/i18n generiert. Der Code wird auch aktualisiert, um TranslateModule so einzurichten, dass die entsprechenden JSON-Dateien des Übersetzungspakets geladen werden.
   • Kopiert den gesamten im Parameter --override-component-folder-name angegebenen Komponentenordner in den Ordner <store-temp>/extensions/features/<module-name>/src/app/features/<module-name> . Dieser Ordner enthält alle Dateien, die zum Überschreiben der von der Anwendung bereitgestellten Anzeige erforderlich sind.
   • Der CLI-Befehl importiert automatisch die abhängigen Winkelservices und Komponenten in die ts-Datei des Erweiterungsanwendungsmoduls <store-temp>/extensions/features/<module-name>/src/app/features/<module-name>/<module-name>.module.ts .
     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 in der neuen Erweiterungsanwendung kopieren. Stellen Sie außerdem sicher, dass Sie in der Erweiterungsmoduldatei <store-temp>/extensions/features/<module-name>/src/app/features/<module-name>/<module-name>.module.ts importieren und deklarieren.
2. Initialisieren Sie den Assistenten in der Methode ngOnInit der angepassten Komponente. Dadurch wird sichergestellt, dass die angepasste Assistentenkomponente in der neuen Winkelanwendung denselben Assistentenstatus wie der von der Anwendung bereitgestellte Assistent verwendet.

   ngOnInit() {
   this._wizardService.initialiseWizardForCustomRoute();
   ......
   }

3. Aktualisieren Sie die Routendefinition der überschriebenen Route in der Datei (<store-temp>/extensions/features/<module-name>/src/app/features/<module-name>/<module-name>-routing.module.ts) des Routingmoduls TypeScript. Enthält standardmäßig eine Route für die übergeordnete Assistenten-Komponente und untergeordnete Routen. Da die Erweiterung der übergeordneten Assistentenroute jedoch eingeschränkt ist, fügen Sie eine Routendefinition der überschriebenen Route in das Lazy-Load-Routing-Modul ein. Fügen Sie in der Routendefinition die übergeordnete Route an den Anfang der untergeordneten Route an.

   Wenn Sie zum Beispiel add-product-page von order-capture-wizard-page erweitern, lautet die Routendefinition:

   const routes: Routes = [
     {
       path: 'order-capture/add-product/:productId', // 'order-capture' is the parent route path and 'add-product/:productId' is the extended child route
       component: AddProductPageComponent
     }
   ];

4. Aktualisieren Sie die angepasste Datei routes.json, die sich im Ordner <store-temp>/extensions/override-static-assets/root-config/custom/ befindet, mit dem folgenden Eintrag:

   {
   "routes": [{
   "type": "route",
   "path": "shell/move-inventory/adhoc-request/:requestKey/depositproducts",
   "routes": [
   {
   "type": "application",
   "name": "custom-move"
   }
   ]
   }]
   }

   Dieser Eintrag ordnet die von der Anwendung bereitgestellte Route der neuen angepassten Anwendung zu und stellt außerdem sicher, dass die Route aus der neuen angepassten Anwendung geladen wird.

this.requestKey = this.route.parent.snapshot.params.requestKey; // This does not work. Remove parent
this.requestKey = this.route.snapshot.params.requestKey; // This works

• Wenn auf das Assistentendatenmodell, das in der von der Anwendung bereitgestellten Assistentenanzeige festgelegt ist, in der angepassten Assistentenanzeige zugegriffen werden muss.
• Wenn die Anzeigen des angepassten Assistenten Daten gemeinsam nutzen müssen.

this._wizardService.wizardDataModel.orderHeaderKey = ‘123456‘
this._wizardService.wizardDataModel.addedSerials = [‘123‘,’2345’]
this.orderHeaderKey = this._wizardService.wizardDataModel.orderHeaderKey;

• Um die von der erweiterten Anwendung bereitgestellte Assistentenanzeige lokal zu überprüfen, starten Sie die Anwendung, indem Sie den folgenden Befehl ausführen, und navigieren Sie zu der Anzeige, in der die Assistentenkomponente überschrieben wird.

  yarn start-app

• Um Änderungen im Entwicklertoolkit des Containers zu überprüfen, extrahieren und implementieren Sie Anpassungen. Weitere Informationen zum Extrahieren und Bereitstellen von Anpassungen finden Sie unter Extrahieren von Anpassungen.