アプリケーション提供のウィザード画面の変更

オンラインで編集
ウィザードは、アプリケーションに表示できる画面の構造化されたシーケンスです。 ウィザードは、タスクを完了するために複数の画面が必要なフローを作成するために使用します。 Sterling Store Engagement アプリケーションのウィザードの例には、バッチピック、在庫移動、入出庫、オーダー作成などがあります。

Sterling Store Engagement のウィザードフローは、アンギュラーの子ルートとしてモデル化されます。 親経路には、ウィザード・フローを検証および初期化するためのロジックと、フロー内の特定の画面または子経路へのナビゲーションが含まれています。 それぞれの子経路は、ウィザード・フロー内の 1 つのステップを表します。 開発者は、ビジネスの必要に応じて、アプリケーション提供のウィザード・フローの子経路をカスタマイズできます。

注: ウィザードの親経路をカスタマイズすることはできません。
以下のルート定義は、「在庫の移動 (Adhoc Move Inventory)」ウィザード・フローのルート定義を表しています。
  • AdhocMoveCreateWizardPageComponent -ウィザードの親経路コンポーネントに依存します。これはカスタマイズできません。
  • AdhocDepositProductsPageComponent および AdhocPickProductsPageComponent -カスタマイズ可能な、ウィザードの子経路コンポーネントを依存させます。
{
path: 'adhoc-request/:requestKey',
component: AdhocMoveCreateWizardPageComponent,
canDeactivate: [BackClickHandlerGuard],
children: [
{
path: 'deposit-products',
component: AdhocDepositProductsPageComponent
},
{
path: 'pick-products',
component: AdhocPickProductsPageComponent
}
]
}

始める前に

アプリケーション提供の画面ウィザードの子経路コンポーネントをカスタマイズするには、以下の前提条件を実行します。

画面および対応する単一スパ・アプリケーションの識別

任意の画面をカスタマイズするには、カスタマイズ対象の画面に対応する角コンポーネントの経路と、対応する単一の角アプリケーションを識別します。

例えば、 「出荷サマリー」 画面をカスタマイズする場合は、以下のステップを実行して、オーバーライドする角度コンポーネントを識別します。
  1. Google Chrome ブラウザで Sterling Store Engagement にログインし、開発者ツールを開く。
  2. 「出荷サマリー」 画面に移動します。
  3. 開発者ツール > ネットワークタブで以下のURLを確認してください：
    • main.js URL、 <http://hostname:port/isf/store-frontend/shell/shipment/summary/<shipmentKey>>
    • 出荷明細URL、 <http://hostname:port/isf/store-frontend/shell/shipment/summary/<shipmentKey>>
    ここで、
    • isf/store-frontend はアプリケーション・パスを参照します。
    • shipment は、シングル・スパ・角アプリケーションを指します。
    • summary/<shipmentKey> は、角経路を参照します。

      この場合、これは shipment-list-summary 角度アプリケーションであり、これには角度経路 summary/<shipmentKey>が含まれ、対応する経路コンポーネントは ShipmentSummaryPageComponentです。 出荷リスト・サマリー・アプリケーションのソース・コードは、 <store-temp>/packages/features/shipment-list-summary ディレクトリーにあります。 「出荷サマリー」 画面をカスタマイズするには、 shipment-list-summary アプリケーションを拡張します。

同じプロセスを採用して、角度コンポーネントの経路、コンポーネント・コードを含むソース・フォルダー、および対応する単一スパーの角アプリケーションを識別し、アプリケーション提供の画面をオーバーライドすることができます。

