Extending data explorer cards

Edit online

Each tab of the Data explorer is a user layout. An administrator can still update cards on a per-tenant level. Data explorer cards are extensible on a per-tenant basis at the layout template or widget definition level. Just like any other page, the cards that the user sees are from the all-tenants ID unless there is a card of the same widgetDefinitionId with the tenantId for that user. Learn how to extend on both levels.

Overview of the Data explorer

The Data explorer has eight layout templates. Eight layout templates become eight user layouts on initial load.

Business object Layout template ID Cards on layout template Referenced filter ID
OrderLine EXPLORER_ORDER_LINE_LAYOUT_TEMPLATE EXPLORER_ORDER_LINE_TABLE ORDER_LINE_FILTER
DemandPlan EXPLORER_DEMAND_PLAN_LAYOUT_TEMPLATE EXPLORER_DEMAND_PLAN_TABLE DEMAND_PLAN_FILTER
Order EXPLORER_ORDER_LAYOUT_TEMPLATE EXPLORER_ORDER_TABLE ORDER_FILTER
Shipment EXPLORER_SHIPMENT_LAYOUT_TEMPLATE EXPLORER_SHIPMENT_TABLE SHIPMENT_FILTER
Inventory EXPLORER_INVENTORY_LAYOUT_TEMPLATE EXPLORER_INVENTORY_TABLE INVENTORY_FILTER
SupplyPlan EXPLORER_SUPPLY_PLAN_LAYOUT_TEMPLATE EXPLORER_SUPPLY_PLAN_TABLE SUPPLY_PLAN_FILTER
Product EXPLORER_PRODUCT_LAYOUT_TEMPLATE EXPLORER_PRODUCT_TABLE PRODUCT_FILTER
Organization EXPLORER_ORGANIZATION_LAYOUT_TEMPLATE EXPLORER_ORGANIZATION_TABLE ORGANIZATION_FILTER

Making tenant-level changes to cards

An administrator can make tenant-level changes to the table cards or filter cards that are listed in the preceding table in two different ways.

  • Option 1: Make tenant-level changes by using widget subscription overrides.
    When to use
    When you want to change a card without branching off completely from the current card's widget definition.
    What can be changed
    • Any visual card property, such as the column name or column value, can be overwritten.
    • Transformation can be overwritten.
    • Query can be overwritten.
    What cannot be changed
    • Adding another query (queries[1].fields)
    • Using customTemplate on a column. For example, columns[0].cell.customTemplate.
    How to use
    Customize value format within a card.
  • Option 2: Make tenant level changes by using the widget definition with the tenant ID.
    When to use
    When you want to make extensive changes to a card, and want to branch off completely.
    What can be changed
    All properties can be changed.
    How to use
    Create a widget definition with the same widget definition ID and your tenant ID as the tenantid.

Making user-level changes to cards by using layout overrides

Each tab is now a user layout. You can make user-level changes to cards by using layout overrides.

When to use
When you want to make extensive changes to a card on a user level.
What can be changed
  • Any visual card property, such as column name and column value, can be overwritten.
  • Transformation can be overwritten.
  • Query can be overwritten.
What cannot be changed
  • Adding another query (queries[1].fields)
  • Using customTemplate on a column (that is, columns[0].cell.customTemplate)
  • Adding a column
How to use
  • To get the layout ID for the tab, look at the network traffic. If you are on the OrderLine tab, you see a GET call to api/v1/wms/layouts/default/for_template?templateId=EXPLORER_ORDER_LINE_LAYOUT_TEMPLATE&createIfNotExists=true. The response in that request has an ID, which is the layout ID for that tab's layout template.
  • Then, make a PUT request to /api/v1/wms/layouts/<layout_id> with the changes you want included in the widgets.

Changing the second column name

