構成によるカスタマイズ

JSON 構成ファイルを追加することにより、任意のリスト・ページまたはサマリー・ページに新規フィールドを追加できます。完全なルートのソース・コードの所有権を取得する必要はありません。

アプリケーションは、ピック、パック、およびその他のオーダー・フルフィルメント・フローなどのほとんどのビジネス・フローで、検索、リスト、および詳細ページのパラダイムに従います。リスト・ページと詳細ページにも、ビジネス・フロー全体で類似した UI レイアウトがあります。リストおよび詳細ページをカスタマイズして、データを表示または非表示にすることができます。

例えば、「梱包オーダー・リスト」ページの情報は、4 つの列にわたって表示されます。アクション・ボタンが 5 番目の列に表示されます。これらの列のいずれかで追加データを表示したりデータを非表示にしたりする場合は、構成方法によってリストおよび詳細ページをカスタマイズできます。

カスタマイズ・フレームワークは、以下の構成ファイルを含む <store-temp>/extensions/override-static-assets/differential/config フォルダーから構成を読み取ります。

show-widgets-config.json -以下のサンプル JSON に示されているように、この構成ファイルを使用してカスタム・データを表示します。

[
    {
      "componentID": "PickUpOrder",
      "attributes": [
          {
            "type": "list-label-data",
            "columnId": "1",
            "label": {
                "bundleKey": "pickOrderList.LABEL_IsOverdue"
            },
            "data": {
                "dataBindingPath": "IsOverdue",
                "databundleFormatter": {
                    "bundleKey": "pickOrderList.LABEL_Overdue",
                    "bundleValues": [
                        {
                            "param": "isOverdue",
                            "value": "IsOverdue"
                        }
                    ]
                }
            } 
           },
          {
            "type": "list-label-data",
            "columnId" :"2",
            "label": {
                "bundleKey": "pickOrderList.LABEL_IncludedInBatch"
            },
            "data": {
                "dataBindingPath": "IncludedInBatch",
                "databundleFormatter": {
                    "bundleKey": "pickOrderList.LABEL_IsIncludedInBatch",
                    "bundleValues": [
                        {
                            "param": "includedInBatch",
                            "value": "IncludedInBatch"
                        }
                    ]
                }
            } 
          },
          {
            "type": "list-data",
            "columnId" :"3",
            "data": {
                "dataBindingPath":"ScacAndService"
            },
            "style": "h6-text color-gray-60"
          }
      ]
    },
    {
        "componentID" : "shipmentSummaryDetails",
        "attributes" : [
          {
            "type": "summary-label-data",
            "columnId" :"1",
            "label": {
                "bundleKey": "shipmentSummary.LABEL_OrderPurpose"
            },
            "data": {
                "dataBindingPath": "DocumentType",
                "databundleFormatter": {
                    "bundleKey": "shipmentSummary.LABEL_OrdPurpose",
                    "bundleValues": [
                        {
                            "param": "documentType",
                            "value": "DocumentType"
                        }
                    ]
                }
            }
          },
          {
            "type": "summary-label-data",
            "columnId" :"2",
            "data": {
                "dataBindingPath":"SellerOrganizationName"
            },
            "label": {
                "bundleKey": "shipmentSummary.LABEL_Brand"
            }
          }
        ]
    }
]

hide-widgets-config.json -以下のサンプル JSON に示されているように、この構成ファイルを使用してデータを非表示にします。

[
    {
        "componentID" : "ShipmentDetailsComponent",
        "tids" :[ "ShipmentNoTag", "ShipmentTypeIcon", "ShipmentNo"]
    },
    {
        "componentID":"shipmentSummaryDetails",
        "tids" :["customerInfoPanel"]
    }
]

以下の表で、JSON 仕様でサポートされる属性について説明します。

表 1. JSON仕様でサポートされている属性
属性	説明
`componentID`	データを表示または非表示にする必要があるコンポーネントの ID。
`attributes`	表示する必要があるデータに各属性が対応する属性の配列。
`type`	表示する必要があるデータのタイプ。有効な値は、 `list-label-data`、 `list-data`、および `summary-label-data`です。 `list-label-data` -キーと値のペアをリスト・ページに表示します。 `list-data` -リスト・ページにデータ値を表示します。 `summary-label-data` -要約ページにキーと値のペアを表示します。このスタイルは、要約ページ内の他のキーと値のペアと整合したものになります。
`columnId`	データを表示する必要がある列番号。リストまたは要約ページの情報が列に表示されます。例えば、出荷ステータスが最初の列に表示されます。一方、予定出荷日は 3 番目の列に表示されます。
`data.dataBindingPath`	エンティティー・オブジェクト内にある、バインディングの `xpath` 。例えば、以下のサンプル・コードに示されている `Shipment` オブジェクトがアプリケーションで製品説明を表示する必要がある場合、 `xpath` は ItemDetails.PrimaryInformation.Descriptionになります。 `{ "Shipment": { "ItemDetails": { "PrimaryInformation": { "Description": "test description" } } } }`
`label.bundleKey`	en.json ファイルで定義されているラベルのバンドル・キー。
`data.databundleFormatter.bundlekey`	en.json ファイルを使用してフォーマットする必要があるデータのバンドル・キー。バンドル・エントリーのデータを動的にフォーマットする必要がある場合にのみ使用します。
`data.databundleFormatter.bundleValues`	データのフォーマット設定に使用されるパラメーターと値のペアの配列。
`data.databundleFormatter.bundleValues.param`	実際のデータで置き換える必要があるバンドル値内の変数名。
`data.databundleFormatter.bundleValues.value`	バンドル値内のキーを置換するために使用する必要がある、エンティティー・モデル内のバインディングの `xpath` 。
`style`	適用する必要がある CSS クラス。