テーブル・ヘッダー名の変更

構成によるカスタマイズ 手法を使用して、テーブル内のヘッダー名を変更する方法について学習します。この演習では、表の特性を定義する buc-table-config.json ファイルを変更します。

このシナリオでは、「アイテムの管理」ページでテーブルを変更します。表で、ヘッダー名「配達指定日 (Requested delivery date)」、「キャンセル日 (Cancel date)」、および「出荷指定日 (Requested ship date)」を「配達指定日 (Desdesired delivery date)」、「終了指定日 (Desdesired termination date)」、および「出荷指定日 (Desdesired availability date)」に変更します。

注: この方法は、テーブル・ヘッダーに限定されません。これは、変換 JSON ファイル内にあるラベルを変更するために使用できます。便宜上、すべてのラベル変更は、単一のカスタム JSON ファイルで定義できます。

手順

まず、変更する必要がある表に対応するスキーマを buc-table-config.json ファイルで見つける必要があります。
1. Order Hubにログインします。
2. ブラウザーの「コンソール」タブを開きます。
3. 「オーダーの作成」フローの「明細の管理」ページに移動します。
  - 前のレッスンと同じブラウザー・セッションを続行する場合は、項目をオーダーに追加し、「次へ」をクリックします。
  - 新規セッションを開始する場合は、「注文」>「アウトバウンド」に移動します。「オーダーの作成 (Create order)」をクリックし、「明細の管理 (Manage lines)」ページが表示されるまでステップを進めます。
4. 到着したらラインを管理するページを確認してくださいコンソール最後のメッセージにはBaseTableComponent.initializeTable 。
  スキーマ名 create-orderlineが表示されます。
ファイル buc-app-order/packages/create-order/src-custom/assets/buc-app-order/buc-table-config.jsonを開きます。

create-orderline スキーマの下で、カスタマイズする表ヘッダーを見つけます。

以下のスニペットは、「配達指定日 (Requested delivery date)」、「キャンセル日 (Cancel date)」、および「出荷指定日 (Requested ship date)」に対応する 3 つのヘッダーを表示します。

      {
          "id": "deliveryDate",
          "name": "SHARED.GENERAL.LABEL_reqDelDate",
          "sortable": true,
          "sortKey": "ReqDeliveryDate",
          "style": {
            "min-width": "12rem"
          }
      },
      {
          "id": "cancelDate",
          "name": "SHARED.GENERAL.LABEL_cancelDate",
          "sortable": true,
          "sortKey": "ReqCancelDate",
          "style": {
            "min-width": "12rem"
          }
      },
      {
          "id": "requestShipDate",
          "name": "SHARED.GENERAL.LABEL_REQUESTED_SHIPDATE",
          "sortable": true,
          "sortKey": "ReqShipDate",
          "style": {
            "min-width": "12rem"
          }
      }

name キーは、ヘッダー・ストリングを定義します。

これで、ヘッダーに使用されるキーが判明したので、 packages/create-order/src-custom/assets/custom/i18n/en.json ファイルを開きます。
以下のエントリーを JSON ファイルに追加して、カスタム・ストリング「希望デリバリー日 (Desdesired delivery date)」、「希望終了日 (Desdesired termination date)」、および「希望開始日 (Desdesired availability date)」を使用します。
このチュートリアルでは、以前に JSON ファイルに CREATE_ORDER オブジェクトを追加したため、このコードを CREATE_ORDERの後に追加します。
```
    "SHARED": {
        "GENERAL": {
          "LABEL_reqDelDate": "Desired delivery date", 
          "LABEL_REQUESTED_SHIPDATE": "Desired availability date",
          "LABEL_cancelDate": "Desired termination date"
        }
    }
```
フレームを再ロードし、「回線の管理」ページに移動して変更を確認します。
これで、更新されたストリングが表に表示されます。