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:

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.

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

Column	Field Name	Operator	Type	Value
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:

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

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

#	Value	Title	CSS Styles	Handlers
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:

• Open Card Compact Layout editor and add these styles to the Card settings:

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}