Adding summary fields to existing detail pages

Edit online
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.
Table of contents

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
    options
    (Optional) Specify the options for the drop down if you are using "type":"dropdown".
    editPermission
    An allowed modification type for the item/entity being updated. For more information, see Order modification types
    If empty, editing is allowed but the subsequent save might not work if the backend disallows it.
    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 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.
Note: The following example includes inline comments as a guide to explain the attributes while you analyze the code. Since JSON does not support comments, this is not a valid JSON sample as displayed. If you plan to copy this sample, ensure that you remove the inline comments. 
{
    "orderline-summary": { //Adding fields to the Order line summary section
        "name": "orderline-summary",
        "attributes": [
            {
                "id": "itemID",
                "name": "Item ID",
                "value": "",
                "attrTID": "ordLineDetails - ItemID",
                "type": "label",
                "dataBinding": "orderLineDetails.Item.ItemID"
            },
            {
                "id": "itemGroupCode",
                "name": "ItemGroupCode",
                "value": "",
                "attrTID": "ordLineDetails - ItemGroupCode",
                "type": "label",
                "dataBinding": "orderLineDetails.ItemGroupCode"
            },
            {
                "id": "orderHeaderKey",
                "name": "Order Header Key",
                "value": "",
                "attrTID": "ordLineDetails - orderHeaderKey",
                "type": "label",
                "dataBinding": "orderLineDetails.Order[0].OrderHeaderKey"
            },
            {
                "id": "UnitPrice",
                "name": "UnitPrice",
                "value": "",
                "attrTID": "ordLineDetails - UnitPrice",
                "type": "label",
                "dataBinding": "orderLineDetails.LineOverallTotals.UnitPrice"
            },
            {
            	"id": "currency",
            	"name": "Currency",
            	"value": "",
            	"attrTID": "orderDetails  - Currency",
            	"type": "dropdown",
            	"dataBinding": "PriceInfo.Currency",
            	"options": {
            	  "editPermission": "",          //Empty so Order hub assumes you can edit the currency
            	  "editAttr": "PriceInfo.Currency",  //If user changes the value in the dropdown, the PriceInfo.Currency attribute is updated
            	  "fetch": {          //Identify that the dropdown options need to be fetched
            		  "api": "getCurrencyList",   //Fetch dropdown options from getCurrencyList api
            		  "type": "oms",   //Must be "oms" to fetch from Sterling Order Management API.
            		  "parameters": {},  //Parameters to pass to getPaymentTypeList call. In this case, no parameters needed
.            		  "response": {  
            			"listAttribute": "Currency",  //Retrieve the 'Currency' from the response
            			"map": {
            			  "id": "Currency",  //Sets the id to the values of the Currency response
            			  "label": "CurrencyDescription" //Sets the dropdown options to the values of the CurrencyDescription response
            			}
            		  }
            	  }
            	}
            },
            {
            	"id": "paymentStatus",
            	"name": "Payment Status",
            	"value": "",
            	"attrTID": "orderDetails  - paymentStatus",
            	"type": "dropdown",
            	"dataBinding": "PaymentStatus",
            	"options": {
            		"editPermission": "PAYMENT_STATUS",  //Check PAYMENT_STATUS modification type to verify whether payment status is an allowed modification
            		"editAttr": "PaymentStatus",
            		"fetch": {
            			"api": "getPaymentStatusList",
            			"type": "oms",
            			"parameters": {},
            			"response": {
            				"listAttribute": "PaymentStatus",
            				"map": {
            				"id": "CodeType",
            				"label": "Description"
            				}
            			}
            		}
            	}
            }		
        ]
    }
}

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.