创建 features.json 文件

创建新应用程序后，创建 features.json 文件，将新应用程序的菜单项添加到主导航菜单中。

关于此任务

您需要创建两个版本的 features.json 文件。一个文件版本用于开发，另一个文件版本用于部署应用程序。这些文件完全相同，但有两个例外。

您在 navigation>route>link 属性中定义的值在开发文件版本和部署文件版本中有所不同。
本地开发和部署文件的放置目录不同。将本地开发文件放入 devtoolkit_docker/orderhub-code/shell-ui/assets/dev 目录。将部署文件放入 devtoolkit_docker/orderhub-code/shell-ui/assets 目录。

为开发目的创建 features.json 文件后，可以复制该文件，然后为部署版本进行必要的修改。

过程

Mono 仓库/Angular 仓库 - 设置

在 orderhub-code 目录中，创建以下目录结构。
mkdir -p devtoolkit_docker/orderhub-code/shell-ui/assets/dev
在 shell-ui/assets/dev 目录中，创建 features.json 文件。
该文件包含一个功能数组，每个功能代表 shell 左侧导航栏中的一个菜单选项。使用以下属性定义每个特征。
图标

图标名称。您可以在 om-orderhub-base Docker 容器内的 /opt/app-root/src/shell-ui/assets/icons/shell-icon-set.svg 文件中找到可接受的图标列表。

iconForRailStateOnly （可选）

真/假 - 菜单折叠时只显示菜单图标。默认值设为 false。

标识

功能的唯一标识符，用于区分自定义功能和产品提供的功能。以 custom 作为 ID 的前缀。

导航
说明如何导航到该功能。
路径

路由对象包含两个属性。

链接

以IFRAME形式打开功能页面的 URL。此处指定的值取决于容器的运行模式。

当您从本地开发环境运行订单中心时，该值是一个带有完全限定域名的绝对 URL 。例如，如果自定义版本库的开发服务器被设置为在端口 9600 上为用户界面提供服务，那么假设版本库的开发服务器在本地运行，该值将被设置为 https://localhost:9600/<base href>/<path to the page> 。
将用于本地开发的文件放到 <path to orderhub code directory>/shell-ui/assets/dev 目录中。

为部署创建文件时，将值设置为 /order-management-customization/<base-href>/<path to the page>。 base-href 表示用于构建 Angular 资源库的基础 href。
将部署文件放入 <path to orderhub code directory>/shell-ui/assets 目录。

路径

代表用于将自定义用户界面与通用用户界面关联起来的路由。当用户浏览自定义功能时，该值会显示在浏览器的地址栏中。使用 /<base-href>/<path to the page> 作为路径。
parentFeatureId
将功能添加为现有菜单的子菜单时提供的 parentFeatureId 。
您可以在基本容器中的 features.json 文件中以 id 的形式找到该值。运行以下命令提取文件：
docker cp om-orderhub-base:/opt/app-root/src/shell-ui/assets/features.json features.json
序列

sequence 值，用于在导航中添加新功能或子菜单。序列值决定了新功能或子菜单在导航中出现的位置。有关序列值的更多信息，请参阅导航菜单中的定位功能。

标题

菜单标题。该领域支持全球化。要使用翻译服务，请使用翻译属性键作为值，例如 features.custom-feature-title。

类型

类型值始终设置为 IFRAME。

启用条件（可选）

指定启用功能时的条件。未指定时，默认为所有用户启用该功能。

byResourceId

用户必须能够访问以逗号分隔的资源 ID 列表，才能访问用户界面。

已隐藏

选项属性，用于隐藏功能带上的某个功能。缺省值为 false。使用此属性可访问用户界面模块内的超链接。用户可以通过复制浏览器中的 URL 来添加书签或分享功能。
有关开发，请参阅以下 features.json 文件示例。
devtoolkit_docker/orderhub-code/shell-ui/assets/dev/features.json
图 1。用于开发的示例 features.json
```
[
{
  "id": "monorepo",
  "title": "Custom Mono Repo",
  "icon": "programs-30",
  "parentFeatureId": "oms-inventory-root",
  "sequence": "10.4011",
  "iconForRailStateOnly": true,
  "navigation" : {
	"route" : {
		"link": "https://localhost:9300/custom-monorepo/custom-page1/monorepo/home",
		"path": "/custom-monorepo/custom-page1/monorepo/home"
	}
  },
  "type": "IFRAME"
},
{
  "id": "angularrepo",
  "title": "Custom Angular Repo",
  "icon": "tool-30",
  "parentFeatureId": "oms-order-hub-l1",
  "sequence": "10.16",
  "navigation" : {
	"route" : {
		"link": "https://localhost:4000/custom-angularrepo",
		"path": "/angularrepo"
	}
  },
  "enablementCondition": {
       "byResourceId": "BUCWSP"
  },
  "type": "IFRAME"
}
]
```
创建文件的开发版本后，就可以为部署进行修改了。有关部署情况，请参阅 devtoolkit_docker/orderhub-code/shell-ui/assets/features.json 示例文件。
devtoolkit_docker/orderhub-code/shell-ui/assets/features.json
图 2。部署示例 features.json
```
[
{
  "id": "monorepo",
  "title": "Custom Mono Repo",
  "icon": "programs-30",
  "parentFeatureId": "oms-inventory-root",
  "sequence": "10.4011",
  "iconForRailStateOnly": true,
  "navigation" : {
	"route" : {
		"link": "/order-management-customization/custom-monorepo/custom-page1/monorepo/home",
		"path": "/custom-monorepo/custom-page1/monorepo/home"
	}
  },
  "type": "IFRAME"
},
{
  "id": "angularrepo",
  "title": "Custom Angular Repo",
  "icon": "tool-30",
  "parentFeatureId": "oms-order-hub-l1",
  "sequence": "10.16", 
  "navigation" : {
	"route" : {
		"link": "/order-management-customization/custom-angularrepo",
		"path": "/angularrepo"
	}
  },
  "enablementCondition": {
       "byResourceId": "BUCWSP"
  },
  "type": "IFRAME"
}
]
```
专题标题翻译
在 shell-ui/assets/i18n 目录中创建特定语言文件。默认支持的语言如下。
- de.json
- en.json
- es.json
- fr.json
- it.json
- ja.json
- ko.json
- pl.json
- pt.json
- ru.json
- tr.json
- zh-Hant.json
- zh-Hans.json
该文件遵循 Angular 翻译文件的标准约定。例如，如果功能的标题是 features.custom-feature-title，那么翻译 .json 文件就会包含：
```
{
  ...,
  "features": {
    "custom-feature-title": "New custom UI"
  },
  ...
}
```