# Demo Example: Cases Dashboard

The given Cases Dashboard represents a way to show cases by their reasons, manage them and change their statuses. Here is how this dashboard can look like:

<figure><img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FdvxpdIYLad44tqQHMs1z%2Fimage.png?alt=media&#x26;token=928efe16-2c9c-47ed-b2c5-6a63b6e09e24" alt=""><figcaption></figcaption></figure>

This dashboard shows cases in 5 columns; each column corresponds to one of case statuses. By dragging the case card from one column to another user can easily change its status.\
Left tab bar allows user to display cases corresponding to different reasons. Click on them to apply selected reason to all columns - this acts like tabs or filter.

To make a such dashboard administrator should do actions listed below:

### Create new dashboard

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

### Configure dashboard

Set these CSS Styles to Dashboard on Basics Configuration Tab:

```css
background-position: bottom center;
background-repeat: no-repeat;
background-size: 100% auto;
background-color: #E6EBE5;
```

Add the **background-image** CSS property and set it to: `url('data:image/jpeg;base64,...')`, where URL is a proper image encoded in base64 format (to embed image into dashboard and to avoid loading it from another source). In this example this image is used:

<figure><img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FdNuJzD6biZNGorA9bPcF%2Fimage.png?alt=media&#x26;token=528f5f9e-3647-480a-ba97-236234bd59de" alt=""><figcaption><p><em>This image is taken by author of this example and can be used by any person for any purpose, commercial or not, without any restrictions.</em></p></figcaption></figure>