選択した単一スパ・アプリケーションの feature-import-map.json および feature-routes.json 内の項目を識別します。

  • feature-import-map.json -各 single-spa アプリケーションの UMD モジュール・バンドルは、 <store-temp>/packages/apps/store-root-app/src/assets/root-config/config/feature-import-map.jsonにある feature-import-map.json で構成されます。 feature-import-map.json内の項目を識別するには、 "shipment-list-summary" アプリケーション名を使用します。 次に、 feature-import-map.json内の "shipment-list-summary" の項目を判別します。 例: "shipment-list-summary": "//localhost:4227/isf/store-frontend/shipment-list-summary/main.js",
  • feature-routes.json - Sterling Store Engagement のルートは、 <store-temp>/packages/apps/store-root-app/src/assets/root-config/config/feature-routes.json に存在する feature-routes.json の一部として設定される。 feature-routes.jsonで "name": "shipment-list-summary" を検索して、 shipment-list-summary アプリケーションの経路定義を識別します。
    以下の経路のリストは、 "shipment-list-summary" アプリケーションに適用されます。
    {
"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"
}
]
}

    出荷明細 画面のルート定義を特定するには、 http://hostname:port/isf/store-frontend/shell/shipment/summary/<shipmentKey> URL 画面の 出荷明細 を考慮します。

    出荷の概要ルートへのURL は、 shell/shipment/summary/<shipmentKey> です。 パス属性と比較して、 URL のリストから一致するエントリを見つけます。

    以下のコード・スニペットは、 feature-routes.jsonを示しています。

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

手順

オーバーライドする画面および対応する角度アプリケーションを識別したら、以下のステップを実行して、アプリケーション提供のウィザード画面をカスタマイズします。
  1. <store-temp> ディレクトリーに移動して、以下のコマンドを実行します。
    yarn override-route --module-name=<module-name> --override-module-name=<override-module-name> --override-component-folder-name=<component-name-path> --port=<port>
    例:
    yarn override-route --module-name=custom-orders --override-module-name=orders --override-component-folder-name=order-capture-wizard-page/add-product-page --port=5100
    ここで、
    • --module-name は、作成する必要がある拡張モジュールの名前を示します。
      注: < module-name> 属性値の各単語がハイフン (-) で区切られていることを確認してください。 例えば、モジュール名が custom move inventoryの場合、値を custom-move-inventoryと指定します。
    • --override-module-name は、アプリケーション提供の画面を含むモジュールの名前を表します。 例えば、 move-inventoryのようになります。
    • --override-component-folder-name は、オーバーライドするアプリケーション提供の画面のフォルダー名を参照します。
      注: アプリケーション提供のウィザード画面を拡張する場合は、親ウィザードのフォルダー名を子経路またはコンポーネント・フォルダー名とともに含めてください。

      例えば、 「在庫のアドホック移動」 ウィザードのフローで、 AdhocDepositProductsPageComponent 画面をカスタマイズしたいとします。 次に、 override-component-folder-name パラメーターの値を adhoc-move-create-wizard-page/adhoc-depositproducts-pageに設定します。

    • --port は、新規アプリケーションが実行されるポート番号を示します。
    このコマンドは、以下のタスクを実行します。
    • <store-temp>/extensions/features フォルダーに新しい角度アプリケーションを作成します。 ソース・コードは <storetemp>/extensions/features/<module-name> フォルダーにあります。
    • 作成された角度アプリケーションに single-spa-angular ノード・モジュールをインストールします。
    • src プロジェクト・フォルダーに main.single-spa.ts を生成します。
    • <store-temp>/extensions/features/<module-name>/src/app プロジェクト・フォルダー内に、 <module-name> を持つ遅延ロード・モジュールを生成します。
    • 以下の経路定義で <store-temp>/extensions/features/<module-name>/src/app-routing.module.ts ルーティング・モジュール・ファイルを更新します。
      • 適切な経路パス定義を持つ遅延ロード・モジュール。
      • 一致しない経路の場合は EmptyRouteComponent 。
    • アプリケーションの開始スクリプトとビルド・スクリプトで package.json を更新します。
    • 新規アプリケーションを <store-temp>/extensions/override-static-assets/root-config/custom/import-map.jsonに登録します。 import-map.json ファイルは、特定のアプリケーションをロードするために JavaScript モジュールを登録します。
    • ローカライズおよび国際化対応をサポートするために、言語固有のバンドルを保守するために、 <store-temp>/extensions/features/<module-name>/src/assets プロジェクト・フォルダーに i18n フォルダーが生成されます。 空の en.json バンドル JSON ファイルが <store-temp>/extensions/features/<module-name>/src/assets/<module-name>/i18n プロジェクト・フォルダーに生成されます。 このコードは、適切な変換バンドル JSON ファイルをロードするように TranslateModule をセットアップするためにも更新されます。
    • --override-component-folder-name パラメーターで指定されたコンポーネント・フォルダー全体を <store-temp>/extensions/features/<module-name>/src/app/features/<module-name> フォルダーにコピーします。 このフォルダーには、アプリケーション提供の画面をオーバーライドするために必要なすべてのファイルが含まれています。
    • CLI コマンドは、依存する角度サービスおよびコンポーネントを拡張アプリケーション・モジュールの ts ファイル <store-temp>/extensions/features/<module-name>/src/app/features/<module-name>/<module-name>.module.ts に自動的にインポートします。
      注: CLI コマンドは、コンポーネント・フォルダーに存在するファイルのみをコピーします。 拡張コンポーネントがコンポーネント・フォルダーの外部にあるファイルをインポートする場合は、そのようなファイルを新しい拡張アプリケーション内の適切な場所に手動でコピーするようにしてください。 また、必ず <store-temp>/extensions/features/<module-name>/src/app/features/<module-name>/<module-name>.module.ts 拡張モジュール・ファイルにインポートして宣言してください。
  2. カスタム・コンポーネントの ngOnInit メソッドでウィザードを初期化します。 これにより、新しい角度アプリケーションのカスタム・ウィザード・コンポーネントが、アプリケーション提供のウィザードと同じウィザード状態を共有するようになります。
    ngOnInit() {
this._wizardService.initialiseWizardForCustomRoute();
......
}
  3. オーバーライドされたルートのルート定義を、遅延ロードされたルーティングモジュール TypeScript ファイル (<store-temp>/extensions/features/<module-name>/src/app/features/<module-name>/<module-name>-routing.module.ts) で更新する。 すぐに、親ウィザード・コンポーネントのルートと子ルートがあります。 しかし、親ウィザードルートの拡張は制限されているので、オーバーライドされたルートのルート定義を遅延ロードされたルーティングモジュールに追加します。 ルート定義で、子ルートの先頭に親ルートを追加します。

    例えば、order-capture-wizard-pageからadd-product-pageを拡張した場合、ルート定義は次のようになります：

    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. <store-temp>/extensions/override-static-assets/root-config/custom/ フォルダーにあるカスタム routes.jsonを、以下の項目で更新します。
    {
"routes": [{
"type": "route",
"path": "shell/move-inventory/adhoc-request/:requestKey/depositproducts",
"routes": [
{
"type": "application",
"name": "custom-move"
}
]
}]
}

    このエントリーは、アプリケーション提供の経路を新規カスタム・アプリケーションにマップし、その経路が新規カスタム・アプリケーションから確実にロードされるようにします。

