Demo Example: Gantt Dashboard

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:

Create new dashboard

Go to dashboard creation wizard and create new standard dashboard.
Give it a name and description.
Select default "White" theme.
Save dashboard and go to Kanban builder.

Configure dashboard

Go to Variables Configuration tab. Add these variables:

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:

font-weight: bold;
background-color: #F7F7F7;
font-size: 1.5em;
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 1;
padding: 0 1.5em 0 1.5em;
display: flex;
align-items: center;

Add another cell with these properties:
- Type = Text
Set Value to the following formula:

FORMULA[
  IF(
    {$Variables.range} = 'week',
    '',
    IF(
      {$Variables.range} = 'month',
      FORMAT({$Variables.from},'MMMM yyyy'),
      IF(
        {$Variables.range} = 'quarter',
        FORMAT(ADDDAYS({$Variables.from},1,false), 'yyyy') + ', Quarter ' + CASE(FORMAT(ADDDAYS({$Variables.to}, -1, false), 'M'),'3','I','6','II','9','III','IV'),
        FORMAT({$Variables.from}, 'yyyy')
      )
    )
  )
]

This formula sets the text at the middle of Kanban header to represent currently selected date range.

Configure column

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:

({1} AND {3}) OR ({2} AND {4}) OR ({5} AND {6})

Set this CSS style to column header in Header Configuration tab:

display: none;

Set these CSS styles to column body in Body configuration tab:

padding-top: 2.5rem;
background-color: #fff;
padding-right: 0;
padding-left: 0;

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

repeating-linear-gradient(
  90deg,
  transparent calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (6 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
  ),
  rgba(150,150,255,0.1) calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (6 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
  ),
  rgba(150,150,255,0.1) calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (8 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
  ),
  transparent calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (8 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
  ),
  transparent calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (13 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
  )
),

repeating-linear-gradient(
  90deg,
  transparent calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (7 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
    -
    1px
  ),
  RGBA(187,187,187,0.56) calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (7 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
    -
    1px
  ),
  RGBA(187,187,187,0.56) calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (7 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
  ),
  transparent calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (7 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
  ),
  transparent calc(
    (100% / FORMULA[DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)])
    *
    (14 - FORMULA[IF({$Variables.range} = 'week', 0, {$Variables.dayOfWeek})])
    -
    1px
  )
)

FORMULA[
  IF(
    {$Variables.range} = 'year',
    '',
    ', repeating-linear-gradient(
      90deg,
      #fff 0px,
      #fff calc(
        100%
        /
        ' + TEXT(DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)) + '
        -
        1px
      ),
      #eee calc(
        100%
        /
        ' + TEXT(DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)) + '
        -
        1px
      ),
      #eee calc(
        100%
        /
        ' + TEXT(DAYSBETWEEN(DATETIMEVALUE({$Variables.to}), DATETIMEVALUE({$Variables.from}), false)) + '
      )
    )'
  )
]

This big formula is used to make column background depending on date range selected:

First background gradient draws weekends
Second gradient draws borders between weeks
Third gradient draws days borders (except when date range = year, because only weeks are drawn due too small days widths)

Set these CSS styles to column footer on Footer Configuration tab:

padding: 0.4rem 0 0.25rem 0;
top: 0px;
background: transparent;
width: 100%;
position: absolute;
border-bottom: 2px solid #ddd;

We're moving column footer to the top in order to have a header where we can use Rows

Set the following Rows with Cells on them (all cells should have Type = Text):

Row 1 (for Quarter date range)

Cell Value

Cell CSS styles

Row 2 (for Year date range)

Cell Value

Cell Title

Cell CSS Styles

Jan

January

Feb

February

Mar

March

Apr

April

May

Jun

June

Jul

July

Aug

August

Sep

September

Oct

October

Nov

November

Dec

December

Row 3 (for Month date range)

Add 31 cells.
Set names from 1 to 31 to them
Set these CSS Styles to them:

Cell Value

Cell CSS Styles

1...28

From 1 to 28

Days from 1 to 28 are shown for each month. Days from 29 to 31 are shown depending on specific month length.

