product grid columns

The product grid columns extension point enables you to add columns to the grid on the Catalog > Products page in the Adobe Commerce Admin. This extension point requires an API Mesh for Adobe Developer App Builder instance to retrieve the data to be added to the custom columns.

You can use the aio api-mesh:describe command to retrieve the values of the API key and mesh ID. The key is appended to the mesh endpoint URL.

Example customization

​The following example creates custom columns labeled First App Column and Second App Column.

Copy
product: {
    getGridColumns() {
        return {
            data:{
                meshId:'MESH_ID',
                apiKey: 'API_KEY'
            },
            properties:[
                {
                    label: 'First App Column',
                    columnId: 'first_column',
                    type: 'string',
                    align: 'left'
                },
                {
                    label: 'Second App Column',
                    columnId: 'second_column',
                    type: 'integer',
                    align: 'left'
                }
            ]
        }
    }
}
Copied to your clipboard
product: {
    getGridColumns() {
        return {
            data:{
                meshId:'MESH_ID',
                apiKey: 'API_KEY'
            },
            properties:[
                {
                    label: 'First App Column',
                    columnId: 'first_column',
                    type: 'string',
                    align: 'left'
                },
                {
                    label: 'Second App Column',
                    columnId: 'second_column',
                    type: 'integer',
                    align: 'left'
                }
            ]
        }
    }
}

Sample API Mesh configuration file

The following sample mesh configuration file defines the external source that contains the data to populate in the custom columns.

Copy
{
    "meshConfig": {
        "sources": [
            {
                "name": "products",
                "handler": {
                    "JsonSchema": {
                        "baseUrl": "https://www.example.com",
                        "operations": [
                            {
                                "type": "Query",
                                "field": "products",
                                "path": "/graphql",
                                "method": "GET",
                                "responseSchema": "./schema.json"
                            }
                        ]
                    }
                }
            }
        ]
    }
} 
Copied to your clipboard
{
    "meshConfig": {
        "sources": [
            {
                "name": "products",
                "handler": {
                    "JsonSchema": {
                        "baseUrl": "https://www.example.com",
                        "operations": [
                            {
                                "type": "Query",
                                "field": "products",
                                "path": "/graphql",
                                "method": "GET",
                                "responseSchema": "./schema.json"
                            }
                        ]
                    }
                }
            }
        ]
    }
} 

Sample schema file

This sample schema.json file is referenced in the mesh configuration file. It defines the response of the external productGridColumns query that fetches column data.

Copy
{
    "$schema": "http://json-schema.org/draft-04/schema#",
    "type": "object",
    "properties": {
      "productGridColumns": {
        "type": "object",
        "patternProperties": {
          "^0": {
            "type": "object",
            "properties": {
              "first_column": {
                "type": "string"
              },
              "second_column": {
                "type": "integer"
              },
              "third_column": {
                "type": "integer"
              }
            }
          }
        }
      }
    },
    "required": [
      "productGridColumns"
    ]
}
Copied to your clipboard
{
    "$schema": "http://json-schema.org/draft-04/schema#",
    "type": "object",
    "properties": {
      "productGridColumns": {
        "type": "object",
        "patternProperties": {
          "^0": {
            "type": "object",
            "properties": {
              "first_column": {
                "type": "string"
              },
              "second_column": {
                "type": "integer"
              },
              "third_column": {
                "type": "integer"
              }
            }
          }
        }
      }
    },
    "required": [
      "productGridColumns"
    ]
}

Parameters

Last updated 11/29/2023

Was this helpful?

Yes

No