> 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/product-tour/kanban/kanban-board.md).

# Kanban Board

Track records as cards across stages, with grouping, totals, filters, card ordering and stage controls.

GridMate’s **Kanban Board** is designed to help users manage and visualize workflows by tracking progress and allowing quick updates directly within the page. Cards can be grouped inside each stage with their own totals, and users can search and filter the board without leaving the page.

In this tutorial, we will create an app page for opportunity Kanban Board using **GM - Kanban Board**.

{% stepper %}
{% step %}

### Create an app page

From Setup, create an app page in the Lightning App Builder.
{% endstep %}

{% step %}

### Add the component

From the components list, drag and drop the component **GM - Kanban Board**. The component is now ready for configuration in the Lightning App Builder.
{% endstep %}

{% step %}

### Configure the properties

The property values can be configured to tailor the component to the needs of the end-user. To perform a quick configuration, populate the property values in the table below.
{% endstep %}
{% endstepper %}

## Properties

| Property                                               | Demo value                                                     | Notes                                                                                                                                             |
| ------------------------------------------------------ | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| Custom Label                                           | **Pipeline Board**                                             |                                                                                                                                                   |
| Custom Icon                                            | **standard:opportunity**                                       |                                                                                                                                                   |
| Object Name                                            | **Opportunity**                                                |                                                                                                                                                   |
| Stage Field                                            | **StageName**                                                  | Can also be a lookup, for example `AccountId`, to get one column per account with its **Name** as the header.                                     |
| Title Field                                            | **Name**                                                       |                                                                                                                                                   |
| Object Fields                                          | **CloseDate,ExpectedRevenue,Amount**                           |                                                                                                                                                   |
| Row Limit                                              | **50**                                                         |                                                                                                                                                   |
| Sort                                                   | **CreatedDate**                                                |                                                                                                                                                   |
| Order                                                  | **desc**                                                       |                                                                                                                                                   |
| Enable Create Object                                   | **Checked**                                                    |                                                                                                                                                   |
| Enable Update Object                                   | **Checked**                                                    |                                                                                                                                                   |
| Enable Mass Update                                     | **Checked**                                                    |                                                                                                                                                   |
| Enable Delete Object                                   | **Checked**                                                    |                                                                                                                                                   |
| Enable Mass Delete                                     | **Checked**                                                    |                                                                                                                                                   |
| Group By                                               | **Account.Name**                                               | Accepts a field path such as `Account.Name`. A lookup such as `AccountId` would show record Ids. Cards with no value are grouped under **Empty**. |
| Collapse Groups                                        |                                                                | Shows the groups collapsed when the board opens.                                                                                                  |
| Search Fields                                          | **Name**                                                       |                                                                                                                                                   |
| Density                                                | **compact**                                                    |                                                                                                                                                   |
| Aggregate                                              | `{"Amount": "sum", "CloseDate": "min"}`                        | Supports **sum**, **min**, **max** and **avg**. **min**, **max** and **avg** also work on Date fields.                                            |
| Actions                                                | `[{"label":"Update Stage","name":"Opportunity.Update_Stage"}]` | See [Mass/Record action](/advanced-guides/grid-actions/actions-library.md). We support quick action and calling a flow.                           |
| Disable End-User Filter                                |                                                                | The **Filter** button is shown by default. Check this option to hide it.                                                                          |
| Stage Filter, Stage Sort, Stage Order, Stage Row Limit |                                                                | Used when the **Stage Field** is a lookup, to choose and sort the columns.                                                                        |

{% hint style="info" %}
When the **Stage Field** is a lookup, cards whose lookup is not a column are not shown, so use the board **Filter** to load only their records. The board **Filter**, the user filter and the search all apply together.
{% endhint %}

## What users can do

With this configuration, users can:

* Drag a card to another stage to update its stage.
* See the number of cards and the totals of each stage, of each group and of the whole board: here, the sum of **Amount** and the next **Close Date**.
* Click a group header to collapse or expand the group. Each stage is grouped by account.
* Click a compact card, outside its title, to show its fields.
* Select cards with their checkboxes and run an action, such as **Update Stage**, or use **Mass Update** and **Delete**.
* Type a word in the **Search...** box and press **Enter** to find a card.
* Click **Filter** to filter the board with the **Quick** or **Advanced** tab.

