Angular Schematics を使用したコンポーネントの作成

開発者ツールキット内では、 IBMアプリケーションで使用できるスターター コードを使用してコンポーネントをすばやく生成するための Angular スキーマを提供します。 コンポーネントには、検索ページ、テーブル、フィールドの詳細が含まれます。

回路図を使用して、既存のコンポーネントと同じ設計と機能を持つコンポーネントを生成します。注文ハブ。 生成されたコンポーネントには、次のようなさまざまなサービスと通信するために必要なライブラリも含まれます。
  • Sterling™ Order Managementシステムのバックエンド。
  • Sterling Intelligent PromisingInventory Visibilityテナント。
  • その他のマイクロサービス テナント。
  • 既存のページで使用されている Carbon UI ライブラリ。
回路図を使用して新しいアプリケーションを作成する方法については、以下を参照してください。次世代のオーダーハブで新しいアプリケーションを作成する。

始める前に

  1. 抽出する次世代オーダーハブコード。 詳細については、次世代のオーダーハブのカスタマイズを始める。
  2. 次のコマンドを実行して設定しますstrict-ssl誤りです。
    npm config set "strict-ssl" false
  3. アクセスIBM提供された回路図を削除するには、次のコマンドを実行して、@buc/schematics の最新バージョンを再インストールします。 Angularの場合、 v15、次のコマンドを実行します。
    npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v3latest.tgz
    Angularの場合、 v18、次のコマンドを実行します。
    npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v4latest.tgz
  4. Schematic スクリプトのヘルプについては、実行してください。
    ng g @buc/schematics:<component> --help
  5. コンポーネントを作成します。

検索ページコンポーネントの作成

作成するsearch pageユーザーが検索条件を指定してデータを検索するためのコンポーネント。

のsearch-panelschematic は検索ページ コンポーネントを作成し、次の機能をサポートするコードを含めます。
  1. パンくずの道
  2. 検索を保存関数
  3. 検索条件をカスタマイズする関数
  4. で検索グループ化
次のスクリーンショットは、出荷検索ページを表示し、検索ページ内の機能を強調表示します。
出荷検索ページのスクリーンキャプチャ。 パンくずリストは、ラベル番号 1 の付いたボックスで囲まれています。 保存された検索ボタンは、ラベル 2 の付いたボックスで囲まれています。 「検索条件のカスタマイズ」ボタンは、ラベル 3 の付いたボックスで囲まれています。 「検索条件」のグループは、ラベル 4 の付いたボックスで囲まれています。

手順

  1. ターミナルを開き、コンポーネントを追加するモジュールに移動します。 例えば、devtoolkit_docker/orderhub-code/buc-app-order 。
  2. 次のコマンドを実行してコンポーネントを作成します。
    ng g @buc/schematics:search-panel --name <name> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--shared-lib <shared-lib> \
--path <path> \
--json-file-name <json-file-name> \
--project <project-name> \
--skip-import
    パラメーター
    名前
    (必須) コンポーネントの名前。
    回路図は、特殊文字を削除し、単語を追加することでコンポーネントクラス名を作成します。 "SearchComponent"。 たとえば、名前を指定すると私のサンプル生成されるクラス名はMySampleSearchComponent。
    json ファイルパス
    (必須) 設定ファイルを更新または作成する場所へのパス (search_fields.json ）。 例えば、packages/order-shared/assets/buc-app-order 。
    の中にsearch_fields.jsonファイルでは、回路図は名前に「-search」を追加してオブジェクト名を作成します。 例えば、私のサンプル検索。
    翻訳ファイルパス
    （必須）翻訳リテラルを更新または作成する場所へのパス（en.json) 。 例えば、packages/order-shared/assets/buc-app-order/i18n 。
    の中にen.jsonファイルでは、回路図は名前に「-search」を追加してオブジェクト名を作成します。 例えば、私のサンプル検索。
    共有ライブラリ
    (必須) 共有ライブラリ フォルダーの名前。
    パス
    (オプション) 現在のモジュールを基準としたコンポーネント ファイルを作成するパス。 デフォルトでは、コンポーネントと同じ名前のフォルダーがモジュールのルート フォルダーに作成されます。
    jsonファイル名
    （オプション）デフォルトでは、回路図は更新されますsearch_fields.jsonテストデータ付き。 オブジェクトを更新したり別のファイルに追加したりする必要がある場合は、このパラメータを使用します。 アセット フォルダーに存在しないファイル名を指定すると、新しいファイルが作成されます。
    プロジェクト
    (必須) 回路図が作成されるパッケージ フォルダーの名前。 たとえば、packages/order-search-result に検索結果コンポーネントを作成すると、プロジェクト名は order-search-result になります。
    次のコマンドはパラメータ付きの例を示します。
    ng g @buc/schematics:search-panel --name my-sample --path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --shared-lib order-shared --project order-search --skip-import
  3. 回路図は新しいコンポーネントを作成し、共有ファイルを更新します。 ターミナルの出力には、作成および更新されたファイルが要約されます。