Row 4 (for Week date range)

Add 7 cells
Set CSS Styles to all of them to the following:

text-align: center;
width: calc(100% / 7);
display: FORMULA[IF({$Variables.range} = 'week',block,none)];

Set their Values to these:

Cell Value

Configure card

This card does not require configuring Junction Settings in the one existing column. Just leave "Visible in this column" checkbox checked.

Add one card to dashboard.
Set Data Source Type to "Event".

Configure Card Layout

Set Card Layout to "Form".
Click "+" button to add new Form. Create new form with these properties:

Property

Value

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)

Add these Form Actions:

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

Element what event is added to

Event properties

Event Handler

Form

Type: onAfterSave Enabled: true

"Refresh Column" action without parameters

"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}".

The Layout described above will show the form with basic Event properties that can be edited.

Configure Card Compact Layout

Set the following CSS Styles to the whole Card:

color: #ffffff;
border: 0px none;
padding: 0;
box-shadow: 1px 1px 4px rgba(0,0,0,0.3) inset;

Add a background-color property to Card CSS Styles and set its value to the following formula:

FORMULA[
  IF(
    CONTAINS(LOWER({Event.Subject}), 'meeting'),
    #75c769,
    IF(
      OR(
        CONTAINS(LOWER({Event.Subject}), 'send'),
        CONTAINS(LOWER({Event.Subject}), 'letter'),
        CONTAINS(LOWER({Event.Subject}), 'email')
      ),
      #DE5449,
      IF(
        CONTAINS(LOWER({Event.Subject}), 'call'),
        #71afd0,
        #d6b37a
      )
    )
  )
]

This formula sets the Card background color depending on keywords the subject of Event can contain:

Event with "meeting" word in subject is light green
Event with "send", "letter" or "email" word is red
Event with "call" word is blue
Other events are yellow brown

Add a border-radius CSS property and set its value to the following formula:

