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

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 : **Opp Pipeline Board**
   * Custom Icom : **standard:opportunity**
   * Object Name : **Opportunity**
   * Stage Field : **StageName**
   * Title Field : **Name**
   * Object Fields : **CloseDate,ExpectedRevenue,Amount**
   * Row Limit : **100**
   * Enable Create Object : **Checked**
   * Enable Update Object : **Checked**
   * Enable Mass Update : **Checked**
   * Enable Delete Object : **Checked**
   * Enable Mass Delete : **Checked**
6. Aggregate : `{ "Amount": "sum", "ExpectedRevenue": "sum" }`
7. actions : `[{"label":"Update Stage","name":"Opportunity.Update_Stage"}]`

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

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

{% hint style="info" %}
The Kanban Board supports **card coloring** by providing the coloring configuration. Below is an example of card coloring.
{% endhint %}

```json
[
    {
        "color": "#ffc9c9",
        "exp": {
            "Amount": {
                "operator": "<=",
                "value": 10000
            }
        }
    },
    {
        "color": "#D2FFBF",
        "exp": {
            "Amount": {
                "operator": ">",
                "value": 10000
            }
        }
    }
]
```

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