検索結果ページコンポーネントの作成

作成するsearch results pageユーザーが検索ページ コンポーネントからクエリを実行した後に結果を表示するコンポーネント。

のsearch-result-component回路図は 2 つのコンポーネントを生成します。
  1. 検索結果コンポーネント。
  2. テーブルコンポーネント（BaseTableComponent検索結果コンポーネント テンプレートにセレクターが含まれる、検索キーワード タイプ ()。
次のスクリーンショットは、出荷検索結果ページを表示し、結果ページ内の機能を強調表示します。
検索結果ページのスクリーン キャプチャ。 ボックス 1 は検索結果コンポーネントを表します。 ボックス 2 はテーブル コンポーネントを表します。
手順
  1. ターミナルを開き、コンポーネントを追加するモジュールに移動します。 例えば、devtoolkit_docker/orderhub-code/buc-app-order 。
  2. 次のコマンドを実行して、検索結果ページ コンポーネントを作成します。 回路図はコンポーネントを作成し、最も近いルーティング モジュール内の検索結果コンポーネントのサンプル ルーティング オブジェクトを更新します。
    ng g @buc/schematics:search-result-component --name <name> \
--path <resultsPageComponentPath> \
--table-path <tableComponentPath> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--shared-lib <shared-lib> \
--project <project-name> \
--skip-import
    パラメーター
    名前
    (必須) コンポーネントの名前。
    回路図は、特殊文字を削除し、単語を追加することでコンポーネントクラス名を作成します。 "SearchResultComponent"検索結果の構成要素と単語を示す"TableComponent"テーブルコンポーネントを示す。 たとえば、名前を指定すると私のサンプル生成されるクラス名はMySampleSearchResultComponentそしてMySampleTableComponent。
    json ファイルパス
    (必須) 設定ファイルを更新または作成する場所へのパス (buc-table-config.json) 。
    の中にbuc-table-config.jsonファイルでは、回路図は名前に「-table」を追加してオブジェクト名を作成します。 例えば、私のサンプルテーブル。
    翻訳ファイルパス
    （必須）翻訳リテラルを更新または作成する場所へのパス（en.json ）。
    の中にen.jsonファイルでは、回路図は名前に「-table」を追加してオブジェクト名を作成します。 例えば、私のサンプルテーブル。
    共有ライブラリ
    (必須) 共有ライブラリ フォルダーの名前。
    パス
    (オプション) 現在のモジュールを基準とした、検索結果コンポーネントを作成するパス。 デフォルトでは、コンポーネントと同じ名前のフォルダーがモジュールのルート フォルダーに作成されます。
    テーブルパス
    (オプション) 現在のモジュールを基準としたテーブル コンポーネントを作成するパス。 デフォルトでは、コンポーネントと同じ名前のフォルダーがモジュールのルート フォルダーに作成されます。
    jsonファイル名
    （オプション）デフォルトでは、回路図は更新されますbuc-table-config.jsonテストデータ付き。 オブジェクトを更新したり別のファイルに追加したりする必要がある場合は、このパラメータを使用します。 アセット フォルダーに存在しないファイル名を指定すると、新しいファイルが作成されます。
    プロジェクト
    (必須) 回路図が作成されるパッケージ フォルダーの名前。 たとえば、packages/order-search-result に検索結果コンポーネントを作成すると、プロジェクト名は order-search-result になります。
    次のコマンドはパラメータ付きの例を示します。
    ng g @buc/schematics:search-result-component --name my-sample --path packages/order-search/src-custom/app/features/search --table-path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --shared-lib order-shared --project order-search --skip-import
  3. 回路図は新しいコンポーネントを作成し、共有ファイルを更新します。 ターミナルの出力には、作成および更新されたファイルが要約されます。

