Edit in GitHubLog an issue

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.

Copied to your clipboard
product: {
gridColumns: {
data: {
meshId: 'MESH_ID',
apiKey: 'API_KEY'
},
properties:[
{
label: 'App Column',
columnId: 'first_column',
type: 'string',
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.

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.

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

FieldTypeRequiredDescription
data.apiKey
string
Yes
The API key assigned to the GraphQL mesh.
data.meshId
string
Yes
The ID of the mesh used to retrieve the column data.
properties.align
string
Yes
The alignment of the values in the column. One of left, right, center.
properties.columnId
string
Yes
The identifier used in the external dataset to identify the column.
properties.label
string
Yes
The label of the column to display.
properties.type
string
Yes
The data type of the values in the column. Supported values: boolean, date, float, integer, string. Date values must be ISO 8601-compliant.

Sample code

The Adobe Commerce Extensibility Code Samples repository demonstrates how to customize product grid columns.

  • Privacy
  • Terms of Use
  • Do not sell or share my personal information
  • AdChoices
Copyright © 2024 Adobe. All rights reserved.