Demo Example: Task Dashboard

The Tasks Dashboard represents a way to manage tasks, visually indicate their status. Here is how this dashboard can look like:

This dashboard shows tasks in 5 columns; some of tasks with similar status are shown in the same column. Dragging the task card from one column to another user can easily change its status.

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.

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	Edit mode: Edit Task View mode: View Task New mode: New Task

• Add these elements to the form:

Type	Name	Title	Properties
Button	Button	Close	Show on Edit page: true Show on View Page: true Conditional Style: type = hide conditions: object = Task (Form Object) field = Activity ID operator = is not null Event: type = onClick conditions not set handler "Close" action without parameters (creation of it see in next table)
Section	section		Columns: 2 Show on Edit page: true Show on View Page: true Scrollable: false
Section	section 1		Columns: 2 Show on Edit page: true Show on View Page: true Scrollable: false
Section	attachments	Attachments	Columns: 2 Show on Edit page: true Show on View Page: true Scrollable: false

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

Section name	Field	Name	Title	Specific properties
Section	Subject	Subject	Subject
	Description	Description	Description
	Status	Status	Status	Read Only = true Condition Style: type = hide conditions: object = Task (Form Object) field = Activity ID operator = is null
Section 1	Assigned To ID	OwnerId	Assignee
	Priority	Priority	Priority
	Due Date Only	ActivityDate	Due Date
	Related To ID	WhatId	Related To ID
Attachments	File (Options)	file1		Source type = Conditions Source: Title = 'file1' Fields: [{"label":"Title","localName":"Title","type":"Text","value":"file1","visible":false,"disabled":false}]
	File (Options)	file2		Source type = Conditions Source: Title = 'file2' Fields: [{"label":"Title","localName":"Title","type":"Text","value":"file2","visible":false,"disabled":false}]
	File (Options)	file3		Source type = Conditions Source: Title = 'file3' Fields: [{"label":"Title","localName":"Title","type":"Text","value":"file3","visible":false,"disabled":false}]
	File (Options)	file4		Source type = Conditions Source: Title = 'file4' Fields: [{"label":"Title","localName":"Title","type":"Text","value":"file4","visible":false,"disabled":false}]

• 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 dashboard

Go to Basic Configuration and set CSS Styles to:

• Header CSS Styles = background: #f7f7f7

• Title CSS Styles = color: #333

Then open Buttons Configuration and add 2 buttons:

Configure button "New Task":

Configure handler of this button:

• Type = Form

• Value = Task Form (form that was created before)

• Parameters = {"mode":"edit"}

Configure button "Print Dashboard":

Configure handler of this button:

• Type = KanBan API

• Value = Print KanBan

• Parameters = {"kanbanId":"{$KanBan.Id}"}

Configure columns

• Add 5 columns to the dashboard.

• 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 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 of "Text" type into column footer on Footer Configuration tab:

Value	CSS Styles
Totals:	font-weight: bold;
FORMULA[COLUMNTOTAL()]	color: #333; text-align: right;

Configure Card

• Add 1 card to dashboard

• Set Data Source Type to Task

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

Set card layout header to show name of active task:

Open Card Compact Layout editor:

• add CSS Styles to the card settings:

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

• Leave its width default (100)

• Expend "Styles" section and set the following:

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:

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 for card on each column:

• Drop behavior for source column: Remove card

• Drop behavior for target column: Refresh

Set allowed drag-n-drop directions:

Column to drag From	New	in Progress	QA Ready	Completed	On Hold
New		+	+		+
In progress	+		+	+	+
QA Ready		+		+	+
Completed		+
On Hold	+	+

Configure Card Actions

To add a sense to Cards dragging some 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}