FORMULA[
    IF(
        {Event.StartDateTime} &lt; DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
        '0 ',
        '5px '
    ) + 
    IF(
        {Event.EndDateTime} &gt; DATETIMEVALUE(FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
        '0 0 ',
        '5px 5px '
    ) + 
    IF(
        {Event.StartDateTime} &lt; DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
        '0',
        '5px'
    )
]

This formula sets the border radius of Cards (that are Gantt Chart Lines) corners to represent if the current Gantt line is started or ended in the shown date range or not. If the start (or end) date is out of range, both left (or right) corners will not be rounded, otherwise they will be rounded.

Add a left CSS property and set its value to the following formula:

FORMULA[
    SCALE(
        IF(
            {Event.StartDateTime} &lt; DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
            0,
            ({Event.StartDateTime} - DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}'))) * 100 / (
              DAYSBETWEEN(
                  DATETIMEVALUE(FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
                  DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
                  false
              )
            )
        ),
        8
    )
]%

This formula calculates position of the Card left side that should represent the Start Date of Event. The SCALE(***,8) function truncates the result to 8 digits in order to avoid long decimal fractions.

Add a width CSS property and set its value to the following formula:

FORMULA[
  SCALE(
    (
      (
        IF(
          {Event.EndDateTime} &gt; DATETIMEVALUE(FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}'))
          ,
          100
          ,
          (
            ({Event.EndDateTime} - DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}'))) * 100 / (
              DAYSBETWEEN(
                DATETIMEVALUE(FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
                DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
                false
              )
            )
          )
        )
      )
      -
      (
        IF(
          {Event.StartDateTime} &lt; DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}'))
          ,
          0
          ,
          (
            ({Event.StartDateTime} - DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}'))) * 100 / (
              DAYSBETWEEN(
                DATETIMEVALUE(FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
                DATETIMEVALUE(FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')),
                false
              )
            )
          )
        )
      )
    ),
    8
  )
]%

This formula calculates the width of the Card. Position of Card right side after applying left and width CSS properties will represent the End Date of Event. Width of the card, thus, represents its duration.

Change the Value of default existing Card Component to {Event.Subject}.
Set its Title to the same value.
Set its CSS Styles to these:

width: calc(100% - 24px);
padding: 0.25rem 0.5rem 0 0.5rem;
font-size: 1.1em;

Add one more Card Component of "Icon" type to the left of the previous.
Set its Value to the following formula:

utility:FORMULA[
  IF(
    CONTAINS(LOWER({Event.Subject}), 'meeting'),
    'groups',
    IF(
      OR(
        CONTAINS(LOWER({Event.Subject}), 'send'),
        CONTAINS(LOWER({Event.Subject}), 'letter'),
        CONTAINS(LOWER({Event.Subject}), 'email')
      ),
      'email',
      IF(
        CONTAINS(LOWER({Event.Subject}), 'call'),
        'call',
        'note'
      )
    )
  )
]

This formula sets the icon depending on keywords the subject of Event can contain:

Event with "meeting" word in subject has utility:groups icon
Event with "send", "letter" or "email" word has utility:email icon
Event with "call" word has utility:call icon
Other events have utility:note icon

Set its Title to {Event.Subject}
Set its CSS Styles to these:

width: 16px;
padding: 0.25rem 0 0 0.5rem;
box-sizing: content-box;

Add one more Card Component of "Text" type below the two previous.
Set its Value to this formula:

◄ FORMULA[FORMAT({Event.StartDateTime},'dd MMM yyyy, HH:mm')] ─  FORMULA[FORMAT({Event.EndDateTime},'dd MMM yyyy, HH:mm')] ►

Set its Title to this formula:

Start date: FORMULA[FORMAT({Event.StartDateTime},'dd MMM yyyy, HH:mm')]; end date: FORMULA[FORMAT({Event.EndDateTime},'dd MMM yyyy, HH:mm')]

Set its Handler to this one:
- Type = SObject
- Value = {$Object.Id}
- Parameters: id = {Event.Id}
Set its CSS Styles to these:

font-size: 0.9em;
padding: 0 0.5rem 0.25rem 0.5rem;

Configure dashboard actions and action groups

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 actions and action groups.

"Get Previous Dates" action group

Create Action Group named "Get Previous Dates" and add following actions to it:

Index

Name

Properties

Get Prev Quarter Dates

Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =

Variable Type = JSON Variables JSON =

Get Prev Year Dates

Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =

Variable Type = JSON Variables JSON =

Get Prev Month Dates

Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =

Variable Type = JSON Variables JSON =

Get Prev Week Dates

Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =

Variable Type = JSON Variables JSON =

Define Column Name

Type = Define Variable Execute = Always Variable Type = Text Variable Name = columnName Variable Value =

Define Day of Week

Type = Define Variable Execute = Always Variable Type = Text Variable Name = dayOfWeek Variable Value =

"Get Next Dates" action group

Create Action Group named "Get Next Dates" and add following actions to it:

Index

Name

Properties

Get Next Week Dates

Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =

Variable Type = JSON Variables JSON =

Get Next Quarter Dates

Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =

Variable Type = JSON Variables JSON =

Get Next Year Dates

Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =

Variable Type = JSON Variables JSON =

Get Next Month Dates

Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =

Variable Type = JSON Variables JSON =

Define Column Name

(this is the same action that was already created for the "Get Previous Dates" action group)

Define Day of Week

(this is the same action that was already created for the "Get Previous Dates" action group)

"Get Date Ranges" action group

Create Action Group named "Get Date Ranges" and add following actions to it:

Index

Name

Properties

Get Week Dates

Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =

Variable Type = JSON Variables JSON =

Get Year Dates

Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =

Variable Type = JSON Variables JSON =

Get Month Dates

Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =

Variable Type = JSON Variables JSON =

Get Quarter Dates

Type = Define Variable Execute = With Conditions Conditions type = Formula Formula Expression =

Variable Type = JSON Variables JSON =

Define Column Name

(this is the same action that was already created for the "Get Previous Dates" action group)

Define Day of Week

(this is the same action that was already created for the "Get Previous Dates" action group)

Configure dashboard buttons and menus

Add buttons and menu to the dashboard:

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 = ButtonLabel = 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

Last updated 3 months ago