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:

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

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:

Go to Statistics Configuration. Add the cell which will overlay unnecessary views selector:

  • Type = Text

  • Value =

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

Set CSS Styles to this cell:

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 tab. Add these variables:

#Variable NameVariable Value

1

SelectedCaseReason

Installation

2

CurrentKanbanId

{$KanBan.Id}

Configure columns

  • Add 5 columns 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 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):

ColumnField NameOperatorTypeValue

New

Case Reason Status Status Status Status

equals not equal to not equal to not equal to not equal to

Formula Value Value Value Formula

{$Variables.SelectedCaseReason} Working Escalated Closed Active

Active

Case Reason Status

equals equals

Formula Formula

{$Variables.SelectedCaseReason} Active

Escalated

Case Reason Status

equals equals

Formula Value

{$Variables.SelectedCaseReason} Escalated

Working

Case Reason Status

equals equals

Formula Value

{$Variables.SelectedCaseReason} Working

Closed

Case Reason Status

equals equals

Formula Value

{$Variables.SelectedCaseReason} Closed

  • Add custom attribute to each column with name = Status and value equal to column name

  • Set the following styles for column bodies on Body Configuration tab:

#ColumnColumn Body CSS styles

1

New

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;

2

Active

border-radius: 0 0 4px 4px;
background: rgba(255,255,255,0.3);
border-right: 0px none;
margin: 0 10px 20px 10px;

3

Escalated

4

Working

5

Closed

border-radius: 0 0 4px 4px;
background: rgba(255,255,255,0.3);
border-right: 0px none;
margin: 0 20px 20px 10px;

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

#ColumnColumn Header CSS styles

1

New

height: 100%;
max-width: 64px;
width: 64px;
padding: 0;
border-bottom: 0;
cursor: pointer;

2

Active

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;

3

Escalated

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;

4

Working

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;

5

Closed

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;

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

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

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:

#ValueTitleCSS StylesHandlers

1

utility:setup

Cases with "Installation" reason.

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;

Cell handler:

  • Type = Kanban API

  • Value = Update Variables

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}

    • variables = {"SelectedCaseReason":"Installation"}

Success handler:

  • Type = Kanban API

  • Value = Refresh Kanbans

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}

2

utility:custom_apps

Cases with "Equipment Complexity" reason.

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;

Cell handler:

  • Type = Kanban API

  • Value = Update Variables

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}

    • variables = {"SelectedCaseReason":"Equipment Complexity"}

Success handler:

  • Type = Kanban API

  • Value = Refresh Kanbans

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}

3

utility:graph

Cases with "Performance" reason.

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;

Cell handler:

  • Type = Kanban API

  • Value = Update Variables

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}

    • variables = {"SelectedCaseReason":"Performance"}

Success handler:

  • Type = Kanban API

  • Value = Refresh Kanbans

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}

4

utility:warning

Cases with "Breakdown" reason.

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;

Cell handler:

  • Type = Kanban API

  • Value = Update Variables

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}

    • variables = {"SelectedCaseReason":"Breakdown"}

Success handler:

  • Type = Kanban API

  • Value = Refresh Kanbans

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}

5

utility:palette

Cases with "Equipment Design" reason.

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;

Cell handler:

  • Type = Kanban API

  • Value = Update Variables

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}

    • variables = {"SelectedCaseReason":"Equipment Design"}

Success handler:

  • Type = Kanban API

  • Value = Refresh Kanbans

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}

6

utility:comments

Cases with "Feedback" reason.

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;

Cell handler:

  • Type = Kanban API

  • Value = Update Variables

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}

    • variables = {"SelectedCaseReason":"Feedback"}

Success handler:

  • Type = Kanban API

  • Value = Refresh Kanbans

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}

7

utility:world

Cases with "Other" reason.

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;

Cell handler:

  • Type = Kanban API

  • Value = Update Variables

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}

    • variables = {"SelectedCaseReason":"Other"}

Success handler:

  • Type = Kanban API

  • Value = Refresh Kanbans

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}

8

utility:error

Cases without reason set.

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)];

Cell handler:

  • Type = Kanban API

  • Value = Update Variables

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}

    • variables = {"SelectedCaseReason":null}

Success handler:

  • Type = Kanban API

  • Value = Refresh Kanbans

  • Parameters:

    • kanbans = {$Variables.CurrentKanbanId}

Configure Card

  • Add 1 card to dashboard

  • Set Data Source Type to "Case"

  • Set card layout to necessary type. In this example it is set to SObject and Record ID is set to {Case.Id}:

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

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):

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):

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

  • Do not set handlers

  • Set CSS Styles to these:

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

  • Add text component #4 below

  • Set its value to Type: {Case.Type}

  • Do not set its Title, handlers and styles

  • Add text component #5 below

  • Set its value to Origin: {Case.Origin}

  • Do not set its Title, handlers and styles

  • Add text component #6 below

  • Set its value to FORMULA[IF(ISBLANK({Case.ClosedDate}), '',Closed: {Case.ClosedDate})]

  • Do not set its Title, handlers and styles

Configure Column Junctions

  • Set 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 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}

Last updated