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