添加新视图和 Portlet

在线编辑

您可以向应用程序菜单添加新视图并创建相应的 Portlet。

关于此任务

Sterling Store Engagement 默认提供以下视图：

订单实现(Order_Fulfillment)
库存管理 (Inv_Management)
客户服务 (Customer_Service)

但是，您可以定义新视图并创建相应的 Portlet 以满足您的业务需求。有关在 Sterling Business Center 中添加新视图的更多信息，请参阅配置存储集线器规则。

过程

在 SCREEN_EXTENSIONS_HOME 下创建以下文件夹结构（如果还没有）。SCREEN_EXTENSIONS_HOME/features/home/portlet-set

注：
此步骤中提供的文件夹结构包含应用程序提供的 Portlet。最好是在同一路径中创建新的 Portlet。
转至 SCREEN_EXTENSIONS_HOME/features/home/portlet-set 文件夹。
将 portlet-set-extension.module.ts 从 <WORKSPACE>/store-frontend/src/app/features/home/portlet-set 复制到 <WORKSPACE>/store-frontend/store-extensions-src/app/features/home/portlet-set 文件夹。
如果 portlet-set-extension.module.ts 已经存在，则不要复制文件。此文件中声明了定制 Portlet 组件和提供程序。
要创建新的 portlet，请执行以下步骤：
1. 运行命令: ng g c <componentName> --project=store-extensions --skip-import
  
  注: 必须传递自变量 --project=store-extensions。执行此操作失败将在应用程序提供的 src 文件夹 (<WORKSPACE>/store-frontend/src) 中创建组件。此处创建的文件将被忽略，并且不会在浏览器上呈现。
2. 更新 portlet-set-extension.module.ts中的声明 @NgModule 修饰符中的 Portlet 组件类名。
  注：
  - 确保将相应的 Portlet 组件类导入到 portlet-set-extension.module.ts中。
  - 确保您是从 store-extensions-src 而不是从 store-app-build 文件夹导入。
要为新的 Portlet 组件创建服务或提供程序，请执行以下步骤:
1. 运行命令: ng g s <serviceName> --project=store-extensions
  
  注: 必须传递自变量 --project=store-extensions。执行此操作失败将在应用程序提供的 src 文件夹 (<WORKSPACE>/store-frontend/src) 中创建组件。此处创建的文件将被忽略，并且不会在浏览器上呈现。
2. 在 portlet-set-extension.module.ts中更新 @NgModule 修饰符的提供程序中的服务或提供程序名称。

阅读视口小部件注册。通过下列其中一种方法向视图注册 Portlet:

将 portlet 注册到新的视图规范。

例如，如果要将定制 Portlet 添加到 "User_Management" 视图，那么 JSON 规范将如下所示:

{
        personaName: ‘User_Management',
        personaIconClass: 'app-icon-user_mgmt_20',
        portlets: [
            {
                portletTitleBundleKey: ‘userPortlet.TITLE_UserPortlet',
                portletSequenceNumber: 4,
                portletComponent: UserPortletComponent,
                portletTID: ‘userPortlet',
                resourceId: 'ISF000004’
            }
        ]
    }

向现有视图规范注册 Portlet。

如果要将定制 Portlet 添加到现有视图 (例如 Inv_Management) ，那么 JSON 规范将如下所示:

{
        personaName: ‘Inv_Management',
        portlets: [
            {
                portletTitleBundleKey: ‘userPortlet.TITLE_UserPortlet',
                portletSequenceNumber: 4,
                portletComponent: UserPortletComponent,
                portletTID: ‘userPortlet',
                resourceId: 'ISF000004’
            }
        ]
    }

在 store-customization-impl.ts 文件中，更新 portlet-view JSON 规范中的 extensionPersonaConfigList 属性，如下所示:

static extensionPersonaConfigList: IPersonaConfig[] = [
                                {
        personaName: ‘Inv_Management',
        personaIconClass: ‘app-icon-inventory_mgmt_20’,
        portlets: [
            {
                portletTitleBundleKey: ‘userPortlet.TITLE_UserPortlet',
                portletSequenceNumber: 4,
                portletComponent: UserPortletComponent,
                portletTID: ‘userPortlet',
                resourceId: 'ISF000004’
            }
        ]
    }
                        ];

注: 视图是在中心级别定义的，并且不受许可权控制。但是，如果您没有对视图的任何 Portlet 的许可权，那么该视图不会显示在应用程序的侧边导航面板中。