作成するfeatures.jsonファイル

新しいアプリケーションを作成した後、メインナビゲーションメニューに新しいアプリケーションのメニュー項目を追加する features.json ファイルを作成します。

このタスクについて

2つのバージョンを作成する必要がありますfeatures.jsonファイル。開発目的で 1 つのファイルバージョンを使用し、アプリケーションの展開には別のファイルバージョンを使用します。ファイルは 2 つの例外を除いて同一です。

定義した値はナビゲーション>ルート>リンクプロパティは開発ファイルバージョンとデプロイメントファイルバージョン間で異なります。
ローカル開発とデプロイメントでは、ファイルを置くディレクトリが異なります。ローカル開発ファイルを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 ファイルを作成する。
このファイルには、シェルの左側のナビゲーションバーのメニューオプションを表す機能の配列が含まれています。以下のプロパティを使用して、各フィーチャーを定義します。
アイコン

アイコンの名前。使用可能なアイコンのリストは、 om-orderhub-base Docker コンテナ内の /opt/app-root/src/shell-ui/assets/icons/shell-icon-set.svg ファイルにあります。

iconForRailStateOnly（オプション）

True/false - メニューが折りたたまれたときにメニューアイコンのみを表示する。デフォルト値は false に設定されています。

ID

カスタム機能を製品に付属する機能と区別するための機能の一意の識別子。 IDの先頭にcustom。

ナビゲーション
この機能に移動する方法について説明します。
経路

ルートオブジェクトには 2 つのプロパティが含まれています。

リンク

IFRAMEとして機能のページを開始URL。ここで指定される値は、コンテナが実行されているモードによって異なります。

ローカル開発環境から Order Hub を実行すると、その値は完全修飾ドメイン名を持つURL となります。たとえば、カスタムリポジトリの開発サーバーがポートでUIを提供するように設定されている場合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-hrefAngular リポジトリの構築に使用される基本 href を表します。
デプロイメントファイルを<path to orderhub code directory>/shell-ui/assetsディレクトリ。

パス

カスタムUIを共通ユーザーインターフェースに関連付けるために使用するルートを表します。ユーザーがカスタム機能をブラウズすると、その値がブラウザのアドレスバーに表示されます。使用/<base-href>/<path to the page>パスとして。
parentFeatureId
既存のメニューのサブメニューとして機能を追加する際に提供される parentFeatureId 。
値は次のように見つけることができますidの中にfeatures.jsonベースコンテナー内のファイル。ファイルを抽出するために、次のコマンドを実行します。
docker cp om-orderhub-base:/opt/app-root/src/shell-ui/assets/features.json features.json
シーケンス

sequence ナビゲーションに新しい機能やサブメニューを追加するために提供される値。シーケンス値は、新しい機能やサブメニューがナビゲーションのどこに表示されるかを決定します。シーケンス値の詳細については、ナビゲーションメニューのポジショニング機能を参照。

タイトル

メニューのタイトル。このフィールドはグローバル化をサポートします。翻訳サービスを利用するには、翻訳プロパティのキーを値として使用します。例:features.custom-feature-title 。

タイプ

タイプ値は常に IFRAME に設定する。

有効化条件（オプション）

機能を有効にする条件を指定します。指定されていない場合は、デフォルトですべてのユーザーに対して機能が有効になります。

byResourceId

ユーザーが UI にアクセスするには、コンマ区切りのリソース ID リストにアクセスできる必要があります。

非表示

リボン上の機能を非表示にするオプションプロパティ。デフォルト値は false です。このプロパティを使用して、UI モジュール内のハイパーリンクにアクセスします。ユーザーは、ブラウザから 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"
  },
  ...
}
```