Adding summary fields to existing detail pages

Understand and learn the buc-field-details.json syntax that defines the fields that are displayed in the Summary panel of the details pages. For example, you can add fields such as Item group code in an order or SCAC code for a shipment.

JSON file locations

Update or create the JSON file within the module's src-custom/assets/custom folder. For example, packages/<route>/src-custom/assets/custom/buc-field-details.json.

If there are no additional customizations required other than the changes in the JSON file, the JSON file does not need to be associated to any route. Instead, create the JSON file under packages/<app>-root-config/src/assets/custom/buc-field-details.json. Doing so ensures that future Order Hub releases are automatically applied without manually synchronizing your customization code.
Note: This approach does not require updating routes in the package-customization.json file during deployment.

JSON syntax

The main JSON body contains uniquely defined object attributes that map to different detail pages.
  • For Orders-related pages:
    • order-summary: The object name for the Summary section on the Order details page.
    • orderline-summary: The object name for the Summary section on the Order line details page.
    • order-audit-summary: The object name for the Summary section on the Order audit details page.
    • order-receipt-summary: The object name for the Summary section on the Order receipt details page.
    • orderrelease-summary: The object name for the Summary section on the Order release details page.
  • For Shipments-related pages:
    • shipment-summary: The object name for the Summary section on the Shipment details page.
    • shipmentline-summary: The object name for the Summary section on the Shipment line details page.
    • shipment-container-summary: The object name for the Summary section on the Shipment container details page.
  • For Exception-related pages:
    • exception-summary: The object name for the Summary section on the Exceptions details page.
  • For Inventory-related pages:
    • inv-audit-summary: The object name for the Summary section on the Inventory audit details page.
  • For Alerts-related pages:
    • alert-details-summary: The object name for the Summary section on the Alert details page.
  • Each object contains attributes to define the data to display in the Summary section.
    name
    A unique name to identify the set of attributes.
    id
    The unique ID of the field. Components can refer to a field by this property.
    name
    The label text to display. If text is translated, you can add the translation files into the i18n folder and reference the label. For example, 
    "name": "SHARED.GENERAL.LABEL_ORDER_#",

    The sample retrieves the text to display from the i18n folder and finds the attribute that matches SHARED.GENERAL.LABEL_ORDER_#.

    dataBinding
    The attribute to retrieve from the API response (in dot-notation) and display as the value. For example, 
    orderLineDetails.Item.ItemID
    The attribute must exist in the getPage-templates.json. Update the file if the attribute does not exist. For more information, see Configuring the getPage API to retrieve additional data.
    value
    (Optional) The value of the field. Use this attribute to hardcode a value. Otherwise, use the dataBinding attribute to map the field to the API response.
    attrTID
    (Optional) A tag value that you can use to easily identify the UI element for automated testing purposes.
    type
    (Optional) The type of element. Possible values include:
    • textbox
    • label
    • dropdown
    • combobox
    • datepicker
    If the type of element that you implement is an editable field, it requires the options attribute with editPermission and editAttr values.
    options
    (Optional) Specify the options if you are using any of the "type" attributes.
    editPermission
    An allowed modification type for the item/entity being updated. For more information, see Order modification types.
    Note: If you are using 10.0.2403.2 or later and have pages that do not have allowed modification types, use ALWAYS_ALLOW as the value.
    editAttr
    The name of the attribute to update if the user selects a different value from the drop down menu. This attribute will be specified in the Update API request when the user clicks Save in the user interface.
    fetch
    The fetch object defines the values to retrieve from IBM® Sterling™ Order Management System Software APIs and to display in the drop down. For information about the APIs, see Generating and accessing Javadoc .
    • api: The API to call.
    • type: The type of API. For customization purposes, the value must be oms.
    • parameters: The parameters to pass in the API request.
    • listAttribute: The attribute to retrieve from the API response.
    • id: Sets the id as the values of the response.
    • label: The field to use to populate the values in the drop down menu.
    formatter
    Format the data in the column. Each formatter is an object with different properties. The type property identifies the type of formatter. Supported type values are currency, dateTime, and quantity. To use the formatter attribute, you must omit the dataBinding attribute and instead specify the binding in the formatter.value attribute.
    type: currency
    • value: The attribute to retrieve from the API response and display in the column.
    • currencyCode: (Optional) The currency code to use when formatting the value. The currency code is also fetched from a property in the API response.
    Example:
      "formatter": {
    "type": "currency",
    "value": "PriceInfo.TotalAmount",
    "currencyCode": "PriceInfo.Currency"
  }
    type: dateTime
    • value: The attribute to retrieve from the API response and display in the column.
    • dateFormat: (Optional) The data format to use. Refer to the Moment JS library for formatting options. Default is L LT.
    Example:
      "formatter": {
    "type": "dateTime",
    "value": "PriceInfo.ReportingConversionDate",
    "dateFormat": "L"
  }
    type: quantity
    • value: The attribute to retrieve from the API response and display in the column.
    Example:
      "formatter": {
    "type": "quantity",
    "value": "OrderedQty"
  }

