> 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-board.md).

# Kanban Board

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**.

1. From Setup, create an app page in the Lightning App Builder.
2. From the components list, drag and drop the component **GM - Kanban Board**.
3. The component is now ready for configuration in the Lightning App Builder.
4. The property values can be configured to tailor the component to the needs of the end-user.
5. To perform a quick configuration, populate required property values:
   * Custom Label : **Pipeline Board**
   * Custom Icon : **standard:opportunity**
   * Object Name : **Opportunity**
   * Stage Field : **StageName**
   * 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**
   * Search Fields : **Name**
   * Density : **compact**
6. Aggregate : `{"Amount": "sum", "CloseDate": "min"}`
7. Actions : `[{"label":"Update Stage","name":"Opportunity.Update_Stage"}]`

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 %}

{% hint style="info" %}
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.
{% endhint %}

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

{% hint style="info" %}
**Group By** 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**, and **Collapse Groups** shows the groups collapsed when the board opens. **Aggregate** supports **sum**, **min**, **max** and **avg**, and **min**, **max** and **avg** also work on Date fields.
{% endhint %}

{% hint style="info" %}
The **Stage Field** can also be a lookup, for example `AccountId`, to get one column per account with its **Name** as the header. **Stage Filter**, **Stage Sort**, **Stage Order** and **Stage Row Limit** choose and sort the columns. Cards whose lookup is not a column are not shown, so use the board **Filter** to load only their records.
{% endhint %}

{% hint style="info" %}
The **Filter** button is shown by default. Check **Disable End-User Filter** to hide it. The board **Filter**, the user filter and the search all apply together.
{% endhint %}

{% hint style="info" %}
[Mass/Record action](https://docs.gridmate.io/advanced-guides/actions-library) can be configured based on requirement. We support quick action and calling a flow.
{% endhint %}

## Kanban Board - State Changes Control

This feature that 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

#### 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.

Below is the JSON Config configured for the demo.

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

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.

* 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.

#### 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.

Below are the property values configured for the demo.

* Enable Card Ordering : **Checked**
* Reorder Field : **KanbanSortOrder\_\_c**

{% 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 %}

#### 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**.

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

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