The example shows how to change the second column name:
  {
  "templateId": "EXPLORER_DEMAND_PLAN_LAYOUT_TEMPLATE",
  "offeringId": "SCO",
  "state": "ACTIVE",
  "sequence": 0,
  "tenantId": "a5de4a1b-d963-4158-9776-2c56786a7e2a",
  "type": "Explorer",
  "createdDate": "2020-11-12T05:33:18.986Z",
  "creator": "samsmith@ibm.com",
  "lastModifiedDate": "2020-11-12T05:33:18.986Z",
  "lastModifiedBy": "samsmith@ibm.com",
  "widgets": [
        {
            "offeringId": "SCO",
            "tenantId": "<my tenantId>",
            "id": "<widget id from layout>",
            "layoutId": "EXPLORER_DEMAND_PLAN_LAYOUT_TEMPLATE",
            "sequence": 0.0,
            "widgetDefinitionId": "EXPLORER_DEMAND_PLAN_TABLE",
            "name": "Late inbound shipments (estimated)",
            "creator": "samsmith@ibm.com",
            "createdDate": "2021-12-13T16:35:47.851Z",
            "parentWidgetId": "",
            "widgetProperties": {
                 "columns[2].header.label": "LAYOUT OVERRIDE 2"
            },
            "displayProperties": {
                "chartType": "data_table",
                "fullBodyWidget": "true",
                "enabled": "true",
                "section": "layout_body"
            }
        }
  ],
  "defaultLanguage": "en",
  "descriptions": {
    "en": {
      "name": "explorer demand plan",
      "language": "en",
      "description": " explorer demand plan"
    }
  },
  "properties": [
    { "name": "breadcrumbEnabled", "values": ["true"] },
    { "name": "timestampEnabled", "values": ["true"] },
    {
      "name": "ivAssistantEnabled",
      "values": ["false"],
      "metaInformation": "layoutOption"
    }
  ]
}

Adding another attribute to the query