JSON example

The following example provides some use cases with different field types.
{
    "orderline-summary": {
        "name": "orderline-summary",
        "attributes": [
            {
                "id": "orderLineKey",
                "name": "Order line key",
                "value": "",
                "attrTID": "ordLineDetails - orderLineKey",
                "type": "label",
                "dataBinding": "OrderLineKey"
            },
            {
                "id": "serialNo",
                "name": "Serial number",
                "value": "",
                "attrTID": "ordLineDetails - serialNo",
                "type": "textbox",
                "dataBinding": "SerialNo",
                "options": {
            	"editPermission": "OTHERS",
            	"editAttr": "SerialNo"
            		}
            },
            {
            	"id": "reqShipDate",
            	"name": "Requested ship date",
            	"attrTID": "ordLineDetails - reqShipDate",
            	"type": "datepicker",
            	"dataBinding": "ReqShipDate",
            	"options": {
            		"editPermission": "REQ_SHIP_DATE",
            		"editAttr": "ReqShipDate"
            		}
            },
            {
            	"id": "fulfillmentType",
            	"name": "Fulfillment type",
            	"value": "",
            	"attrTID": "ordLineDetails - fulfillmentType",
            	"type": "dropdown",
            	"dataBinding": "FulfillmentType",
            	"options": {
            		"editPermission": "OTHERS",
            		"editAttr": "FulfillmentType",
            		"fetch": {
            			"api": "getCommonCodeList",
            			"type": "oms",
            			"parameters": {
            				"CallingOrganizationCode": "Sales2",
            				"CodeType": "FULFILLMENT_TYPE"},
            			"response": {
            				"listAttribute": "CommonCode",
            				"map": {
            				"id": "CodeValue",
            				"label": "CodeShortDescription"
            				}
            			}
            		}
            	}
            },
            {            	"id": "deliveryMethod",
            	"name": "Delivery method",
            	"value": "",
            	"attrTID": "ordLineDetails - deliveryMethod",
            	"type": "combobox",
            	"dataBinding": "DeliveryMethod",
            	"options": {
            		"editPermission": "OTHERS",
            		"editAttr": "DeliveryMethod",
            		"fetch": {
            			"api": "getCommonCodeList",
            			"type": "oms",
            			"parameters": {
            				"CallingOrganizationCode": "Sales2",
            				"CodeType": "DELIVERY_METHOD"},
            			"response": {
            				"listAttribute": "CommonCode",
            				"map": {
            				"id": "CodeValue",
            				"label": "CodeShortDescription"
            				}
            			}
            		}
            	}
            }		
        ]
    }
}

User interface example

The following image illustrates the Order line outbound search page after uploading the JSON example to IBM.
Screen shot displaying the Outbound order line summary page. The summary panel is open and the new with summary fields are highlighted with a red box. New fields include Item ID, ItemGroupCode,Order Header Key, and Unit price.