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

デベロッパーズ・ツールキット内で、 IBM は、アプリケーションで使用できるスターター・コードを使用してコンポーネントを素早く生成するための Angular 図式を提供します。 コンポーネントには、検索ページ、表、およびフィールドの詳細が含まれます。

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

始める前に

  1. Order Hub コードを解凍したことを確認します。 詳しくは、 Order Hub のカスタマイズの開始を参照してください。
  2. 以下のコマンドを実行して、 strict-ssl を false に設定します。
    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. 図式スクリプトのヘルプを表示するには、以下を実行します。
    ng g @buc/schematics:<component> --help
  5. コンポーネントを作成します。

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

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

search-panel 図式は、検索ページ・コンポーネントを作成し、以下の機能をサポートするコードを含んでいます。
  1. 階層リンク (breadcrumb trail)
  2. 「検索の保存」 機能
  3. 検索条件のカスタマイズ 機能
  4. グループ化による 検索
以下の画面キャプチャーは、 「出荷検索 (Shipment search)」 ページを示しており、検索ページ内の機能を強調表示しています。
出荷の検索ページの画面キャプチャー。 パンくずリストは、ラベル番号 1 のボックスで囲まれています。 「保存済み検索」ボタンは、ラベル 2 のボックスで囲まれています。 「検索条件のカスタマイズ (Customize search criteria)」ボタンは、ラベルが 3 のボックスで囲まれています。 Search-by グループは、ラベル 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"という単語を追加してコンポーネント・クラス名を作成している。 例えば、 my-sample という名前を指定すると、生成されるクラス名は MySampleSearchComponent となります。
    JSON ファイル・パス
    (必須) 構成ファイルを更新または作成する場所へのパス (search_fields.json)。 例えば、 packages/order-shared/assets/buc-app-orderなどです。
    search_fields.json ファイルで、図式は名前に「-search」を付加してオブジェクト名を作成します。 例えば、 my-sample-searchです。
    変換ファイル・パス
    (必須) 変換リテラルを更新または作成する場所へのパス (en.json))。 例えば、 packages/order-shared/assets/buc-app-order/i18nなどです。
    en.json ファイルで、図式は名前に「-search」を付加してオブジェクト名を作成します。 例えば、 my-sample-searchです。
    共有ライブラリー
    (必須) 共有ライブラリー・フォルダーの名前。
    パス
    (オプション) コンポーネント・ファイルを作成するパス (現行モジュールに対する相対パス)。 デフォルトでは、コンポーネントと同じ名前のフォルダーがモジュールのルート・フォルダーに作成されます。
    json-ファイル名
    (オプション) デフォルトでは、図式はテスト・データで search_fields.json を更新します。 オブジェクトを更新するか、別のファイルに追加する必要がある場合は、このパラメーターを使用します。 アセット・フォルダーに存在しないファイル名を指定すると、新規ファイルが作成されます。
    プロジェクト
    図式が作成されているパッケージ・フォルダーの名前。 例えば、パッケージ /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 型）で、そのセレクタは検索結果コンポーネントテンプレートに含まれる。