The example shows how to add another attribute to the query and overwrite the last column to show that value. In the example, the value is the (updateReceived,

{
    "id": "<LAYOUT_ID>",
    "offeringId": "SCO",
    "state": "ACTIVE",
    "sequence": 1.0,
    "tenantId": "<tenant_id>",
    "type": "Explorer",
    "createdDate": "2022-02-21T18:11:20.386Z",
    "creator": "samsmith@ibm.com",
    "lastModifiedDate": "2022-02-21T18:11:20.386Z",
    "lastModifiedBy": "samsmith@ibm.com",
    "widgets": [
        {
            "offeringId": "SCO",
            "tenantId": "<tenant_id>",
            "id": "<widget_id>",
            "layoutId": "<layout_id>",
            "sequence": 0.0,
            "widgetDefinitionId": "EXPLORER_ORDER_LINE_TABLE",
            "name": "Order line explorer",
            "creator": "samsmith@ibm.com",
            "createdDate": "2022-02-21T18:11:20.403Z",
            "parentWidgetId": null,
            "widgetProperties": {
                "queries[0].fields": "query OrderLineSearchResults( $tenantId: String $searchFieldsForString: SearchFieldsForStringInput, $cursorId: String, $pageLength: Int = 20, $sortBy: String = \"orderLineIdentifier\", $sortOrder: SortOrder = DESC, $customerNameFilter: BooleanExp = { CONSTANT_VALUE: true }, $customerIDFilter: BooleanExp = { CONSTANT_VALUE: true }, $supplierNameFilter: BooleanExp = { CONSTANT_VALUE: true }, $supplierIDFilter: BooleanExp = { CONSTANT_VALUE: true }, $shipFromLocationNameFilter: BooleanExp = { CONSTANT_VALUE: true }, $shipFromLocationIDFilter: BooleanExp = { CONSTANT_VALUE: true }, $shipToLocationNameFilter: BooleanExp = { CONSTANT_VALUE: true }, $shipToLocationIDFilter: BooleanExp = { CONSTANT_VALUE: true }, $orderTypeFilter: BooleanExp = { CONSTANT_VALUE: true }, $orderStatusFilter: BooleanExp = { CONSTANT_VALUE: true }, $productCategoryFilter: BooleanExp = { CONSTANT_VALUE: true } ) { orderLineSearchResults:businessObjects( hint: { viewId: \"graph\" } simpleFilter: { type: OrderLine, tenantId: $tenantId, searchFieldsForString: $searchFieldsForString }, advancedFilter: { AND: [ $customerNameFilter $customerIDFilter $supplierNameFilter $supplierIDFilter $shipFromLocationNameFilter $shipFromLocationIDFilter $shipToLocationNameFilter $shipToLocationIDFilter $orderTypeFilter $orderStatusFilter $productCategoryFilter ] }, cursorParams: { first: $pageLength, after: $cursorId, sort: { fieldPath: $sortBy, order: $sortOrder } } ) { totalCount pageInfo { hasNextPage endCursor } edges { cursor object { id ... on OrderLine { updateReceived orderLineNumber order { orderIdentifier orderType buyer { name organizationIdentifier } vendor { name organizationIdentifier } shipToLocation { locationName locationIdentifier } shipFromInstructionLocation { locationName locationIdentifier } }  deliveryStatusByDate shipmentStatusByDate orderLineIdentifier status createdDate requestedShipDate plannedShipDate quantity quantityUnits product { name partNumber category { name } } } } } } }",
                "columns[17].header.label": "Update received",
                "columns[17].cell.label": "{{ updateReceived }}",
                "transformation": "{ \"errors\": \"{{#? this.errors}}\", \"pageInfo\": \"{{this.data.orderLineSearchResults.pageInfo}}\", \"totalCount\": \"{{this.data.orderLineSearchResults.totalCount}}\", \"results\": { \"{{#each this.data.orderLineSearchResults.edges}}\": { \"cursor\": \"{{this.cursor}}\", \"id\": \"{{this.object.id}}\", \"status\": \"{{this.object.status}}\", \"shipmentStatusByDate\": \"{{this.object.shipmentStatusByDate}}\", \"deliveryStatusByDate\": \"{{this.object.deliveryStatusByDate}}\", \"orderLineNumber\": \"{{this.object.orderLineNumber}}\", \"orderLineIdentifier\": \"{{this.object.orderLineIdentifier}}\", \"product\": \"{{this.object.product}}\", \"order\": \"{{this.object.order}}\", \"status\": \"{{this.object.status}}\", \"createdDate\": \"{{this.object.createdDate}}\", \"requestedShipDate\": \"{{this.object.requestedShipDate}}\", \"plannedShipDate\": \"{{this.object.plannedShipDate}}\", \"quantity\": \"{{this.object.quantity}}\", \"quantityUnits\": \"{{this.object.quantityUnits}}\", \"updateReceived\": \"{{this.object.updateReceived}}\" } } }"
            },
            "displayProperties": {
                "colSpan": "4",
                "rowSpan": "22",
                "xPos": "0",
                "yPos": "0",
                "chartType": "data_table",
                "section": "layout_body",
                "enabled": "true",
                "fullBodyWidget": "true"
            }
        }
    ],
    "defaultLanguage": "en",
    "description": {
        "name": "Order lines",
        "language": "en",
        "description": "Search results for order lines"
    },
    "descriptions": null,
    "properties": [
        {
            "name": "breadcrumbEnabled",
            "metaInformation": "layoutOption",
            "values": [
                "true"
            ]
        },
        {
            "name": "breadcrumbList",
            "metaInformation": "layoutOption",
            "values": [
                "{\"label\": \"COMMON.DATA_EXPLORER\", \"routeName\": \"/static/explorer\"}"
            ]
        },
        {
            "name": "ivAssistantEnabled",
            "metaInformation": "layoutOption",
            "values": [
                "true"
            ]
        }
    ],
    "version": 1,
    "templateId": "EXPLORER_ORDER_LINE_LAYOUT_TEMPLATE",
    "default": false
}

Making tenant-level changes to tabs

Note: This change removes any user-level changes that the user made.
When to use
When you want to make template-level changes to a tab on a tenant level so that all users on the same tenant ID see it.
What can be changed
  • What cards are shown on the tab
  • Sizing of cards on the tab
  • Any other page-level changes
How to use
Each tab is a layout template. So, if an administrator wants to change the layout template, they can create a copy of the layout template that uses their own tenant ID. Then, the layout template returns instead of the one for all tenants.

Making user-level changes to a tab

When to use
When you want to make template level changes to a tab for only the logged in user.
What can be changed
  • What cards are shown on the tab
  • Sizing of cards on the tab
  • Any other page-level changes
How to use
  • Each tab is a layout template, which then becomes a user layout when the user logs in. This user layout can be updated only by using the API.
  • Make a PUT request to /api/v1/wms/layouts/<layout_id>.
  • To get the layout ID for the tab, look at the network traffic. If you are on the OrderLine tab, you see a GET call to api/v1/wms/layouts/default/for_template?templateId=EXPLORER_ORDER_LINE_LAYOUT_TEMPLATE&createIfNotExists=true. The response in that request has an ID, which is the layout ID for that tab's layout template.

Adding another tab

Note: This change does not add a tab to the search because the search is based on the business object. Contact an administrator about requesting enhancements to search.
When to use
When you want to add another tab to the Data explorer.
What can be changed
  • What cards are shown on the tab
  • Sizing of cards on the tab
  • Any other page-level changes
How to use
You can create a layout template with type "Explorer". This layout template is returned with the other tabs. You can add whatever you want to this layout template.

Adding another type tab

The example shows how to add another type:

{
  "id": "EXPLORER_ANOTHER_TYPE_LAYOUT_TEMPLATE",
  "offeringId": "SCO",
  "state": "ACTIVE",
  "sequence": 5,
  "tenantId": "<tenant_id>",
  "type": "Explorer",
  "identifier": "EXPLORER_ANOTHER_TYPE_LAYOUT_TEMPLATE",
  "createdDate": "2020-11-09T15:04:40.270Z",
  "creator": "uihub_preload@ibm.com",
  "lastModifiedDate": "2020-11-09T15:04:40.270Z",
  "lastModifiedBy": "uihub_preload@ibm.com",
  "widgets": [
    {
      "id": "EXPLORER_ANOTHER_TYPE_TABLE",
      "layoutId": "EXPLORER_ANOTHER_TYPE_LAYOUT_TEMPLATE",
      "sequence": 0,
      "widgetDefinitionId": "EXPLORER_ANOTHER_TYPE_TABLE",
      "name": "Another type explorer",
      "creator": "uihub_preload@ibm.com",
      "createdDate": "2020-08-26T19:58:22.154Z",
      "parentWidgetId": null,
      "widgetProperties": {},
      "displayProperties": {
        "colSpan": "4",
        "rowSpan": "22",
        "xPos": "0",
        "yPos": "0",
        "chartType": "data_table",
        "section": "layout_body",
        "enabled": "true",
        "fullBodyWidget": "true"
      }
    }
  ],
  "defaultLanguage": "en",
  "descriptions": {
    "en": {
      "name": "Another type",
      "language": "en",
      "description": "Search results for another type"
    }
  },
  "properties": [
    {
      "name": "breadcrumbEnabled",
      "values": ["true"],
      "metaInformation": "layoutOption"
    },
    {
      "name": "breadcrumbList",
      "values": [
        "{\"label\": \"COMMON.DATA_EXPLORER\", \"routeName\": \"/static/explorer\"}"
      ],
      "metaInformation": "layoutOption"
    },
    {
      "name": "ivAssistantEnabled",
      "values": ["true"],
      "metaInformation": "layoutOption"
    }
  ],
  "version": 1
}