# Kanban

![Kanban Block](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FVNNDVEPQf2tjt8rUUqWp%2Fkanban_general-b.png?alt=media\&token=bd172bdd-f9f8-4cc6-a2e9-64534b087e62)

{% hint style="info" %}
The block is available for **Professional** and **Business** plan customers only.
{% endhint %}

The Kanban block allows you to display data from Airtable in a [Kanban Board](https://en.wikipedia.org/wiki/Kanban_board) layout. Most of the setup such as connecting the Airtable base/table or configuring inline filters and search is similar to that of the [List](https://softr.gitbook.io/softr-documentation/building-blocks/listings) block, so let's skip those sections and proceed to the settings that are unique for this block.&#x20;

To demonstrate how the block works, we'll use an Aritable base that contains a list of tasks. It has such fields as Assignee, Task Status, Task Description, etc. as shown below.

![Task List on Airtable](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FUiBdEwbe8g3ObgrfJjaY%2Ftask-list-b.png?alt=media\&token=4d43c787-87cf-4f65-bd79-a56a1febc36a)

## Group By

Let's navigate to the **Features** tab of the block settings and look into the **Group by** option. Here, you select the field by which you want to group the board items. If, for instance, the field has 3 values, the board will consist of 3 columns (each column is assigned one of the field values) and the records will be grouped accordingly.&#x20;

In our example, we have grouped by the task **Status** field. Therefore, we have four columns (**To Do, In Progress, Done**) and tasks are grouped under each column based on their status.

![Grouping by the task Status field](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FBP479MB2abKufIFbEUpv%2Fgroup-by-b.png?alt=media\&token=fda745b6-1f2a-4052-a4cf-7f2f159d6bde)

## Mapping the Fields

In the **List Item section**, you map the fields that should be shown on board cards. In our example, we have connected the **Image**, **Name**, **Assignee**, and **Description** fields as you can see in the screenshot below.&#x20;

![Mapping the fields](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FRXtgcGqsB9OszugAHSaO%2Fmapping-b.png?alt=media\&token=a328d4fe-2e69-42c1-8dff-9ff34dff9996)

## Conditional Filters

Kanban's conditional filters work similar to those of the [List](https://softr.gitbook.io/softr-documentation/building-blocks/list-conditional-filters) block and are also located in the **Data** tab. For our use case, it could be relevant to configure them so that each logged-in **Assignee** only sees his/her tasks. To achieve that, we need to set up a filter to show each user only the tasks where the **Assignee** fields corresponds to his/her email.

![Setting a conditional filter](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FAWTMJYqVHbJnXRmG5py5%2Fcond-b.png?alt=media\&token=a3474c07-91d8-49fd-9bf5-18bf74a1f357)

Here's what **<john@softr.io>** will see after logging in and navigating to the board.

![User sees only his tasks](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FeXNTEyh8n3DtukyNV1Zm%2FScreen%20Recording%202022-08-13%20at%2020.45.04.gif?alt=media\&token=ace456e8-c117-45a6-b3f0-6415ff4d3e4e)

## Moving Board Cards

Any user that has access to the board can move the board cards from one column to another using drag\&drop. As a result, the corresponding value of the card will be updated as well. Below we move a task from the **To Do** column to **In** **Progress**. As you can see, its **Status** field value changes to **Done** on Airtable.

{% hint style="info" %}
Please, note that **only logged-in users** can move Kanban cards and update their values.
{% endhint %}

![Changing task status](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FqywgHXD4vGMZiD7tnMJA%2FScreen%20Recording%202022-08-13%20at%2020.48.38.gif?alt=media\&token=b4ca61bc-1f51-4473-962f-2192954f8096)