以下の画面キャプチャーは、 「Shipment search results」 ページを示しており、結果ページ内の機能を強調表示しています。
「検索結果」ページの画面キャプチャー。 ボックス 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"という単語を追加して、コンポーネント・クラス名を作成している。 例えば、 my-sample という名前を指定すると、生成されるクラス名は MySampleSearchResultComponent と MySampleTableComponent になります。
    JSON ファイル・パス
    (必須) 構成ファイル (buc-table-config.json)) を更新または作成する場所へのパス。
    buc-table-config.json ファイルでは、図式により、名前に「-table」を付加してオブジェクト名が作成されます。 例えば、 my-sample-tableです。
    変換ファイル・パス
    (必須) 変換リテラルを更新または作成する場所へのパス (en.json)。
    en.json ファイルでは、図式により、名前に「-table」を付加してオブジェクト名が作成されます。 例えば、 my-sample-tableです。
    共有ライブラリー
    (必須) 共有ライブラリー・フォルダーの名前。
    パス
    (オプション) 検索結果コンポーネントを作成するためのパス (現行モジュールに対する相対パス)。 デフォルトでは、コンポーネントと同じ名前のフォルダーがモジュールのルート・フォルダーに作成されます。
    表パス
    (オプション) 現行モジュールを基準とした、テーブル・コンポーネントを作成するためのパス。 デフォルトでは、コンポーネントと同じ名前のフォルダーがモジュールのルート・フォルダーに作成されます。
    json-ファイル名
    (オプション) デフォルトでは、図式はテスト・データで buc-table-config.json を更新します。 オブジェクトを更新するか、別のファイルに追加する必要がある場合は、このパラメーターを使用します。 アセット・フォルダーに存在しないファイル名を指定すると、新規ファイルが作成されます。
    プロジェクト
    図式が作成されているパッケージ・フォルダーの名前。 例えば、パッケージ /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-component 図式は、以下の 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"という単語を追加してコンポーネント・クラス名を作成している。 例えば、 my-sample という名前を指定すると、生成されるクラス名は MySampleTableComponent となります。
    拡張
    (オプション) 拡張可能テーブル・クラスの名前。 有効な値は ClientSidePaginationBaseTableComponent または BaseTableComponent です。 コマンドに値を指定しないと、コンポーネントを選択するように求めるプロンプトが端末に表示されます。 Git Bash for Windowsでは、extendパラメータは必須です。
    JSON ファイル・パス
    (必須) 構成ファイル (buc-table-config.json)) を更新または作成する場所へのパス。
    buc-table-config.json ファイルでは、図式により、名前に「-table」を付加してオブジェクト名が作成されます。 例えば、 my-sample-tableです。
    変換ファイル・パス
    (必須) 変換リテラルを更新または作成する場所へのパス (en.json)。
    en.json ファイルでは、図式により、名前に「-table」を付加してオブジェクト名が作成されます。 例えば、 my-sample-tableです。
    パス
    (オプション) コンポーネント・ファイルを作成するパス (現行モジュールに対する相対パス)。 デフォルトでは、コンポーネントと同じ名前のフォルダーがモジュールのルート・フォルダーに作成されます。
    json-ファイル名
    (オプション) デフォルトでは、図式はテスト・データで buc-table-config.json を更新します。 オブジェクトを更新するか、別のファイルに追加する必要がある場合は、このパラメーターを使用します。 アセット・フォルダーに存在しないファイル名を指定すると、新規ファイルが作成されます。
    プロジェクト
    (必須) 図式の作成先となるパッケージ・フォルダーの名前。 例えば、パッケージ /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: 詳細ページの右側のパネルに属性を表示します。
以下の画面キャプチャーは、 「出荷の詳細 (Shipment details)」 ページを示しており、さまざまなコンポーネントが強調表示されています。
「出荷の詳細」ページの画面キャプチャー。 ボックス 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> \
--is-summary-panel <true|false> \
--path <path> \
--project <project-name> \
--skip-import
    パラメーター
    名前
    (必須) コンポーネントの名前です。
    回路図では、特殊文字を削除し、 "FieldsComponent"という単語を追加することで、コンポーネント・クラス名を作成している。 例えば、 my-sample という名前を指定すると、生成されるクラス名は MySampleFieldsComponent となります。
    JSON ファイル・パス
    (必須) 構成ファイルを更新または作成する場所へのパス (buc-field-details.json)。
    buc-field-details.json ファイルで、図式は、名前に「-fields」を付加してオブジェクト名を作成します。 例えば、 my-sample-fieldsなどです。
    「is-summary-」パネル
    (オプション) 作成するコンポーネントのタイプを決定するブール値。 要約コンポーネントを作成するには、 true を指定します。 フィールド・コンポーネントを作成するには、 false を指定します。 デフォルト値は true です。
    パス
    (オプション) コンポーネント・ファイルを作成するパス (現行モジュールに対する相対パス)。 デフォルトでは、コンポーネントと同じ名前のフォルダーがモジュールのルート・フォルダーに作成されます。
    json-ファイル名
    (オプション) デフォルトでは、図式はテスト・データで buc-field-details.json を更新します。 オブジェクトを更新するか、別のファイルに追加する必要がある場合は、このパラメーターを使用します。 アセット・フォルダーに存在しないファイル名を指定すると、新規ファイルが作成されます。
    プロジェクト
    図式が作成されているパッケージ・フォルダーの名前。 例えば、パッケージ /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 ファイルを編集してヘッダー・パラメーターを渡し、タブのラベルを指定します。 例えば、 画面キャプチャーを参照する場合、アクティブ・タブには「Details」というラベルが付きます。 「Details」ラベルを指定するには、 en.json ファイルに、変換リテラルへのパスを含むヘッダーを追加します。
    [header]="'SHIPMENT_DETAILS.SHIPMENT_TABS.SHIPMENT_DETAILS'"