テーブルコンポーネントの作成

作成するtableテーブルにデータを表示するコンポーネント。

のtable-componentSchematic は、次の 2 つのテーブル クラスのいずれかを拡張してテーブル コンポーネントを作成することをサポートしています。
  1. ClientSidePaginationBaseTableComponent:クライアント側のページネーションでは、すべてのテーブル行エントリが 1 回の API 呼び出しで取得されます。
  2. BaseTableComponent:API からのサーバー側ページベースの結果用。
次のスクリーンショットは、出荷検索結果ページが表示され、テーブル コンポーネントが強調表示されます。
検索結果ページのスクリーンキャプチャ。 テーブル コンポーネントをボックスで囲みます。
手順
  1. ターミナルを開き、コンポーネントを追加するモジュールに移動します。 例えば、devtoolkit_docker/orderhub-code/buc-app-order 。
  2. 次のコマンドを実行してテーブル コンポーネントを作成します。
    ng g @buc/schematics:table-component --name <name> \
--extend <extendableClassName> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--path <path> \
--project <project-name> \
--skip-import
    パラメーター
    名前
    (必須) コンポーネントの名前。
    回路図は、特殊文字を削除し、単語を追加することでコンポーネントクラス名を作成します。 "TableComponent"。 たとえば、名前を指定すると私のサンプル生成されるクラス名はMySampleTableComponent。
    拡張
    (オプション) 拡張可能なテーブル クラスの名前。 有効な値はClientSidePaginationBaseTableComponentまたはBaseTableComponent。 コマンドで値を指定しない場合は、ターミナルでコンポーネントを選択するように求められます。 でGitBash for Windows では、extend パラメータは必須です。
    json ファイルパス
    (必須) 設定ファイルを更新または作成する場所へのパス (buc-table-config.json) 。
    の中にbuc-table-config.jsonファイルでは、回路図は名前に「-table」を追加してオブジェクト名を作成します。 例えば、私のサンプルテーブル。
    翻訳ファイルパス
    （必須）翻訳リテラルを更新または作成する場所へのパス（en.json ）。
    の中にen.jsonファイルでは、回路図は名前に「-table」を追加してオブジェクト名を作成します。 例えば、私のサンプルテーブル。
    パス
    (オプション) 現在のモジュールを基準としたコンポーネント ファイルを作成するパス。 デフォルトでは、コンポーネントと同じ名前のフォルダーがモジュールのルート フォルダーに作成されます。
    jsonファイル名
    （オプション）デフォルトでは、回路図は更新されますbuc-table-config.jsonテストデータ付き。 オブジェクトを更新したり別のファイルに追加したりする必要がある場合は、このパラメータを使用します。 アセット フォルダーに存在しないファイル名を指定すると、新しいファイルが作成されます。
    プロジェクト
    (必須) 回路図が作成されるパッケージ フォルダーの名前。 たとえば、packages/order-search-result に検索結果コンポーネントを作成すると、プロジェクト名は order-search-result になります。
    次のコマンドはパラメータ付きの例を示します。
    ng g @buc/schematics:table-component --name my-sample2 --extend ClientSidePaginationBaseTableComponent --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --path packages/order-search/src-custom/app/features/search --project order-search --skip-import
  3. 回路図は新しいコンポーネントを作成し、共有ファイルを更新します。 ターミナルの出力には、作成および更新されたファイルが要約されます。

