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.
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,
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.orderLineDetails.Item.ItemID
- 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".
- 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 arecurrency
,dateTime
, andquantity
. 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.
- 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
.
- type: quantity
-
- value: The attribute to retrieve from the API response and display in the column.
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.