修改应用程序提供的向导屏幕

在线编辑
向导是可显示在应用程序中的屏幕的结构化序列。 向导用于创建需要多个屏幕才能完成任务的流。 Sterling Store Engagement 应用程序中的一些向导示例包括批量拣选、移动库存、发货、创建订单等。

Sterling Store Engagement 中的向导流程建模为 Angular 子路由。 父路径包含用于验证和初始化向导流的逻辑，以及指向流中特定屏幕或子路径的导航。 每个子路由都表示向导流中的一个步骤。 作为开发者，您可以根据业务需要定制应用程序提供的向导流的子路径。

注: 您无法定制向导的父路径。
以下检修路线定义描述了 "特别搬迁库存" 向导流程的检修路线定义。
  • AdhocMoveCreateWizardPageComponent -指定向导的父路由组件，您无法对其进行定制。
  • AdhocDepositProductsPageComponent 和 AdhocPickProductsPageComponent -设计向导的子路由组件，您可以对其进行定制。
{
path: 'adhoc-request/:requestKey',
component: AdhocMoveCreateWizardPageComponent,
canDeactivate: [BackClickHandlerGuard],
children: [
{
path: 'deposit-products',
component: AdhocDepositProductsPageComponent
},
{
path: 'pick-products',
component: AdhocPickProductsPageComponent
}
]
}

开始之前

要定制应用程序提供的屏幕向导子路由组件，请完成以下先决条件:

标识屏幕和相应的单一 spa 应用程序

要定制任何屏幕，请识别与正在定制的屏幕相对应的角组件路径，以及相应的单温泉角应用程序。

例如，如果要定制 " 装运摘要 " 屏幕，请完成以下步骤以标识要覆盖的角度组件:
  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 是指 single-spa angular 应用程序。
    • summary/<shipmentKey> 指的是角路径。

      在本例中，它是 shipment-list-summary angular 应用程序，其中包含 angular route ， summary/<shipmentKey>，相应的 route 组件为 ShipmentSummaryPageComponent。 装运列表摘要应用程序的源代码存在于 <store-temp>/packages/features/shipment-list-summary 目录中。 要定制 " 装运摘要 " 屏幕，请扩展 shipment-list-summary 应用程序。

您可以采用相同的过程来识别包含组件代码的 angular 组件路径，源文件夹以及相应的 single-spa angular 应用程序，以覆盖应用程序提供的屏幕。

标识 feature-import-map.json 和 feature-routes.json 中所选单一 spa 应用程序的条目

  • feature-import-map.json -在 <store-temp>/packages/apps/store-root-app/src/assets/root-config/config/feature-import-map.json中提供的 feature-import-map.json 中配置了每个单一 spa 应用程序的 UMD 模块捆绑包。 要标识 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 中的路由是作为 feature-routes.json 的一部分配置的，它存在于 <store-temp>/packages/apps/store-root-app/src/assets/root-config/config/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"
}
]
}

过程

确定要覆盖的屏幕和相应的 angular 应用程序后，请完成以下步骤来定制应用程序提供的向导屏幕。
  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 是指需要创建的扩展模块的名称。
      注: Ensure that each word in the <module-name> attribute value is separated by a hyphen (-). For example, if the module name is 定制搬迁库存, specify the value as 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 文件夹中创建新的 angular 应用程序。 您可以在 <storetemp>/extensions/features/<module-name> 文件夹中找到源代码。
    • 在创建的 angular 应用程序中安装 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 文件夹以维护特定于语言的捆绑软件。 将在 <store-temp>/extensions/features/<module-name>/src/assets/<module-name>/i18n 项目文件夹中生成空的 en.json 捆绑软件 JSON 文件。 还会更新代码以设置 TranslateModule 来装入相应的翻译捆绑软件 JSON 文件。
    • 将 --override-component-folder-name 参数中指定的整个组件文件夹复制到 <store-temp>/extensions/features/<module-name>/src/app/features/<module-name> 文件夹。 此文件夹包含覆盖应用程序提供的屏幕所需的所有文件。
    • CLI 命令会自动将从属的 angular 服务和组件导入到扩展应用程序模块 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 方法中初始化向导。 这将确保新的 angular 应用程序中的定制向导组件与应用程序提供的向导共享相同的向导状态。
    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
  • 要验证容器的开发者工具箱中的更改，请抽取并部署定制。 有关提取和部署自定义内容的更多信息，请参阅《 提取自定义内容》。