How to customize left pane with attributes

Prev Next

You can customize the left pane of PDP/ADP to display the required product/asset attributes.

The left pane displays the following:

  • The first half of the left pane displays product thumbnail, Product Name, Type, and

  • The second half of the left pane displays the overall Business KPI Score of the product, product status, and configurable attributes.

For more information, see Overview of PDP.

Out-of-the-box, the following default attributes are displayed in the left pane along with Business KPI Score and Status for PDP (Thing domain) and ADP (Digital Asset domain).

Thing

Digital Asset

  • GTIN

  • Product Taxonomy

  • Created By

  • Created On

  • File Size

  • Created By

  • Created On

Sample JSON configuration

Sample JSON to customize the left pane for the Thing domain.

{
  "metaInfo": {
    "dataIndex": "config",
    "collectionName": "configObjects",
    "responseObjectName": "response"
  },
  "configObjects": [
    {
      "id": "rock-product-details-sidebar_thing_commerceUXConfig",
      "name": "rock-product-details-sidebar_thing",
      "version": "1.0",
      "type": "commerceUXConfig",
      "properties": {
        "createdByService": "system",
        "createdBy": "system"
      },
      "data": {
        "contexts": [
          {
            "context": {
              "component": "rock-product-details-sidebar",
              "domain": "thing",
              "app": "_DEFAULT",
              "dockingPanel": "_DEFAULT",
              "entityType": "_DEFAULT",
              "relationship": "_DEFAULT",
              "role": "_DEFAULT",
              "user": "_DEFAULT"
            },
            "jsonData": {
              "config": {
                "headerConfig": {
                  "pstdgtin": {
                    "visible": true,
                    "displaySequence": 10,
                    "attributeName": "pstdgtin",
                    "label": "{model.externalName}"
                  },
                  "pstcolor": {
                    "attributeName": "pstdcolor",
                    "label": "{model.externalName}",
                    "visible": true,
                    "displaySequence": 20
                  },
                  "createdBy": {
                    "attributeName": "createdBy",
                    "label": "{model.externalName}",
                    "isPropertyAttribute": true,
                    "visible": true,
                    "displaySequence": 30
                  },
                  "createdDate": {
                    "attributeName": "createdDate",
                    "label": "{model.externalName}",
                    "isPropertyAttribute": true,
                    "visible": true,
                    "displaySequence": 40
                  }
                },
                "statusConfig": {
                  "visible": true
                },
                "kpiProgressConfig": {
                  "visible": true
                }
              }
            }
          }
        ]
      }
    }
  ]
}

To customize left pane with attributes:

  1. Download the attached JSON file.

rock-product-details-sidebar_thing_commerceUXConfig
2.25 KB
  1. Open the rock-product-details-sidebar_thing_commerceUXConfig.json file and specify the following:

Parameters

Details

context

component

Specify the name of the component to be configured.

domain

Specify the domain for which the left pane is to be configured. For example, thing or digitalAsset.

entityType

Specify the entity type for which the component is to be configured, else _DEFAULT.

role

Specify the role for which the component is to be configured, else _DEFAULT.

user

Specify the user for which the component is to be configured, else _DEFAULT.

Note: By default, _DEFAULT is specified for role and user parameters, which implies the component is configured for all roles and users.

config

Specify the following.

headerConfig

Specify the attributes that must be displayed in the left pane by defining attributeName, label, displaySequence, and visible properties:

  • visible: By default, the value is set to true.

    • true - implies the attribute is displayed in the left pane.

    • false - implies the attribute is hidden in the left pane.

statusConfig

By default, a status attribute is displayed in PDP. Also, you can manage the visibility of the Status attribute.

  • visible: By default, the value is set to true.

    • true - implies the attribute is displayed in the left pane.

    • false - implies the attribute is hidden in the left pane.

kpiProgressConfig

By default, the Business KPI Score is displayed in PDP. Also, you can manage visibility of Business KPI Score.

  • visible: By default, the value is set to true.

    • true - implies the attribute is displayed in the left pane.

    • false - implies the attribute is hidden in the left pane.

  1. Upload the JSON configuration file in the Classic UI. For more information, see How to upload UI Configurations.

    In PDP, the left pane displays the attributes based on the configuration.

    ui-configurations-adp-sidepanel.png