アプリケーション提供のページ・コンポーネントの変更

Sterling Store Engagement アプリケーションを使用することで、ページコンポーネントやその子コンポーネントをビジネス要件に応じて変更することができます。

コンポーネントは、Angular アプリケーションの最も基本的なユーザー・インターフェース・ビルディング・ブロックです。 Angular アプリケーションには、Angular コンポーネントのツリーが含まれています。ページ・コンポーネントは、ルーティング・モジュールで経路を定義するために使用される経路レベルの角度コンポーネントです。これらのコンポーネントには、クラス内に PageComponent 接尾部があります。

以下は、 PickOrderListPageComponent がページ・コンポーネントである経路定義の例です。

{
    path: 'pick-order-list',
    component: PickOrderListPageComponent
  }

Sterling Store Engagement では、ページまたはルートレベルのカスタマイズをサポートしています。アプリケーション提供のページ・コンポーネントをコピーし、ビジネス要件に応じてカスタマイズすることができます。アプリケーション提供のページ・コンポーネントをカスタマイズするには、以下のステップを実行します。

カスタマイズする必要がある画面を識別します。
フィーチャー・モジュールのルーティング・モジュール定義を参照する画面経路を識別します。
経路に対応するコンポーネントは、カスタマイズするページ・コンポーネントになります。

ページ・コンポーネントのカスタマイズ

ビジネス要件に応じてページ・コンポーネントをカスタマイズできます。例えば、ページコンポーネント pick-order-list をカスタマイズする場合、 PickOrderListPageComponent で表示される画面タイトルを、angular ルートで使用されている <WORKSPACE>/store-frontend/src/app/features/backroom-pick から変更します、 http://localhost:4500/store/backroom-pick/pick-order-list で使用されています。

以下の経路定義により、 PickOrderListPageComponent が pick-order-list 経路に属しており、経路 pick-order-list の対応するページ・コンポーネントが BackroomPickRoutingModule であることを識別できます。これは、同じ PickOrderListPageComponent フォルダーの場所にあります。
```
  {
    path: 'pick-order-list',
    component: PickOrderListPageComponent
  }
```
PickOrderListPageComponent フォルダーを <WORKSPACE>/store-frontend/src/app/features/backroom-pick/pick-order-list-page から <WORKSPACE>/store-frontend/store-extensions-src/app/features/backroom-pick/pick-order-list-pageにコピーします。 SCREEN_EXTENSIONS_HOMEの下に適切なフォルダー構造 features/backroom-pick/pick-order-list-page を作成できます (まだ存在しない場合)。
注: ルートに複数の角度の子コンポーネントが含まれている場合は、それらもコピーする必要があります。例えば、 PickOrderListPageComponent に PickUpOrderComponent、 ShipOrderComponent、および WalkInOrderComponent などの子コンポーネントが含まれている場合、これらのすべてのコンポーネントも SCREEN_EXTENSIONS_HOME にコピーする必要があります。これは、変更を PickOrderListPageComponent ファイルでのみ行う必要があると考えている場合にも当てはまります。
適切なルート・フォルダーをコピーした後、必要に応じてページ・コンポーネントをカスタマイズできます。

ページ・コンポーネントの子コンポーネント部分のカスタマイズ

ページ・コンポーネントの子コンポーネント部分をカスタマイズできます。たとえば、angularルートで使用されている <WORKSPACE>/store-frontend/src/app/features/backroom-pick から PickUpOrderComponent をカスタマイズしたい場合、次の手順を実行します。 http://localhost:4500/store/backroom-pick/pick-order-list で使われている。

PickUpOrderComponent が pick-order-list 経路に属しており、 pick-order-list 経路の対応するページ・コンポーネントが、以下の経路定義に基づいて、同じフォルダー・ロケーション ( PickOrderListPageComponent ) にある BackroomPickRoutingModule から識別できます。
```
{
    path: 'pick-order-list',
    component: PickOrderListPageComponent
  }
```
PickOrderListPageComponent フォルダーを <WORKSPACE>/store-frontend/src/app/features/backroom-pick/pick-order-list-page から <WORKSPACE>/store-frontend/store-extensions-src/app/features/backroom-pick/pick-order-list-pageにコピーします。 SCREEN_EXTENSIONS_HOMEの下に適切なフォルダー構造features/backroom-pick/pick-order-list-page を作成できます (まだ存在しない場合)。
注: ルートに複数の角度の子コンポーネントが含まれている場合は、それらもコピーする必要があります。例えば、 PickOrderListPageComponent に PickUpOrderComponent、 ShipOrderComponent、および WalkInOrderComponent などの子コンポーネントが含まれている場合、これらのすべてのコンポーネントも SCREEN_EXTENSIONS_HOME にコピーする必要があります。これは、変更を PickOrderListPageComponent ファイルでのみ行う必要があると考えている場合にも当てはまります。
適切なルート・フォルダーをコピーした後、必要に応じてページ・コンポーネントをカスタマイズできます。

重要: SCREEN_EXTENSIONS_HOME/features/backroom-pick/pick-order-list-pageでフォルダーとその内容をコピーすると、HTML、SCSS、TS & 関連のデータ・サービス・ファイルを含む完全な pick-order-list-page コンポーネントを所有することになります。これにより、シームレスなアップグレードが保証されます。

ウィザードのガイドライン

ウィザードは、アプリケーションに表示できる画面の構造化されたシーケンスです。ウィザードは、タスクを完了するために複数の画面が必要なフローを作成するために使用します。例えば、 Move inventory 実行フローはウィザードとして実装され、 MoveInventoryRoutingModule 内の経路定義は <WORKSPACE>/store-frontend/src/app/features/move-inventory/ にあります。

在庫移動モジュールのルート定義を以下に示します。

const routes: Routes = [
  {
    path: 'requests-list',
    component: MoveRequestsListPageComponent,
  },


  {
    path: 'summary/:requestKey',
    component: MoveSummaryPageComponent
  },


  {
    path: ':requestKey',
    component: MoveInventoryWizardPageComponent,
    canDeactivate: [BackHandlingGuardService],
    children: [
      {
        path: 'deposit-products',
        component: DepositProductsPageComponent
      },
      {
        path: 'pick-complete',
        component: PickCompletePageComponent
      },
      {
        path: 'pick-products',
        component: PickProductsPageComponent
      }
               ]
  }
]

MoveInventoryWizardPageComponent は、 pick-products、 pick-complete、および deposit-productsなどの子経路を持つ親経路であるウィザード・コンポーネントです。 Deposit 画面を変更する必要がある場合は、親経路 path: ':requestKey' の子経路 deposit-products を考慮する必要があります。

{
        path: 'deposit-products',
        component: DepositProductsPageComponent
}

DepositProductsPageComponent の内容全体を SCREEN_EXTENSIONS_HOME/features/move-inventory/move-inventory-wizard-page/deposit-products-page. にコピーする必要があります。

ヒント:

新規画面を追加したり、ウィザードから既存の子経路を削除したりする場合は、完全なウィザード・コンポーネント、つまり親ウィザード経路を所有します。
画面をオーバーライドする場合は、子経路コンポーネントのみを所有します。 URLを変更する場合を除き、経路定義を変更する必要はありません。