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:
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):
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:
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:
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:
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}
Last updated