Demo Example: Gantt Dashboard
Last updated
Last updated
The Gantt Dashboard represents events as classic Gantt chart. It allows dashboard user to view a project or events schedule on the timeline, and manage them. Here is how such dashboard can look like:
To make this dashboard administrator should do actions listed below:
Give it a name and description.
Select default "White" theme.
Save dashboard and go to Kanban builder.
from = FORMULA[STARTOFWEEK({$System.Date})]
to = FORMULA[ADDDAYS(STARTOFWEEK({$System.Date}),7,false)]
range = week
columnName = FORMULA[FORMAT(STARTOFWEEK({$System.Date}),'d MMM yyyy') + ' - ' + FORMAT(ADDDAYS(STARTOFWEEK({$System.Date}),6,false),'d MMM yyyy')]
dayOfWeek = FORMULA[{$System.Date} - STARTOFWEEK({$System.Date})]
Go to Statistics Configuration.
Add the cell which will overlay unnecessary views selector. Set these properties to it:
Type = Text
Value = Gantt Dashboard
Set CSS Styles to this cell:
Add another cell with these properties:
Type = Text
Set Value to the following formula:
Add 1 column to the dashboard.
Name it {$Variables.columnName}
Leave column width default ("auto")
Leave column "Is Active" checkbox default (checked)
Set these properties to the column:
Data Source Type = SObject
Data Source = Event
Order = Start Date Time, asc
Page size = 20
Set the following conditions to the column (set type to "Formula" to all):
End Date Time >= FORMULA[FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]
Start Date Time < FORMULA[FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]
End Date Time < FORMULA[FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]
Start Date Time >= FORMULA[FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]
Start Date Time < FORMULA[FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]
End Date Time >= FORMULA[FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]
Set this logic to column conditions:
Add a background-image property to column body CSS styles. Set its value to this code (don't think about formatting - the code below will lose it after being inserted into CSS Rule Value input field):
Set the following Rows with Cells on them (all cells should have Type = Text):
1
2
3
1
Jan
January
2
Feb
February
3
Mar
March
4
Apr
April
5
May
May
6
Jun
June
7
Jul
July
8
Aug
August
9
Sep
September
10
Oct
October
11
Nov
November
12
Dec
December
Set names from 1 to 31 to them
1...28
From 1 to 28
29
29
30
30
31
31
Add 7 cells
Set CSS Styles to all of them to the following:
Set their Values to these:
1
2
3
4
5
6
7
Set Data Source Type to "Event".
Name
Event form
Data Source Object
Event
Multi Page Form?
false
Show navigation panel
true
Buttons configuration
Check "Save" button for "Edit" mode only. Uncheck other.
Header configuration
{$Event.Subject} (for all modes)
Add these elements to the form:
Type = Section
Name = section
Title = '' (leave empty)
Properties:
Columns = 2
Show on Edit page = true
Show on View page = true
Scrollable = false
Type = Button
Name = button
Title = Close
Properties:
Show on Edit page = true
Show on View page = true
The following elements all should be added into section configured above. All these elements should be Data Source Fields:
Data Source Field = Subject
Name = Subject
Title = Subject
Data Source Field = Type
Name = Type
Title = Type
Data Source Field = EventSubtype
Name = EventSubtype
Title = Subtype
Data Source Field = StartDateTime
Name = StartDateTime
Title = Start Date Time
Data Source Field = EndDateTime
Name = EndDateTime
Title = End Date Time
Data Source Field = Description
Name = Description
Title = Description
Set properties of all Data Source Fields above to:
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
Option groups (for picklists) = (not set)
Action name and Title = Close Panel
Type = Form API
Form Action Type = Fire Event
Name = e.c.:ApplicationEvent
Parameters = Name: data; Value Type: Object; Value: {"componentType":"c:KanBanPanelComponent","method":"hideCard"}
Has Conditions = false
Action name and Title = Refresh Column
Type = Form API
Form Action Type = Fire Event
Name = e.c.:ApplicationEvent
Parameters = Name: data; Value Type: Object; Value: {"componentType":"c:KanBanColumnComponent","method":"refresh","params":{"kanbans":"{$FormParameters.kanban}"}}
Has Conditions = true
Conditions = 1: Form.StartDateTime not equal to {$Event.StartDateTime}; 2: Form.EndDateTime not equal to {$Event.EndDateTime}
Conditions logic = {1} OR {2}
Add the following events to the form:
1
Form
Type: onAfterSave Enabled: true
"Refresh Column" action without parameters
2
"Close" button
Type: onClick Enabled: true
"Close Panel" action without parameters
Set these parameters for the Card Layout body:
id = {Event.Id}
mode = edit
Set other Card Layout properties:
Position = Modal
Hide Header = false
Hide Footer = true
Go to "Header Configuration" tab and set Text in Title Settings to "{event.Subject}".
Set the following CSS Styles to the whole Card:
Add a background-color property to Card CSS Styles and set its value to the following formula:
Add a border-radius CSS property and set its value to the following formula:
Add a left CSS property and set its value to the following formula:
Add a width CSS property and set its value to the following formula:
Change the Value of default existing Card Component to {Event.Subject}.
Set its Title to the same value.
Set its CSS Styles to these:
Set its Value to the following formula:
Set its Title to {Event.Subject}
Set its CSS Styles to these:
Set its Value to this formula:
Set its Title to this formula:
Set its Handler to this one:
Type = SObject
Value = {$Object.Id}
Parameters: id = {Event.Id}
Set its CSS Styles to these:
Create Action Group named "Get Previous Dates" and add following actions to it:
1
Get Prev Quarter Dates
Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =
Variable Type = JSON Variables JSON =
2
Get Prev Year Dates
Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =
Variable Type = JSON Variables JSON =
3
Get Prev Month Dates
Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =
Variable Type = JSON Variables JSON =
4
Get Prev Week Dates
Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =
Variable Type = JSON Variables JSON =
5
Define Column Name
Type = Define Variable Execute = Always Variable Type = Text Variable Name = columnName Variable Value =
6
Define Day of Week
Type = Define Variable Execute = Always Variable Type = Text Variable Name = dayOfWeek Variable Value =
Create Action Group named "Get Next Dates" and add following actions to it:
1
Get Next Week Dates
Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =
Variable Type = JSON Variables JSON =
2
Get Next Quarter Dates
Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =
Variable Type = JSON Variables JSON =
3
Get Next Year Dates
Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =
Variable Type = JSON Variables JSON =
4
Get Next Month Dates
Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =
Variable Type = JSON Variables JSON =
5
Define Column Name
(this is the same action that was already created for the "Get Previous Dates" action group)
6
Define Day of Week
(this is the same action that was already created for the "Get Previous Dates" action group)
Create Action Group named "Get Date Ranges" and add following actions to it:
1
Get Week Dates
Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =
Variable Type = JSON Variables JSON =
2
Get Year Dates
Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =
Variable Type = JSON Variables JSON =
3
Get Month Dates
Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =
Variable Type = JSON Variables JSON =
4
Get Quarter Dates
Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =
Variable Type = JSON Variables JSON =
5
Define Column Name
(this is the same action that was already created for the "Get Previous Dates" action group)
6
Define Day of Week
(this is the same action that was already created for the "Get Previous Dates" action group)
Button
Basic configuration:
Type = Icon
Title = Previous {$Variables.range}
Icon = utility:left
Handler configuration:
Type = Action Group
Value = Get Previous Dates
Parameters = variables = {"button":"prev"}
Success Handler = Kanban API -> Refresh Kanbans
Menu
Basic configuration:
Type = Button
Label = FORMULA[REPLACE({$Variables.range},SUBSTR(,0,1),UPPER(SUBSTR({$Variables.range},0,1)))]
Title = {$Variables.range}
Position = Right and Top
Button
Basic configuration:
Type = Icon
Title = Next {$Variables.range}
Icon = utility:right
Handler configuration:
Type = Action Group
Value = Get Next Dates
Parameters = variables = {"button":"next"}
Success Handler = Kanban API -> Refresh Kanbans
Add Menu Buttons to the Menu created above and set these properties for them:
Basic Configuration:
Type = Standard
Label = Quarter
Title = Quarter
Conditions = FORMULA[{$Variables.range != 'quarter']
Handler configuration:
Type = Action Group
Value = Get Date Ranges
Parameters = variables = {"range":"quarter"}
Success Handler = Kanban API -> Refresh Kanbans
Basic Configuration:
Type = Standard
Label = Month
Title = Month
Conditions = FORMULA[{$Variables.range != 'month']
Handler configuration:
Type = Action Group
Value = Get Date Ranges
Parameters = variables = {"range":"month"}
Success Handler = Kanban API -> Refresh Kanbans
Basic Configuration:
Type = Standard
Label = Year
Title = Year
Conditions = FORMULA[{$Variables.range != 'year']
Handler configuration:
Type = Action Group
Value = Get Date Ranges
Parameters = variables = {"range":"year"}
Success Handler = Kanban API -> Refresh Kanbans
Basic Configuration:
Type = Standard
Label = Week
Title = Week
Conditions = FORMULA[{$Variables.range != 'week']
Handler configuration:
Type = Action Group
Value = Get Date Ranges
Parameters = variables = {"range":"week"}
Success Handler = Kanban API -> Refresh Kanbans
Go to and create new standard dashboard.
Go to tab. Add these variables:
Set this to column header in :
Set these CSS styles to column body in :
Set these CSS styles to column footer on :
We're moving column footer to the top in order to have a header where we can use
Add 31
Set these to them:
This card does not require configuring in the one existing column. Just leave "Visible in this column" checkbox checked.
to dashboard.
to "Form".
Click "+" button to add new Form. Create with these properties:
Add these :
Add of "Icon" type to the left of the previous.
Add of "Text" type below the two previous.
There are several action groups needed to be created. These groups are listed below with actions they contain. Order of actions in groups is determined by actions indexes: the action with lowest index will be executed first. Refer to proper articles to know how to work with and .
to the dashboard:
