# Demo Example: Tasks Kanban

This Tasks kanban board helps you manage tasks and visualize their status. Here is how this kanban can look like:

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FM3zhmJYTFtRbb0MpWD6c%2Ffile.excalidraw.svg?alt=media&#x26;token=43947067-59a4-46e3-acd8-b9d6c929a73b" alt="" class="gitbook-drawing">

This kanban shows tasks in 5 columns. Similar statuses share a column. Drag the task card to change its status.

To build this kanban, an admin should do the steps below:

### Create a new kanban

* Go to the [Kanban creation wizard](https://docs.flexikanban.ai/standard-kanban/basics/how-to-create-a-standard-kanban) and create a new standard kanban.
* Give it a name and description.
* Select "White" theme.
* Save the kanban and go to Kanban builder.

### Create Task Form

* Create new form with these properties:

| Property              | Value                                                                           |
| --------------------- | ------------------------------------------------------------------------------- |
| Name                  | Task Form                                                                       |
| Data Source Object    | Task                                                                            |
| Multi Page Form?      | false                                                                           |
| Show navigation panel | true                                                                            |
| Buttons configuration | Check "Save" button for "Edit" mode only. Uncheck other.                        |
| Header configuration  | <p>Edit mode: Edit Task</p><p>View mode: View Task</p><p>New mode: New Task</p> |

* Add these elements to the form:

<table><thead><tr><th width="107">Type</th><th width="136">Name</th><th width="136">Title</th><th>Properties</th></tr></thead><tbody><tr><td>Button</td><td>Button</td><td>Close</td><td><ul><li>Show on Edit page: <strong>true</strong></li><li>Show on View Page: <strong>true</strong></li><li><p>Conditional Style:</p><ul><li>type = <strong>hide</strong></li><li><p>conditions:</p><ul><li>object = <strong>Task (Form Object)</strong></li><li>field = <strong>Activity ID</strong></li><li>operator = <strong>is not null</strong></li></ul></li></ul></li><li><p>Event:</p><ul><li>type = <strong>onClick</strong></li><li>conditions not set</li><li>handler "<strong>Close</strong>" action without parameters (creation of it see in next table)</li></ul></li></ul></td></tr><tr><td>Section</td><td>section</td><td></td><td><ul><li>Columns: 2</li><li>Show on Edit page: true</li><li>Show on View Page: true</li><li>Scrollable: false</li></ul></td></tr><tr><td>Section</td><td>section 1</td><td></td><td><ul><li>Columns: 2</li><li>Show on Edit page: true</li><li>Show on View Page: true</li><li>Scrollable: false</li></ul></td></tr><tr><td>Section</td><td>attachments</td><td>Attachments</td><td><ul><li>Columns: 2</li><li>Show on Edit page: true</li><li>Show on View Page: true</li><li>Scrollable: false</li></ul></td></tr></tbody></table>

**The following elements have these default properties (that can be overridden by specific properties):**

* Required: false
* Read Only: false
* Show on Edit page: true
* Show on View Page: true
* Instructions: not set
* Conditional Styles: not set
* Events: not set
* View Type (for picklists): Single list
* Hide 'None' (for picklists): false
* Options Groups (for picklists): not set

<table><thead><tr><th width="152">Section name</th><th width="115">Field</th><th width="127">Name</th><th width="123">Title</th><th>Specific properties</th></tr></thead><tbody><tr><td>Section</td><td>Subject</td><td>Subject</td><td>Subject</td><td></td></tr><tr><td></td><td>Description</td><td>Description</td><td>Description</td><td></td></tr><tr><td></td><td>Status</td><td>Status</td><td>Status</td><td><p>Read Only = <strong>true</strong><br>Condition Style:</p><ul><li>type = <strong>hide</strong></li><li><p>conditions:</p><ul><li>object = <strong>Task (Form Object)</strong></li><li>field = <strong>Activity ID</strong></li><li>operator = <strong>is null</strong></li></ul></li></ul></td></tr><tr><td>Section 1</td><td>Assigned To ID</td><td>OwnerId</td><td>Assignee</td><td></td></tr><tr><td></td><td>Priority</td><td>Priority</td><td>Priority</td><td></td></tr><tr><td></td><td>Due Date Only</td><td>ActivityDate</td><td>Due Date</td><td></td></tr><tr><td></td><td>Related To ID</td><td>WhatId</td><td>Related To ID</td><td></td></tr><tr><td>Attachments</td><td>File (Options)</td><td>file1</td><td></td><td>Source type = <strong>Conditions</strong><br>Source: Title = <strong>'file1'</strong><br>Fields: <strong>[{"label":"Title","localName":"Title","type":"Text","value":"file1","visible":false,"disabled":false}]</strong></td></tr><tr><td></td><td>File (Options)</td><td>file2</td><td></td><td>Source type = <strong>Conditions</strong><br>Source: Title = <strong>'file2'</strong><br>Fields: <strong>[{"label":"Title","localName":"Title","type":"Text","value":"file2","visible":false,"disabled":false}]</strong></td></tr><tr><td></td><td>File (Options)</td><td>file3</td><td></td><td>Source type = <strong>Conditions</strong><br>Source: Title = <strong>'file3'</strong><br>Fields: <strong>[{"label":"Title","localName":"Title","type":"Text","value":"file3","visible":false,"disabled":false}]</strong></td></tr><tr><td></td><td>File (Options)</td><td>file4</td><td></td><td>Source type = <strong>Conditions</strong><br>Source: Title = <strong>'file4'</strong><br>Fields: <strong>[{"label":"Title","localName":"Title","type":"Text","value":"file4","visible":false,"disabled":false}]</strong></td></tr></tbody></table>

* Add the following Form Action as handler on the "Close" button:

| Action Name and Title | Property              | Value           |
| --------------------- | --------------------- | --------------- |
| Close                 | Type                  | **Navigate**    |
|                       | Navigate to           | **Return back** |
|                       | Browser history steps | **1**           |
|                       | Has Conditions        | **false**       |

### Configure the kanban

Go to [Basic Configuration](https://docs.flexikanban.ai/standard-kanban/basics/how-to-create-a-standard-kanban) and set [CSS Styles](https://docs.flexikanban.ai/standard-kanban/tools/configuring-css-styles) to:

* Header CSS Styles = background: #f7f7f7
* Title CSS Styles = color: #333

Then open [Buttons Configuration](https://docs.flexikanban.ai/standard-kanban/tools/configuring-rows-cells-menus-and-buttons) and add 2 buttons:

Configure button "New Task":

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FadodTq1wb03KygzNOgtM%2Ffile.excalidraw.svg?alt=media&#x26;token=87426a54-d9ad-4a6d-8e27-4ad15a78dd54" alt="" class="gitbook-drawing">

Configure [handler](https://docs.flexikanban.ai/standard-kanban/tools/configuring-handlers) of this button:

* Type = **Form**
* Value = **Task Form** (form that was created before)
* Parameters = **{"mode":"edit"}**

Configure button "Print Kanban":

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FjMFzZn3RCb6M87R1eOde%2Ffile.excalidraw.svg?alt=media&#x26;token=d91b00d0-f900-4a23-bdaf-4076bb2ba757" alt="" class="gitbook-drawing">

Configure handler of this button:

* Type = **KanBan API**
* Value = **Print KanBan**
* Parameters = **{"kanbanId":"{$KanBan.Id}"}**

### Configure columns

* [Add 5 columns](https://docs.flexikanban.ai/standard-kanban/configure-kanban/working-with-kanban-layout) to the kanban.
* Name columns and give them descriptions respectively to task status (see table below)
* Leave columns widths default ("auto")
* Leave columns "Is Active" checkboxes default (checked)
* [Set these properties](https://docs.flexikanban.ai/standard-kanban/configure-column/how-to-configure-column-data-source) to all columns:
  * Data Source Type = **SObject**
  * Data Source = **Task**
* Set the following conditions to the columns:

| Column name | Description             | Conditions                              |
| ----------- | ----------------------- | --------------------------------------- |
| New         | Not Started             | Status equals "Not Started"             |
| In Progress | In Progress             | Status equals "In Progress"             |
| QA Ready    | Waiting on someone else | Status equals "Waiting on someone else" |
| Completed   | Completed               | Status equals "Completed"               |
| On Hold     | Deferred                | Status equals "Deferred"                |

* Set the following styles for column header on Header Configuration tab:

```
 background: #e5eeff;
```

* Select amount of cards for column body on Body Configuration tab:

Cards in Row = 1

* Add a row with 2 [cells](https://docs.flexikanban.ai/tools/configuring-rows-cells-menus-and-buttons#cells) of "Text" type into column footer on Footer Configuration tab:

<table><thead><tr><th>Value</th><th>CSS Styles</th></tr></thead><tbody><tr><td>Totals:</td><td><pre class="language-css"><code class="lang-css">font-weight: bold;
</code></pre></td></tr><tr><td><pre><code>FORMULA[COLUMNTOTAL()]
</code></pre></td><td><pre class="language-css"><code class="lang-css">color: #333;
text-align: right;
</code></pre></td></tr></tbody></table>

### Configure Card

* Add 1 card to the kanban
* Set Data Source Type to **Task**
* Set [card layout](https://docs.flexikanban.ai/standard-kanban/configure-card/how-to-configure-card-layout):

Go to Basic configuration tab:

* Layout body type = **Form** (Task Form was created above) with parameters (see in image)
* Position = **right**
* Checked "Hide Footer" checkbox

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FuMj67TNCVFoOyVzWKyhv%2Ffile.excalidraw.svg?alt=media&#x26;token=5088ff3a-fd9d-4dee-9b0f-456e2ab3aa90" alt="" class="gitbook-drawing">

Set card layout header to show name of active task:

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2Fwn1FOyuOf84J6cxIsZBd%2Ffile.excalidraw.svg?alt=media&#x26;token=6fddb7b6-500b-497d-871b-fd9b8250242f" alt="" class="gitbook-drawing">

Open [Card Compact Layout editor](https://docs.flexikanban.ai/standard-kanban/configure-card/how-to-configure-card-compact-layout):

<img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2F58pLwqP9PRs1YsHHsJTX%2Ffile.excalidraw.svg?alt=media&#x26;token=e5b306fe-38e0-47b8-be82-7e194f9a066f" alt="" class="gitbook-drawing">

* add CSS Styles to the card settings:

```css
border-left: 3px solid FORMULA[IF({Task.Type} = 'Bug', '#ff0000', '#3fba3f')];
background-color: FORMULA[IF({Task.Type} = 'Bug', '#ffeded', '#e5ffeb')];
```

* By default Card Compact Layout contains one component of text type; this component contains Record ID. Click on it (1) and change its Type to **link** and Value to {**Task.Subject**}
* Set its width to **100** (leave default)
* Expand "Handler" section and add a [handler](https://docs.flexikanban.ai/standard-kanban/tools/configuring-handlers) with Type = **SObject** and Value = **{Task.Id}**
* Expand "Styles" section and set the following CSS style: `color: #045cea`
* Add text component (2) below the previous
* Set its Value to **{Task.Owner.Name}**
* Leave its width default (**100**)
* Set CSS styles for it: `font-weight: bold`
* Add text component (3) below
* Set its value to **{Task.ActivityDate}**
* Set its Title to **Due Dat**e
* Leave its width default (**100**)
* Expend "Styles" section and set the following:

```css
display: FORMULA[IF(ISBLANK({Task.ActivityDate}), 'none','')]
```

* Add text component (4) below
* Set its value to **{Task.Who.Name}**
* Set its width to **90**
* Add text component (5) to the right of text component #4
* Set its Title to **{Task.Priority}**
* Set it's width to **10**
* Expend "Styles" section and set the following:

```css
width: 16px;
height: 16px;
border-radius: 10px;
background-color: FORMULA[CASE({Task.Priority}, 'Low', '#65D872', 'High', 
'#BA1100', '#F2CE00')];
flex: initial;
```

### Configure column junctions

Set [column junctions](https://docs.flexikanban.ai/standard-kanban/configure-card/configuring-card-movement-and-column-junctions) for card on each column:

* Drop behavior for source column: Remove card
* Drop behavior for target column: Refresh

Set allowed drag-n-drop directions:

<table data-full-width="true"><thead><tr><th width="210">Column to drag From</th><th width="82" align="center">New</th><th align="center">in Progress</th><th align="center">QA Ready</th><th align="center">Completed</th><th align="center">On Hold</th></tr></thead><tbody><tr><td>New</td><td align="center"></td><td align="center">+</td><td align="center">+</td><td align="center"></td><td align="center">+</td></tr><tr><td>In progress</td><td align="center">+</td><td align="center"></td><td align="center">+</td><td align="center">+</td><td align="center">+</td></tr><tr><td>QA Ready</td><td align="center"></td><td align="center">+</td><td align="center"></td><td align="center">+</td><td align="center">+</td></tr><tr><td>Completed</td><td align="center"></td><td align="center">+</td><td align="center"></td><td align="center"></td><td align="center"></td></tr><tr><td>On Hold</td><td align="center">+</td><td align="center">+</td><td align="center"></td><td align="center"></td><td align="center"></td></tr></tbody></table>

### Configure Card Actions

To add a sense to Cards dragging some [actions](https://docs.flexikanban.ai/standard-kanban/configure-card/configuring-card-actions) are necessary.

Create a new action with these properties and add it to card in each column for each allowed target column:

* Name = **Update Task Status Action**
* Type = **Field Update**
* Execute = **Always**
* Status = **Active**
* Context Object Type = **Task**

In the Field Update Settings section configure this:

* Object Name = **Task**
* Fields:
  * Name = **Status**
  * Value = **{$TargetColumn.Description}**
* Conditions:
  * Name: **Activity ID**
  * Operator: **equals**
  * Value: **{task.id}**


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flexikanban.ai/standard-kanban/getting-started/demo-example-tasks-kanban.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.