Below is a step by step tutorial to configure the **GM - Kanban Board**.

{% embed url="<https://youtu.be/XZmdaFAhqjM>" %}
GM - Kanban Board
{% endembed %}

## Card Coloring

The Kanban Board supports **card coloring** by providing the coloring configuration. Below is the card coloring configured for the demo: deals over 40,000 turn green.

```json
[
    {
        "color": "#D2FFBF",
        "exp": {
            "Amount": {
                "operator": ">",
                "value": 40000
            }
        }
    }
]
```

## Kanban Board - State Changes Control

This feature allows admins to define interactive behaviors when a record is moved between stages in the Kanban Board.

Stage States can trigger different user interactions during stage updates, such as:

* Displaying confirmation messages
* Opening record modals

{% tabs %}
{% tab title="Use Case" %}

* When an Opportunity is moved to **Closed Lost**, a confirmation message is displayed to ensure the user intends to close the deal.
* When the stage is updated to **Negotiation/Review**, a record modal opens and requires the user to complete additional fields, such as **Amount**, before the update is finalized.
  {% endtab %}

{% tab title="JSON Config" %}
Below is the JSON Config configured for the demo.

```json
[
    {
        "toStage": "Closed Lost",
        "type": "confirm",
        "message": "Do you want to close this opportunity?"
    },
    {
        "toStage": "Negotiation/Review",
        "type": "recordModal",
        "fields": [
            "Amount"
        ]
    }
]
```

{% endtab %}
{% endtabs %}

Below is a step by step tutorial to configure the **Kanban Board - State Changes Control** component.

{% embed url="<https://youtu.be/JN2GyQobVog>" %}

## Kanban Board - Sort Cards

Users can drag a card **up or down inside its column** to put the cards in the order they work them. A blue line shows where the card will land.

### Use Case

* A sales rep drags the hottest deals to the top of **Qualification**. The new positions are saved in **Kanban Sort Order**, so the whole team sees the same order.

{% tabs %}
{% tab title="Kanban Board" %}

* Check **Enable Card Ordering**.
* Set **Reorder Field** to the API name of a Number field (e.g. `KanbanSortOrder__c`) to save the order on the records, for all users. Leave it empty to save the order in the browser, for the current user only.

Below are the property values configured for the demo.

| Property             | Demo value               |
| -------------------- | ------------------------ |
| Enable Card Ordering | **Checked**              |
| Reorder Field        | **KanbanSortOrder\_\_c** |
| {% endtab %}         |                          |

{% tab title="User Kanban Board" %}
On a **User Kanban Board**, ordering is turned on by the **Reorder Field** alone (there is no browser mode): open the board record, click **Config Wiz**, open the **Cards** tab, expand **Card Reordering**, pick a Number field in **Reorder Field**, then click **Save**.
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Card ordering uses the same edit rights as stage changes: **Enable Update Object** must be checked, and the user must be able to edit the record and the **Reorder Field**.
{% endhint %}

{% hint style="warning" %}
Use a dedicated Number field (no decimals) for the order. Don't use a business field such as **Amount** or **Probability**: GridMate overwrites its value when a card moves.
{% endhint %}

Below is a step by step tutorial to configure the **Kanban Board - Sort Cards** feature.

{% embed url="<https://youtu.be/WlMGGVAxyiY>" %}

## Next steps

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>User Kanban Board</strong></td><td>Create Kanban boards as records and configure them with the Config Wiz.</td><td><a href="/product-tour/kanban/user-kanban-board.md">User Kanban Board</a></td></tr><tr><td><strong>Grid - Mass/Record Actions</strong></td><td>Add quick actions and flows to the board.</td><td><a href="/advanced-guides/grid-actions/actions-library.md">Grid - Mass/Record Actions</a></td></tr><tr><td><strong>GM - Kanban Board</strong></td><td>Every property of the component.</td><td><a href="/package-reference/components-library/gm-kanban-board.md">GM - Kanban Board</a></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.gridmate.io/product-tour/kanban/kanban-board.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.