> For the complete documentation index, see [llms.txt](https://docs.gridmate.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gridmate.io/package-reference/components-library/gm-kanban-board.md).

# GM - Kanban Board

(gmpkg:kanbanStageListLWC)

**Use case:** Display opportunity Kanban board based on the opportunity object. See [**GM - Kanban Board**](/product-tour/kanban-board.md).

<table data-full-width="true"><thead><tr><th width="196.98297119140625">Property</th><th width="139.61517333984375">Type</th><th>Description</th></tr></thead><tbody><tr><td>Custom Label</td><td>String</td><td>Set the label of the kanban.</td></tr><tr><td>Custom Icon</td><td>String</td><td>Customize the kanban icon. All lightning icons are supported.</td></tr><tr><td>Object Name</td><td>String</td><td>The name of the object to display (e.g., Opportunity).</td></tr><tr><td>Target Object Name</td><td>String</td><td>The name of the object to display if the kanban is shown on a record page.</td></tr><tr><td>Stage Field</td><td>String</td><td>The stage field to use for the kanban. It can be a picklist or a lookup field. With a lookup, each related record is a column, and its Name is the column header.</td></tr><tr><td>Stage Values</td><td>String</td><td>JSON string defining the subset of stage values to use within the kanban. For a lookup Stage Field, a JSON array of 18-character record Ids.</td></tr><tr><td>Stage Filter</td><td>String</td><td>Only used when the Stage Field is a lookup. JSON string to filter which records are used as stage columns. Ex. <code>{'Industry':{'operator':'=','value':'Hospitality'}}</code></td></tr><tr><td>Stage Sort</td><td>String</td><td>Only used when the Stage Field is a lookup. The field to sort the stage columns. Don’t forget __c for custom fields.</td></tr><tr><td>Stage Order</td><td>String</td><td>Only used when the Stage Field is a lookup. Asc or Desc order for sorting the stage columns.</td></tr><tr><td>Stage Row Limit</td><td>Integer</td><td>Only used when the Stage Field is a lookup. The maximum number of stage columns to fetch. The default value is 50.</td></tr><tr><td>Title Field</td><td>String</td><td>The title field to use for each kanban card's title.</td></tr><tr><td>Object Fields</td><td>String</td><td>A comma-separated list of detail fields for the cards.</td></tr><tr><td>Row Limit</td><td>Integer</td><td>The maximum number of rows to fetch from the specified object. The default value is 1000.</td></tr><tr><td>Filter</td><td>String</td><td>JSON string defining filter criteria. Ex. <code>{'StageName':'Needs Analysis'}</code>. The admin filter, the end-user filter and the search are combined with AND.</td></tr><tr><td>Sort</td><td>String</td><td>The field list to sort the data.</td></tr><tr><td>Order</td><td>String</td><td>Ascending or descending order for sorting.</td></tr><tr><td>Enable Create Object</td><td>Boolean</td><td>Check to enable the creation of new objects from the kanban.</td></tr><tr><td>Enable Update Object</td><td>Boolean</td><td>Check to enable updates to existing objects.</td></tr><tr><td>Enable Mass Update</td><td>Boolean</td><td>Check to allow bulk updates to existing objects.</td></tr><tr><td>Enable Delete Object</td><td>Boolean</td><td>Check to allow deletion of objects from the kanban.</td></tr><tr><td>Enable Mass Delete</td><td>Boolean</td><td>Check to allow bulk deletion of objects.</td></tr><tr><td>Enable Card Ordering</td><td>Boolean</td><td>Check this option if you want to enable card ordering.</td></tr><tr><td>Reorder Field</td><td>String</td><td>Field API name used to persist card order within a stage (e.g. KanbanSortOrder__c). If not set, order is saved in the browser's local storage.</td></tr><tr><td>Disable End-User Filter</td><td>Boolean</td><td>Check this option to hide the end-user Filter panel toggle. The default value is unchecked.</td></tr><tr><td>Aggregate</td><td>String</td><td>JSON string to define aggregate fields. Ex. <code>{'Amount':'sum','CloseDate':'min'}</code>. Operators: sum, min, max, avg. min, max and avg also work on Date and Date/Time fields. Totals are shown for the board, each column and each group.</td></tr><tr><td>Group By</td><td>String</td><td>Field API name to sub-group cards by within each stage. Cards with no value are grouped under Empty.</td></tr><tr><td>Collapse Groups</td><td>Boolean</td><td>Check this option to collapse all sub-groups by default. When unchecked, sub-groups are expanded by default. The default value is unchecked.</td></tr><tr><td>Search Fields</td><td>String</td><td>',' separated list of text fields to search (server-side, contains). The search box is hidden when empty.</td></tr><tr><td>Actions</td><td>String</td><td>JSON string to initialize the list of available actions, The Kanban Board supports Quick Actions, Global Actions, and calling Flows.</td></tr><tr><td>Show Actions as Buttons</td><td>Boolean</td><td>Use buttons for actions instead of icons.</td></tr><tr><td>Custom Visible Actions</td><td>Integer</td><td>Number of visible custom actions.</td></tr><tr><td>Record Actions</td><td>String</td><td>JSON string to initialize the list of available record actions.</td></tr><tr><td>Stage States</td><td>String</td><td>JSON Stage States configuration to control the behavior when the user move a card.</td></tr><tr><td>Popover Fields</td><td>String</td><td>Popover Fields to display</td></tr><tr><td>Popover Columns #</td><td>Integer</td><td># Of Popover Columns</td></tr><tr><td>Card Coloring</td><td>String</td><td>JSON conditions for card coloring based on defined metrics.</td></tr><tr><td>Show Border</td><td>Boolean</td><td>Check this option to add a border to the kanban.</td></tr><tr><td>Density</td><td>String</td><td>Component density: comfy or compact. Compact cards show only the title, click a card to show its fields. The default value is comfy.</td></tr><tr><td>Board Height</td><td>Integer</td><td>Set the board height in px. Use 9999 for dynamic height.</td></tr></tbody></table>

{% code fullWidth="true" %}

```xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>65.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>GM - Kanban Board</masterLabel>
    <description>GM - Kanban Board</description>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage,lightning__RecordPage,lightning__HomePage">
            <property
                name="displayLabel"
                type="String"
                label="Custom Label"
                description="Set the label of the kanban"
            />
            <property
                name="customIcon"
                type="String"
                label="Custom Icon"
                description="Customize the kanban icon. All lightning icons are supported. You can get the icon name from https://lightningdesignsystem.com/icons/"
            />

            <property
                name="objectApiName"
                type="String"
                label="Object Name"
                description="The name of the object to display. Ex. Opportunity."
            />
            <property
                name="sobjectName"
                type="String"
                label="Target Object Name"
                description="The name of the object to display if the kanban is displayed on a record page. Ex. Opportunity."
            />
            <property
                name="stageField"
                type="String"
                label="Stage Field"
                description="The stage field to use for the kanban"
            />
            <property
                name="stageValues"
                type="String"
                label="Stage Values"
                description="JSON stage values. The subset of values to use."
            />
            <property
                name="stageFilterBy"
                type="String"
                label="Stage Filter"
                description="Only used when the Stage Field is a lookup. Json string to filter which records are used as stage columns. Ex. {'Industry':{'operator':'=','value':'Hospitality'}}"
            />
            <property
                name="stageSortField"
                type="String"
                label="Stage Sort"
                description="Only used when the Stage Field is a lookup. The field to sort the stage columns. Don’t forget __c for custom fields."
            />
            <property
                name="stageSortOrder"
                type="String"
                label="Stage Order"
                description="Only used when the Stage Field is a lookup. Asc or Desc order for sorting the stage columns."
            />
            <property
                name="stageRowLimit"
                type="Integer"
                label="Stage Row Limit"
                description="Only used when the Stage Field is a lookup. The maximum number of stage columns to fetch. Default 50."
                default="50"
            />
            <property
                name="titleField"
                type="String"
                label="Title Field"
                description="The title field to use for the card title"
            />
            <property
                name="jsonObjectFields"
                type="String"
                label="Object Fields"
                description="',' separated list of detail fields"
            />

            <property
                name="rowLimit"
                type="Integer"
                label="Row Limit"
                description="The maximum number of row to fetch"
                default="1000"
            />
            <property
                name="filterBy"
                type="String"
                label="Filter"
                description="Json string to define filter criteria. Don’t forget __c for custom fields. Ex. {'StageName':'Needs Analysis'} to see only 'Needs Analysis' Opportunities"
            />
            <property
                name="sortBy"
                type="String"
                label="Sort"
                description="The field list to sort the data. Don’t forget __c for custom fields. Ex. Amount to sort opportunities by amount"
            />
            <property name="orderBy" type="String" label="Order" description="Asc or Desc order for sorting" />

            <property
                name="canCreate"
                type="Boolean"
                label="Enable Create Object"
                description="Check this option if you want to create object"
            />

            <property
                name="canEdit"
                type="Boolean"
                label="Enable Update Object"
                description="Check this option if you want to update object"
            />

            <property
                name="canMassUpdate"
                type="Boolean"
                label="Enable Mass Update"
                description="Check this option if you want to mass update"
            />

            <property
                name="canDelete"
                type="Boolean"
                label="Enable Delete Object"
                description="Check this option if you want to delete object"
            />

            <property
                name="canMassDelete"
                type="Boolean"
                label="Enable Mass Delete"
                description="Check this option if you want to mass delete"
            />

            <property
                name="canOrder"
                type="Boolean"
                label="Enable Card Ordering"
                description="Check this option if you want to enable card ordering"
            />

            <property
                name="orderField"
                type="String"
                label="Reorder Field"
                description="Field API name used to persist card order within a stage (e.g. KanbanSortOrder__c). If not set, order is saved in the browser's local storage."
            />

            <property
                name="disableUserFilter"
                type="Boolean"
                label="Disable End-User Filter"
                description="Check this option to hide the end-user Filter panel toggle"
            />

            <property
                name="jsonAggregate"
                type="String"
                label="Aggregate"
                description="Json string to define aggregate fields. Ex. {'Amount':'sum'} to sum the amount of opportunities"
            />
            <property
                name="groupBy"
                type="String"
                label="Group By"
                description="Field API name to sub-group cards by within each stage"
            />
            <property
                name="collapseGroups"
                type="Boolean"
                label="Collapse Groups"
                description="Collapse all sub-groups by default. When unchecked, sub-groups are expanded by default."
                default="false"
            />
            <property
                name="jsonSearchFields"
                type="String"
                label="Search Fields"
                description="',' separated list of fields to search (server-side)"
            />

            <property
                name="jsonActions"
                type="String"
                label="Actions"
                description="Json string to initialize the list of available actions"
            />
            <property
                name="buttonActions"
                type="Boolean"
                label="Show Actions as Buttons"
                description="Use buttons for actions instead of icons"
            />
            <property
                name="visibleActions"
                type="Integer"
                label="Custom Visible Actions"
                description="# of visible custom actions"
            />
            <property
                name="jsonRecordActions"
                type="String"
                label="Record Actions"
                description="Json string to initialize the list of available record actions"
            />
            <property
                name="jsonStageStates"
                type="String"
                label="Stage States"
                description="JSON Stage States configuration to control the behavior when the user move a card."
            />
            <property
                name="jsonPopoverFields"
                type="String"
                label="Popover Fields"
                description="Popover Fields to display"
            />
            <property
                name="popoverColumns"
                type="Integer"
                label="Popover Columns #"
                description="# Of Popover Columns"
            />

            <property
                name="jsonCardColoring"
                type="String"
                label="Card Coloring"
                description="JSON conditions for cards coloring"
            />

            <property name="showBorder" type="Boolean" label="Show Border" description="Show Border" />
            <property name="density" type="String" label="Density" description="Component density : comfy | compact" />
            <property
                name="height"
                type="Integer"
                label="Board Height"
                description="Set the board height in px. Use 9999 for dynamic height"
            />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
```

{% endcode %}

## **Documentation** <a href="#documentation" id="documentation"></a>

**GridMate’s Kanban Board** component is a highly customizable tool designed to enhance workflow management. It allows users to track progress and perform quick updates without navigating away from the page. This component is ideal for managing tasks in a visual format, making it easier to interact with data in one place.

**Use case:** Display opportunity Kanban board based on the opportunity object. See [**GM - Kanban Board**](/product-tour/kanban-board.md)

## **Specification**

<table data-full-width="true"><thead><tr><th width="196.98297119140625">Property</th><th width="139.61517333984375">Type</th><th>Description</th></tr></thead><tbody><tr><td>Custom Label</td><td>String</td><td>Set the label of the kanban.</td></tr><tr><td>Custom Icon</td><td>String</td><td>Customize the kanban icon. All lightning icons are supported. The default value is standard:account.</td></tr><tr><td>Object Name</td><td>String</td><td>The name of the object to display (e.g., Opportunity).</td></tr><tr><td>Target Object Name</td><td>String</td><td>The name of the object to display if the kanban is shown on a record page.</td></tr><tr><td>Stage Field</td><td>String</td><td>The stage field to use for the kanban.</td></tr><tr><td>Stage Values</td><td>String</td><td>JSON string defining the subset of stage values to use within the kanban.</td></tr><tr><td>Stage Filter</td><td>String</td><td>Only used when the Stage Field is a lookup. Json string to filter which records are used as stage columns. Ex. <code>{'Industry':{'operator':'=','value':'Hospitality'}}</code></td></tr><tr><td>Stage Sort</td><td>String</td><td>Only used when the Stage Field is a lookup. The field to sort the stage columns. Don’t forget __c for custom fields.</td></tr><tr><td>Stage Order</td><td>String</td><td>Only used when the Stage Field is a lookup. Asc or Desc order for sorting the stage columns.</td></tr><tr><td>Stage Row Limit</td><td>Integer</td><td>Only used when the Stage Field is a lookup. The maximum number of stage columns to fetch. The default value is 50.</td></tr><tr><td>Title Field</td><td>String</td><td>The title field to use for each kanban card's title.</td></tr><tr><td>Object Fields</td><td>String</td><td>A comma-separated list of detail fields for the cards.</td></tr><tr><td>Row Limit</td><td>Integer</td><td>The maximum number of rows to fetch from the specified object. The default value is 1000.</td></tr><tr><td>Filter</td><td>String</td><td>JSON string defining filter criteria. Ex. <code>{'StageName':'Needs Analysis'}.</code></td></tr><tr><td>Sort</td><td>String</td><td>The field list to sort the data.</td></tr><tr><td>Order</td><td>String</td><td>Ascending or descending order for sorting.</td></tr><tr><td>Enable Create Object</td><td>Boolean</td><td>Check to enable the creation of new objects from the kanban.</td></tr><tr><td>Enable Update Object</td><td>Boolean</td><td>Check to enable updates to existing objects.</td></tr><tr><td>Enable Mass Update</td><td>Boolean</td><td>Check to allow bulk updates to existing objects.</td></tr><tr><td>Enable Delete Object</td><td>Boolean</td><td>Check to allow deletion of objects from the kanban.</td></tr><tr><td>Enable Mass Delete</td><td>Boolean</td><td>Check to allow bulk deletion of objects.</td></tr><tr><td>Enable Card Ordering</td><td>Boolean</td><td>Check this option if you want to enable card ordering.</td></tr><tr><td>Reorder Field</td><td>String</td><td>Field API name used to persist card order within a stage (e.g. KanbanSortOrder__c). If not set, order is saved in the browser's local storage.</td></tr><tr><td>Disable End-User Filter</td><td>Boolean</td><td>Check this option to hide the end-user Filter panel toggle. The default value is false.</td></tr><tr><td>Aggregate</td><td>String</td><td>JSON string to define aggregate fields. Ex. <code>{'Amount':'sum'}</code> to sum amounts of opportunities.</td></tr><tr><td>Group By</td><td>String</td><td>Field API name to sub-group cards by within each stage.</td></tr><tr><td>Collapse Groups</td><td>Boolean</td><td>Check this option to collapse all sub-groups by default. When unchecked, sub-groups are expanded by default. The default value is false.</td></tr><tr><td>Search Fields</td><td>String</td><td>',' separated list of fields to search (server-side).</td></tr><tr><td>Actions</td><td>String</td><td>JSON string to initialize the list of available actions, The Kanban Board supports Quick Actions, Global Actions, and calling Flows.</td></tr><tr><td>Show Actions as Buttons</td><td>Boolean</td><td>Use buttons for actions instead of icons. The default value is false.</td></tr><tr><td>Custom Visible Actions</td><td>Integer</td><td>Number of visible custom actions. The default value is 0.</td></tr><tr><td>Record Actions</td><td>String</td><td>JSON string to initialize the list of available record actions.</td></tr><tr><td>Stage States</td><td>String</td><td>JSON Stage States configuration to control the behavior when the user move a card.</td></tr><tr><td>Popover Fields</td><td>String</td><td>Popover Fields to display</td></tr><tr><td>Popover Columns #</td><td>Integer</td><td># Of Popover Columns. The default value is 1.</td></tr><tr><td>Card Coloring</td><td>String</td><td>JSON conditions for card coloring based on defined metrics.</td></tr><tr><td>Show Border</td><td>Boolean</td><td>Check this option to add a border to the kanban.</td></tr><tr><td>Density</td><td>String</td><td>Component density: comfy or compact. The default value is comfy.</td></tr><tr><td>Board Height</td><td>Integer</td><td>Set the board height in px. Use 9999 for dynamic height.</td></tr></tbody></table>

## **API Reference** <a href="#api-reference" id="api-reference"></a>

{% tabs fullWidth="true" %}
{% tab title="kanbanStageListLWC.js-meta.xml" %}
{% code fullWidth="true" %}

```xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>65.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>GM - Kanban Board</masterLabel>
    <description>GM - Kanban Board</description>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage,lightning__RecordPage,lightning__HomePage">
            <property
                name="displayLabel"
                type="String"
                label="Custom Label"
                description="Set the label of the kanban"
            />
            <property
                name="customIcon"
                type="String"
                label="Custom Icon"
                description="Customize the kanban icon. All lightning icons are supported. You can get the icon name from https://lightningdesignsystem.com/icons/"
            />

            <property
                name="objectApiName"
                type="String"
                label="Object Name"
                description="The name of the object to display. Ex. Opportunity."
            />
            <property
                name="sobjectName"
                type="String"
                label="Target Object Name"
                description="The name of the object to display if the kanban is displayed on a record page. Ex. Opportunity."
            />
            <property
                name="stageField"
                type="String"
                label="Stage Field"
                description="The stage field to use for the kanban"
            />
            <property
                name="stageValues"
                type="String"
                label="Stage Values"
                description="JSON stage values. The subset of values to use."
            />
            <property
                name="stageFilterBy"
                type="String"
                label="Stage Filter"
                description="Only used when the Stage Field is a lookup. Json string to filter which records are used as stage columns. Ex. {'Industry':{'operator':'=','value':'Hospitality'}}"
            />
            <property
                name="stageSortField"
                type="String"
                label="Stage Sort"
                description="Only used when the Stage Field is a lookup. The field to sort the stage columns. Don’t forget __c for custom fields."
            />
            <property
                name="stageSortOrder"
                type="String"
                label="Stage Order"
                description="Only used when the Stage Field is a lookup. Asc or Desc order for sorting the stage columns."
            />
            <property
                name="stageRowLimit"
                type="Integer"
                label="Stage Row Limit"
                description="Only used when the Stage Field is a lookup. The maximum number of stage columns to fetch. Default 50."
                default="50"
            />
            <property
                name="titleField"
                type="String"
                label="Title Field"
                description="The title field to use for the card title"
            />
            <property
                name="jsonObjectFields"
                type="String"
                label="Object Fields"
                description="',' separated list of detail fields"
            />

            <property
                name="rowLimit"
                type="Integer"
                label="Row Limit"
                description="The maximum number of row to fetch"
                default="1000"
            />
            <property
                name="filterBy"
                type="String"
                label="Filter"
                description="Json string to define filter criteria. Don’t forget __c for custom fields. Ex. {'StageName':'Needs Analysis'} to see only 'Needs Analysis' Opportunities"
            />
            <property
                name="sortBy"
                type="String"
                label="Sort"
                description="The field list to sort the data. Don’t forget __c for custom fields. Ex. Amount to sort opportunities by amount"
            />
            <property name="orderBy" type="String" label="Order" description="Asc or Desc order for sorting" />

            <property
                name="canCreate"
                type="Boolean"
                label="Enable Create Object"
                description="Check this option if you want to create object"
            />

            <property
                name="canEdit"
                type="Boolean"
                label="Enable Update Object"
                description="Check this option if you want to update object"
            />

            <property
                name="canMassUpdate"
                type="Boolean"
                label="Enable Mass Update"
                description="Check this option if you want to mass update"
            />

            <property
                name="canDelete"
                type="Boolean"
                label="Enable Delete Object"
                description="Check this option if you want to delete object"
            />

            <property
                name="canMassDelete"
                type="Boolean"
                label="Enable Mass Delete"
                description="Check this option if you want to mass delete"
            />

            <property
                name="canOrder"
                type="Boolean"
                label="Enable Card Ordering"
                description="Check this option if you want to enable card ordering"
            />

            <property
                name="orderField"
                type="String"
                label="Reorder Field"
                description="Field API name used to persist card order within a stage (e.g. KanbanSortOrder__c). If not set, order is saved in the browser's local storage."
            />

            <property
                name="disableUserFilter"
                type="Boolean"
                label="Disable End-User Filter"
                description="Check this option to hide the end-user Filter panel toggle"
            />

            <property
                name="jsonAggregate"
                type="String"
                label="Aggregate"
                description="Json string to define aggregate fields. Ex. {'Amount':'sum'} to sum the amount of opportunities"
            />
            <property
                name="groupBy"
                type="String"
                label="Group By"
                description="Field API name to sub-group cards by within each stage"
            />
            <property
                name="collapseGroups"
                type="Boolean"
                label="Collapse Groups"
                description="Collapse all sub-groups by default. When unchecked, sub-groups are expanded by default."
                default="false"
            />
            <property
                name="jsonSearchFields"
                type="String"
                label="Search Fields"
                description="',' separated list of fields to search (server-side)"
            />

            <property
                name="jsonActions"
                type="String"
                label="Actions"
                description="Json string to initialize the list of available actions"
            />
            <property
                name="buttonActions"
                type="Boolean"
                label="Show Actions as Buttons"
                description="Use buttons for actions instead of icons"
            />
            <property
                name="visibleActions"
                type="Integer"
                label="Custom Visible Actions"
                description="# of visible custom actions"
            />
            <property
                name="jsonRecordActions"
                type="String"
                label="Record Actions"
                description="Json string to initialize the list of available record actions"
            />
            <property
                name="jsonStageStates"
                type="String"
                label="Stage States"
                description="JSON Stage States configuration to control the behavior when the user move a card."
            />
            <property
                name="jsonPopoverFields"
                type="String"
                label="Popover Fields"
                description="Popover Fields to display"
            />
            <property
                name="popoverColumns"
                type="Integer"
                label="Popover Columns #"
                description="# Of Popover Columns"
            />

            <property
                name="jsonCardColoring"
                type="String"
                label="Card Coloring"
                description="JSON conditions for cards coloring"
            />

            <property name="showBorder" type="Boolean" label="Show Border" description="Show Border" />
            <property name="density" type="String" label="Density" description="Component density : comfy | compact" />
            <property
                name="height"
                type="Integer"
                label="Board Height"
                description="Set the board height in px. Use 9999 for dynamic height"
            />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
```

{% endcode %}
{% endtab %}
{% endtabs %}