ガイドライン

新しいカスタム・ウィザード画面コンポーネントに渡される照会パラメーターまたは経路パラメーターにアクセスするには、経路パラメーターの読み取りに使用される activatedRouteSnapshot から親参照を削除します。
this.requestKey = this.route.parent.snapshot.params.requestKey; // This does not work. Remove parent
this.requestKey = this.route.snapshot.params.requestKey; // This works
ウィザード・データ・モデルは、以下のように、シナリオのウィザード画面間でデータを共有する方法を提供します。
  • アプリケーション提供のウィザード画面で設定されているウィザード・データ・モデルに、カスタム・ウィザード画面でアクセスする必要がある場合。
  • カスタム・ウィザード画面間でデータを共有する必要がある場合。
このような場合、次のような擬似コードを使ってデータの共有とアクセスを行うことができる：
this._wizardService.wizardDataModel.orderHeaderKey = ‘123456‘
this._wizardService.wizardDataModel.addedSerials = [‘123‘,’2345’]
this.orderHeaderKey = this._wizardService.wizardDataModel.orderHeaderKey;

次のタスク

  • 拡張アプリケーション提供のウィザード画面をローカルで検証するには、以下のコマンドを実行してアプリケーションを開始し、ウィザード・コンポーネントがオーバーライドされている画面にナビゲートします。
    yarn start-app
  • コンテナーのデベロッパーズ・ツールキットでの変更を確認するには、カスタマイズを抽出してデプロイします。 カスタマイズの抽出と展開に関する詳細については、 「カスタマイズの抽出」 を参照してください。