Customizing by configuration

You can add new fields in any list or summary page by adding a JSON configuration file. You need not take the ownership of the source code of the complete route.

The application follows the search, list, and details page paradigm in most of the business flows such as pick, pack, and other order fulfillment flows. The list and details pages also have similar UI layout across business flows. You can customize the list and details page to show or hide data.

For example, the information in the Pack order list page is displayed across four columns. The action buttons are displayed in the fifth column. You can customize the list and details page by the configuration approach, if you want to display extra data or hide data in any of these columns.

The customization framework reads configuration from the <store-temp>/extensions/override-static-assets/differential/config folder that contains the following configuration files:
  • show-widgets-config.json - use this configuration file to display custom data as illustrated in the following sample 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 - use this configuration file to hide data as illustrated in the following sample JSON:
    [
    {
        "componentID" : "ShipmentDetailsComponent",
        "tids" :[ "ShipmentNoTag", "ShipmentTypeIcon", "ShipmentNo"]
    },
    {
        "componentID":"shipmentSummaryDetails",
        "tids" :["customerInfoPanel"]
    }
]

The following table describes the supported attributes of the JSON specification:

Table 1. Supported attributes of the JSON specification
Attribute Description
componentID The ID of the component where data must be shown or hidden.
attributes An array of attributes where each attribute corresponds to the data that needs to be displayed.
type The type of data that must be displayed. The valid values are list-label-data, list-data, and summary-label-data.
  • list-label-data - displays the key-value pair in a list page.
  • list-data - displays the data value in a list page.
  • summary-label-data - displays the key-value pair in a summary page. The styling will be consistent with other key-value pair in the summary page.
columnId The column number in which the data must be displayed.

The information in a list or summary page is displayed in columns. For example, the shipment status is displayed in the first column. Whereas the expected ship date is displayed in the third column.
data.dataBindingPath The xpath of the binding that is within the entity object. For example, if the Shipment object that is shown in the following sample code needs to display the product description in the application, then the xpath is ItemDetails.PrimaryInformation.Description.
{
  "Shipment": {
    "ItemDetails": {
      "PrimaryInformation": {
        "Description": "test description"
      }
    }
  }
}
label.bundleKey The bundle key of the label that is defined in en.json file.
data.databundleFormatter.bundlekey The bundle key of the data that needs to be formatted by using the en.json file. Use only when data must be formatted dynamically for a bundle entry.
data.databundleFormatter.bundleValues The array of param-value pair that is used for data formatting.
data.databundleFormatter.bundleValues.param The variable name within the bundle value that must be replaced with the actual data.
data.databundleFormatter.bundleValues.value The xpath of the binding within the entity model that must be used for replacing the key in the bundle value.
style The CSS classes that needs to be applied.