Adding fields to the Data fields configuration page

Edit online

Under Settings > Display settings, a tenant administrator can configure to show or hide fields within the user interface for all users.

You can customize Data fields to control other fields at the tenant level. For example,

IBM provides a Seller field on the Order details page. Assume that your business does not use the field or does not want it displayed. You can add Seller to this configuration page and then a tenant administrator can enable or disable the field for all users.
Developers can add custom summary fields and custom table columns by customizing JSON files. You can add the custom fields to this configuration page so that a tenant administrator can enable or disable the field for all users.

To display options within the Data fields configuration, you first need to understand and learn the buc-tenant-config.json syntax.

Table of contents

JSON file location
JSON example
JSON syntax
User interface example

JSON file location

Update or create the buc-tenant-config.json within the module's buc-app-settings/packages/settings-configurations/src-custom/assets/custom folder.

JSON syntax

The attributes array includes two entries.

"id": "global" defines the fields to show within the Global fields section.
"id": "pageLevel" defines the fields to show within the B2B - related fields section.

You only need to update the Fields properties inside the mentioned entries.

Fields properties

id

The id of the field that you want to add. You can find the id by browsing through the Order Hub user interface and checking the browser's network tab.

To find Summary field IDs, review the buc_field_details.json file.
To find Table column IDs, review the buc-table-config.json file.
To find Search field IDs, review the search_fields.json file.

For example, to add the Ship node field, you need to use

"id":
"shipNode"

Browser network tab shows the response for the buc-field-details.json file.

Note: If you are adding a custom summary field of custom table column, this value must correspond to the id that you defined in the buc-table-config.json or buc_field_details.json customization files. You might not have access to see the customized files within the browser network tab. Refer to your source code for the IDs.

label

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,

"label": "SHARED.GENERAL.LABEL_shipNode",

tooltipMsg

Text to display as a tooltip beside the field. If text is translated, you can add the translation files into the i18n folder and reference the label.

fields

Within the fields array, you can also define a child fields array. If you want the setting to apply to all pages, then you can omit the child fields array. If you want to allow a tenant administrator to show or hide the setting on specific pages, define a child fields array.

Note: If you are adding Search field IDs, Search fields is only supported through global settings. You cannot add child fields to show or hide the setting on specific pages.

Within the child fields array, you can define the follow properties:

id

The object name of the page or section where the field exists. You can find the id by browsing through the Order Hub user interface and checking the browser's network tab.

For example, the Ship node field appears on both the Shipments table and on the Order line details page. To control the Ship node field on the Shipments table, find the id by reviewing the browser's network tab. You can see that the id is "id": "ord-detail-shipment-table".

label

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,

"label": "TEXT_ORDER_DETAILS_SHIPMENT_TABLE",

type

Defines whether the field is a summary field or a table column. Valid values are summary or table. For example, for the shipNode field in the table, you would use "type": "table".

JSON example

The following example provides some use cases.

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.

{
"configuration-data": {
	"name": "configuration-data",  //Defines customization for the Data fields section. Do not change.
	"attributes": [
	{
		"id": "global",   //Defines the custom fields to display under the "Global fields" section
		"label": "SETTINGS.CONFIG.TEXT_GLOBAL_FIELDS",   
		"fields": [
		{
			"id": "customized",   // 1  Add a customized field as an option to show or hide
			"label": "Customized Field",
			"tooltipMsg": "Available for customized fields"
                    //No child "fields" array therefore this setting applies to all pages where "customized" exists.
		}]
	},
	{
		"id": "pageLevel",   //Defines the custom fields to display on the "B2B -related fields" section
		"label": "SETTINGS.CONFIG.TEXT_B2B_FIELDS",
		"fields": [
		{
			"id": "shipNode",   // 2  Add the "Ship Node" field as an option to show or hide
			"label": "SHARED.GENERAL.LABEL_shipNode",
			"fields": [           //Specify the different pages where the field exists
			{
				"id": "ord-detail-shipment-table",
				"label": "TEXT_ORDER_DETAILS_SHIPMENT_TABLE",
				"type": "table"
			},
		      {
				"id": "order-summary",
				"label": "Order line details: Summary",
				"type": "summary"
			}]
		}]
	}]
}}

User interface example

The following image illustrates the Data fields page with the fields as configured in the JSON file.