参考として、次のチュートリアルでは、Angular スケマティックを使用してテーブルコンポーネントを作成しています。チュートリアル：在庫検索結果ページのカスタマイズ。

フィールドコンポーネントの作成

作成するField特定のレコードの詳細を表示するコンポーネント。 たとえば、注文の注文日、注文明細、出荷ノード情報などです。

のsummary-component回路図では、次の 2 種類のコンポーネントの作成がサポートされています。
  1. Field component:ページのコンテンツ領域に属性を表示します。
  2. Summary component:詳細ページの右側のパネルに属性を表示します。
次のスクリーンショットは、発送の詳細ページが表示され、さまざまなコンポーネントが強調表示されます。
出荷詳細ページのスクリーン キャプチャ。 ボックス 1 はフィールド コンポーネントを表します。 ボックス 2 はサマリー コンポーネントを表します。
手順
  1. ターミナルを開き、コンポーネントを追加するモジュールに移動します。 例えば、devtoolkit_docker/orderhub-code/buc-app-order 。
  2. 次のコマンドを実行してフィールド コンポーネントを作成します。
    ng g @buc/schematics:summary-component \
--name <name> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--is-summary-panel <true|false> \
--path <path> \
--project <project-name> \
--skip-import
    パラメーター
    名前
    (必須) コンポーネントの名前。
    回路図は、特殊文字を削除し、単語を追加することでコンポーネントクラス名を作成します。 "FieldsComponent"。 たとえば、名前を指定すると私のサンプル生成されるクラス名はMySampleFieldsComponent。
    json ファイルパス
    (必須) 設定ファイルを更新または作成する場所へのパス (buc-field-details.json ）。
    の中にbuc-field-details.jsonファイルでは、回路図は名前に「-fields」を追加してオブジェクト名を作成します。 例えば、私のサンプルフィールド。
    翻訳ファイルパス
    （必須）翻訳リテラルを更新または作成する場所へのパス（en.json ）。
    の中にen.jsonファイルでは、回路図は名前に「-field」を追加してオブジェクト名を作成します。 例えば、私のサンプルフィールド。
    サマリーパネル
    (オプション) 作成するコンポーネントのタイプを決定するブール値。 特定真実サマリーコンポーネントを作成します。 特定間違いフィールド コンポーネントを作成します。 デフォルト値は true です。
    パス
    (オプション) 現在のモジュールを基準としたコンポーネント ファイルを作成するパス。 デフォルトでは、コンポーネントと同じ名前のフォルダーがモジュールのルート フォルダーに作成されます。
    jsonファイル名
    （オプション）デフォルトでは、回路図は更新されますbuc-field-details.jsonテストデータ付き。 オブジェクトを更新したり別のファイルに追加したりする必要がある場合は、このパラメータを使用します。 アセット フォルダーに存在しないファイル名を指定すると、新しいファイルが作成されます。
    プロジェクト
    (必須) 回路図が作成されるパッケージ フォルダーの名前。 たとえば、packages/order-search-result に検索結果コンポーネントを作成すると、プロジェクト名は order-search-result になります。
    次のコマンドはパラメータ付きの例を示します。
    ng g @buc/schematics:summary-component --name my-sample --path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --is-summary-panel true --project order-search --skip-import
  3. 回路図は新しいコンポーネントを作成し、共有ファイルを更新します。 ターミナルの出力には、作成および更新されたファイルが要約されます。
  4. もしあなたがフィールドコンポーネント生成された HTML ファイルを編集して、タブのラベルを指定するためのヘッダー パラメータを渡します。 例えば、画面キャプチャアクティブなタブには「詳細」というラベルが付いています。 「詳細」ラベルは、翻訳リテラルへのパスを含むヘッダーを追加することで指定されます。en.jsonファイル：
    [header]="'SHIPMENT_DETAILS.SHIPMENT_TABS.SHIPMENT_DETAILS'"