Go to [Statistics Configuration](https://docs.flexikanban.ai/standard-kanban/configure-kanban/how-to-add-kanban-statistics). Add [the cell](https://docs.flexikanban.ai/tools/configuring-rows-cells-menus-and-buttons#cells) which will overlay unnecessary views selector:

* Type = Text
* Value =

```clike
FORMULA[
  IF(
    OR(
      ISBLANK({$Variables.SelectedCaseReason}),
      {$Variables.SelectedCaseReason} = ''
    ),
    'Cases without reason',
    {$Variables.SelectedCaseReason} cases
  )
]
```

Set CSS Styles to this cell:

```css
z-index: 1;
align-items: center;
justify-content: center;
display: flex;
background-color: #F7F7F7;
position: absolute;
font-size: 1.5rem;
top: 0;
left: 0;
height: 100%;
padding: 0 1.25em;
```

Go to [Variables Configuration](https://docs.flexikanban.ai/standard-kanban/using-kanban/how-to-work-with-variables) tab. Add these variables:

| # | Variable Name      | Variable Value |
| - | ------------------ | -------------- |
| 1 | SelectedCaseReason | Installation   |
| 2 | CurrentKanbanId    | {$KanBan.Id}   |

### Configure columns

* Add 5 [columns](https://docs.flexikanban.ai/standard-kanban/configure-kanban/working-with-kanban-layout) to the dashboard
* Name columns accordingly to the table below
* Leave columns widths default ("**auto**") except the column with "**New**" name (set it width to **24%**)
* 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 = **Case**
  * Order = **Case ID, asc**
* Set conditions to the columns accordingly to the table below (leave conditions logic empty in all columns):

<table><thead><tr><th width="107">Column</th><th width="135">Field Name</th><th width="121">Operator</th><th width="94">Type</th><th>Value</th></tr></thead><tbody><tr><td>New</td><td>Case Reason<br>Status<br>Status<br>Status<br>Status</td><td>equals<br>not equal to<br>not equal to<br>not equal to<br>not equal to</td><td>Formula<br>Value<br>Value<br>Value<br>Formula</td><td>{$Variables.SelectedCaseReason}<br>Working<br>Escalated<br>Closed<br>Active</td></tr><tr><td>Active</td><td>Case Reason<br>Status</td><td>equals<br>equals</td><td>Formula<br>Formula</td><td>{$Variables.SelectedCaseReason}<br>Active</td></tr><tr><td>Escalated</td><td>Case Reason<br>Status</td><td>equals<br>equals</td><td>Formula<br>Value</td><td>{$Variables.SelectedCaseReason}<br>Escalated</td></tr><tr><td>Working</td><td>Case Reason<br>Status</td><td>equals<br>equals</td><td>Formula<br>Value</td><td>{$Variables.SelectedCaseReason}<br>Working</td></tr><tr><td>Closed</td><td>Case Reason<br>Status</td><td>equals<br>equals</td><td>Formula<br>Value</td><td>{$Variables.SelectedCaseReason}<br>Closed</td></tr></tbody></table>

* Add [custom attribute](https://docs.flexikanban.ai/standard-kanban/configure-column/how-to-set-and-use-column-custom-attributes) to each column with name = **Status** and value equal to column name
* Set the following styles for column bodies on Body Configuration tab:

<table><thead><tr><th width="66.33333333333331">#</th><th width="109">Column</th><th>Column Body CSS styles</th></tr></thead><tbody><tr><td>1</td><td>New</td><td><pre class="language-css"><code class="lang-css">height: calc(100% - (28px + 39px + 20px));
left: 64px;
width: calc(100% - 94px);
top: calc(28px + 39px);
position: absolute;
margin: 0 10px 20px 20px;
border-right: 0px none;
background: rgba(255,255,255,0.3);
border-radius: 0 0 4px 4px;
</code></pre></td></tr><tr><td>2</td><td>Active</td><td><pre class="language-css"><code class="lang-css">border-radius: 0 0 4px 4px;
background: rgba(255,255,255,0.3);
border-right: 0px none;
margin: 0 10px 20px 10px;
</code></pre></td></tr><tr><td>3</td><td>Escalated</td><td></td></tr><tr><td>4</td><td>Working</td><td></td></tr><tr><td>5</td><td>Closed</td><td><pre class="language-css"><code class="lang-css">border-radius: 0 0 4px 4px;
background: rgba(255,255,255,0.3);
border-right: 0px none;
margin: 0 20px 20px 10px;
</code></pre></td></tr></tbody></table>

* Set these styles to column headers on the Header Configuration tab:

<table><thead><tr><th width="59.333333333333314">#</th><th width="108">Column</th><th>Column Header CSS styles</th></tr></thead><tbody><tr><td>1</td><td>New</td><td><pre class="language-css"><code class="lang-css">height: 100%;
max-width: 64px;
width: 64px;
padding: 0;
border-bottom: 0;
cursor: pointer;
</code></pre></td></tr><tr><td>2</td><td>Active</td><td><pre class="language-css"><code class="lang-css">border-radius: 4px 4px 0 0;
border-right: 0px none;
background-color: rgba(255,255,255,0.3);
border-bottom: 0px none;
margin: 20px 10px 0 10px;
border-top: 8px solid #7799DD;
padding: 0.5rem 0.75rem 0.5rem;
</code></pre></td></tr><tr><td>3</td><td>Escalated</td><td><pre class="language-css"><code class="lang-css">border-radius: 4px 4px 0 0;
border-right: 0px none;
background-color: rgba(255,255,255,0.3);
border-bottom: 0px none;
margin: 20px 10px 0 10px;
border-top: 8px solid #F73B00;
padding: 0.5rem 0.75rem 0.5rem;
</code></pre></td></tr><tr><td>4</td><td>Working</td><td><pre class="language-css"><code class="lang-css">border-radius: 4px 4px 0 0;
border-right: 0px none;
background-color: rgba(255,255,255,0.3);
border-bottom: 0px none;
margin: 20px 10px 0 10px;
border-top: 8px solid #F88D00;
padding: 0.5rem 0.75rem 0.5rem;
</code></pre></td></tr><tr><td>5</td><td>Closed</td><td><pre class="language-css"><code class="lang-css">border-radius: 4px 4px 0 0;
border-right: 0px none;
background-color: rgba(255,255,255,0.3);
border-bottom: 0px none;
margin: 20px 20px 0 10px;
border-top: 8px solid #04A300;
padding: 0.5rem 0.75rem 0.5rem;
</code></pre></td></tr></tbody></table>

* Set these styles to the footer of "New" column on the Footer Configuration tab:

```css
position: absolute;
top: 20px;
left: 84px;
width: calc(100% - 94px);
height: 47px;
border-radius: 4px 4px 0 0;
border-right: 0px none;
background-color: rgba(255,255,255,0.3);
border-bottom: 0px none;
border-top: 8px solid #CCCCCC;
padding: 0.5rem 0.75rem 0.5rem;
```

* Add [one row with one cell](https://docs.flexikanban.ai/tools/configuring-rows-cells-menus-and-buttons#rows) to the footer of "New" column. Set these properties to the cell:
  * Type = **Text**
  * CSS Styles = **Font-size: 1rem;**
* Set the cell Value to the following formula:

```clike
New FORMULA[
  IF(
    OR(
      ISBLANK({$Variables.SelectedCaseReason}),
      {$Variables.SelectedCaseReason} = ''
    ),
    'Cases without reason',
    {$Variables.SelectedCaseReason} cases
  )
]
```

* Add the following cells with Type = **Icon** to the header of "New" column. Set these properties to them:

<table data-full-width="true"><thead><tr><th width="60">#</th><th width="130">Value</th><th width="129">Title</th><th width="291">CSS Styles</th><th>Handlers</th></tr></thead><tbody><tr><td>1</td><td>utility:setup</td><td>Cases with "Installation" reason.</td><td><pre class="language-css"><code class="lang-css">top: 0;
color: FORMULA[IF({$Variables.SelectedCaseReason} = 'Installation',#FFFFFF,#7799DD)];
border-bottom: 0.125px solid #DDDBDA;
transform-origin: top left;
transform: scale(2);
align-items: center;
justify-content: center;
display: flex;
height: 32px;
width: 32px;
position: absolute;
background: FORMULA[IF({$Variables.SelectedCaseReason} = 'Installation',#7799DD,#FFFFFF)];
margin-left: -1px;
</code></pre></td><td><p>Cell handler:</p><ul><li>Type = <strong>Kanban API</strong></li><li>Value = <strong>Update Variables</strong></li><li><p>Parameters:</p><ul><li>kanbans = <strong>{$Variables.CurrentKanbanId}</strong></li><li>variables = <strong>{"SelectedCaseReason":"Installation"}</strong></li></ul></li></ul><p>Success handler:<br></p><ul><li>Type = <strong>Kanban API</strong></li><li>Value = <strong>Refresh Kanbans</strong></li><li><p>Parameters:</p><ul><li>kanbans = <strong>{$Variables.CurrentKanbanId}</strong></li></ul></li></ul></td></tr><tr><td>2</td><td>utility:custom_apps</td><td>Cases with "Equipment Complexity" reason.</td><td><pre class="language-css"><code class="lang-css">margin-left: -1px;
background: FORMULA[IF({$Variables.SelectedCaseReason} = 'Equipment Complexity',#7799DD,#FFFFFF)];
position: absolute;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
transform: scale(2);
transform-origin: top left;
border-bottom: 0.125px solid #DDDBDA;
color: FORMULA[IF({$Variables.SelectedCaseReason} = 'Equipment Complexity',#FFFFFF,#7799DD)];
top: 63px;
</code></pre></td><td><p>Cell handler:</p><ul><li>Type = Kanban API</li><li>Value = Update Variables</li><li><p>Parameters:</p><ul><li>kanbans = {$Variables.CurrentKanbanId}</li><li>variables = <strong>{"SelectedCaseReason":"Equipment Complexity"}</strong></li></ul></li></ul><p>Success handler:<br></p><ul><li>Type = Kanban API</li><li>Value = Refresh Kanbans</li><li><p>Parameters:</p><ul><li>kanbans = {$Variables.CurrentKanbanId}</li></ul></li></ul></td></tr><tr><td>3</td><td>utility:graph</td><td>Cases with "Performance" reason.</td><td><pre class="language-css"><code class="lang-css">position: absolute;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
transform: scale(2);
transform-origin: top left;
border-bottom: 0.125px solid #DDDBDA;
color: FORMULA[IF({$Variables.SelectedCaseReason} = 'Performance',#FFFFFF,#7799DD)];
top: 126px;
background: FORMULA[IF({$Variables.SelectedCaseReason} = 'Performance',#7799DD,#FFFFFF)];
margin-left: -1px;
</code></pre></td><td><p>Cell handler:</p><ul><li>Type = Kanban API</li><li>Value = Update Variables</li><li><p>Parameters:</p><ul><li>kanbans = {$Variables.CurrentKanbanId}</li><li>variables = <strong>{"SelectedCaseReason":"Performance"}</strong></li></ul></li></ul><p>Success handler:<br></p><ul><li>Type = Kanban API</li><li>Value = Refresh Kanbans</li><li><p>Parameters:</p><ul><li>kanbans = {$Variables.CurrentKanbanId}</li></ul></li></ul></td></tr><tr><td>4</td><td>utility:warning</td><td>Cases with "Breakdown" reason.</td><td><pre class="language-css"><code class="lang-css">margin-left: -1px;
background: FORMULA[IF({$Variables.SelectedCaseReason} = 'Breakdown',#7799DD,#FFFFFF)];
top: 189px;
color: FORMULA[IF({$Variables.SelectedCaseReason} = 'Breakdown',#FFFFFF,#7799DD)];
border-bottom: 0.125px solid #DDDBDA;
transform-origin: top left;
transform: scale(2);
align-items: center;
justify-content: center;
display: flex;
height: 32px;
width: 32px;
position: absolute;
</code></pre></td><td><p>Cell handler:</p><ul><li>Type = Kanban API</li><li>Value = Update Variables</li><li><p>Parameters:</p><ul><li>kanbans = {$Variables.CurrentKanbanId}</li><li>variables = <strong>{"SelectedCaseReason":"Breakdown"}</strong></li></ul></li></ul><p>Success handler:<br></p><ul><li>Type = Kanban API</li><li>Value = Refresh Kanbans</li><li><p>Parameters:</p><ul><li>kanbans = {$Variables.CurrentKanbanId}</li></ul></li></ul></td></tr><tr><td>5</td><td>utility:palette</td><td>Cases with "Equipment Design" reason.</td><td><pre class="language-css"><code class="lang-css">margin-left: -1px;
background: FORMULA[IF({$Variables.SelectedCaseReason} = 'Equipment Design',#7799DD,#FFFFFF)];
top: 252px;
color: FORMULA[IF({$Variables.SelectedCaseReason} = 'Equipment Design',#FFFFFF,#7799DD)];
border-bottom: 0.125px solid #DDDBDA;
transform-origin: top left;
transform: scale(2);
align-items: center;
justify-content: center;
display: flex;
height: 32px;
width: 32px;
position: absolute;
</code></pre></td><td><p>Cell handler:</p><ul><li>Type = Kanban API</li><li>Value = Update Variables</li><li><p>Parameters:</p><ul><li>kanbans = {$Variables.CurrentKanbanId}</li><li>variables = <strong>{"SelectedCaseReason":"Equipment Design"}</strong></li></ul></li></ul><p>Success handler:<br></p><ul><li>Type = Kanban API</li><li>Value = Refresh Kanbans</li><li><p>Parameters:</p><ul><li>kanbans = {$Variables.CurrentKanbanId}</li></ul></li></ul></td></tr><tr><td>6</td><td>utility:comments</td><td>Cases with "Feedback" reason.</td><td><pre class="language-css"><code class="lang-css">margin-left: -1px;
background: FORMULA[IF({$Variables.SelectedCaseReason} = 'Feedback',#7799DD,#FFFFFF)];
top: 315px;
color: FORMULA[IF({$Variables.SelectedCaseReason} = 'Feedback',#FFFFFF,#7799DD)];
border-bottom: 0.125px solid #DDDBDA;
transform-origin: top left;
transform: scale(2);
align-items: center;
justify-content: center;
display: flex;
height: 32px;
width: 32px;
position: absolute;
</code></pre></td><td><p>Cell handler:</p><ul><li>Type = Kanban API</li><li>Value = Update Variables</li><li><p>Parameters:</p><ul><li>kanbans = {$Variables.CurrentKanbanId}</li><li>variables = <strong>{"SelectedCaseReason":"Feedback"}</strong></li></ul></li></ul><p>Success handler:<br></p><ul><li>Type = Kanban API</li><li>Value = Refresh Kanbans</li><li><p>Parameters:</p><ul><li>kanbans = {$Variables.CurrentKanbanId}</li></ul></li></ul></td></tr><tr><td>7</td><td>utility:world</td><td>Cases with "Other" reason.</td><td><pre class="language-css"><code class="lang-css">margin-left: -1px;
background: FORMULA[IF({$Variables.SelectedCaseReason} = 'Other',#7799DD,#FFFFFF)];
top: 378px;
color: FORMULA[IF({$Variables.SelectedCaseReason} = 'Other',#FFFFFF,#7799DD)];
border-bottom: 0.125px solid #DDDBDA;
transform-origin: top left;
transform: scale(2);
align-items: center;
justify-content: center;
display: flex;
height: 32px;
width: 32px;
position: absolute;
</code></pre></td><td><p>Cell handler:</p><ul><li>Type = Kanban API</li><li>Value = Update Variables</li><li><p>Parameters:</p><ul><li>kanbans = {$Variables.CurrentKanbanId}</li><li>variables = <strong>{"SelectedCaseReason":"Other"}</strong></li></ul></li></ul><p>Success handler:<br></p><ul><li>Type = Kanban API</li><li>Value = Refresh Kanbans</li><li><p>Parameters:</p><ul><li>kanbans = {$Variables.CurrentKanbanId}</li></ul></li></ul></td></tr><tr><td>8</td><td>utility:error</td><td>Cases without reason set.</td><td><pre class="language-css"><code class="lang-css">margin-left: -1px;
background: FORMULA[IF(OR(ISBLANK({$Variables.SelectedCaseReason}), {$Variables.SelectedCaseReason} = ''),#7799DD,#FFFFFF)];
top: 441px;
position: absolute;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
transform: scale(2);
transform-origin: top left;
border-bottom: 0.125px solid #DDDBDA;
color: FORMULA[IF(OR(ISBLANK({$Variables.SelectedCaseReason}), {$Variables.SelectedCaseReason} = ''),#FFFFFF,#7799DD)];
</code></pre></td><td><p>Cell handler:</p><ul><li>Type = Kanban API</li><li>Value = Update Variables</li><li><p>Parameters:</p><ul><li>kanbans = {$Variables.CurrentKanbanId}</li><li>variables = <strong>{"SelectedCaseReason":null}</strong></li></ul></li></ul><p>Success handler:<br></p><ul><li>Type = Kanban API</li><li>Value = Refresh Kanbans</li><li><p>Parameters:</p><ul><li>kanbans = {$Variables.CurrentKanbanId}</li></ul></li></ul></td></tr></tbody></table>

### Configure Card

* [Add 1 card](https://docs.flexikanban.ai/standard-kanban/configure-kanban/working-with-kanban-layout) to dashboard
* Set Data Source Type to "**Case**"
* Set [card layout](https://docs.flexikanban.ai/standard-kanban/configure-card/how-to-configure-card-layout) to necessary type. In this example it is set to **SObject** and Record ID is set to **{**&#x43;ase.Id}:

<figure><img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FXwh6rkfErUwSuVZFNtLa%2Fimage.png?alt=media&#x26;token=e539b5f1-5643-431d-a8f5-2cda8b2185cd" alt=""><figcaption></figcaption></figure>

* Set card layout header to show the number of active Case record:

<figure><img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FqzZp7noStvFenjPDgXEl%2Fimage.png?alt=media&#x26;token=45b8e915-06ed-4a05-b6d0-566cbe0d7b20" alt=""><figcaption></figcaption></figure>

* Open [Card Compact Layout editor](https://docs.flexikanban.ai/standard-kanban/configure-card/how-to-configure-card-compact-layout) and add these styles to the Card settings:

```css
padding-left: 44px;
```

* By default Card Compact Layout contains one component of text type; this component contains Record ID.  Click on it and change its Value to **{Case.CaseNumber} - {Case.SuppliedName}**
* Leave its Title empty
* Set its width to **100** (leave default)
* Leave Handler and Styles empty
* Add Icon component #2 at the left of the previous
* Set its Value to the following formula (it will dynamically set icon depending on case priority):

```clike
FORMULA[
  CASE(
    {Case.Priority},
    low, 'utility:like',
    medium, 'utility:touch_action',
    high, 'utility:dislike',
    'utility:waits'
  )
]
```

* Set its Title to the following formula (it will dynamically change the icon tooltip depending on case priority):

```clike
Priority FORMULA[CASE({Case.Priority}, low, ': low', medium, ': medium', high, ': high', 'not set')]
```

* Do not set handlers
* Set CSS Styles to these:

```css
width:24px;
background-color:FORMULA[CASE({Case.Priority}, low, #04A300, medium, #F88D00, high, #F73B00, #7799DD)];
color:#FFFFFF;
border-radius:24px;
height:24px;
display:flex;
justify-content:center;
align-items:center;
top:50%;
position:absolute;
margin-top:-12px;
left:10px;
```

* Add text component #3 below
* Set its value to **Reason: {Case.Reason}**
* Do not set its Title, handlers and styles<br>
* Add text component #4 below
* Set its value to **Type: {Case.Type}**
* Do not set its Title, handlers and styles\
  &#x20;
* Add text component #5 below
* Set its value to **Origin: {Case.Origin}**
* Do not set its Title, handlers and styles\
  &#x20;
* Add text component #6 below
* Set its value to <mark style="color:red;">`FORMULA[IF(ISBLANK({Case.ClosedDate}), '',Closed: {Case.ClosedDate})]`</mark>
* Do not set its Title, handlers and styles&#x20;

### 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:
  * Drag-n-drop allowed to ALL columns
  * Drop behavior for source column: Remove card
  * Drop behavior for target column: Refresh

### 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. In this example action will be the same for all columns, so, no need to configure them separately.

Click on card and add a new action with these properties:

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

In the Field Update Settings section configure this:

* Object Name = **Case**
* Fields:
  * Name = **Status**
  * Value = **{$TargetColumn.a\_\_Status}**
* Conditions:
  * **Case ID eqials {case.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-cases-dashboard.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.