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:

  1. from = FORMULA[STARTOFWEEK({$System.Date})]

  2. to = FORMULA[ADDDAYS(STARTOFWEEK({$System.Date}),7,false)]

  3. range = week

  4. columnName = FORMULA[FORMAT(STARTOFWEEK({$System.Date}),'d MMM yyyy') + ' - ' + FORMAT(ADDDAYS(STARTOFWEEK({$System.Date}),6,false),'d MMM yyyy')]

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

  1. End Date Time >= FORMULA[FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]

  2. Start Date Time < FORMULA[FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]

  3. End Date Time < FORMULA[FORMAT({$Variables.to}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]

  4. Start Date Time >= FORMULA[FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]

  5. Start Date Time < FORMULA[FORMAT({$Variables.from}, 'yyyy-MM-dd{QUOTE}T00:00:00Z{QUOTE}')]

  6. 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})
display: none;
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)

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 ValueCell CSS styles

1

FORMULA[FORMAT({$Variables.from},'MMMM')]
box-shadow: 0 -0.4rem 0 rgba(150,150,255,0.25), 0 0.25rem 0 rgba(150,150,255,0.25);
background-color: rgba(150,150,255,0.25);
display: FORMULA[IF({$Variables.range} = 'quarter',block,none)];
text-align: center;
width: calc(100% / FORMULA[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)] * FORMULA[IF(         FORMAT(ADDDAYS({$Variables.from},15,false),'M') = '4',         30,         31     ) ] );

2

FORMULA[FORMAT(ADDDAYS({$Variables.from},45,false),'MMMM')]
box-shadow: 0 -0.4rem 0 rgba(150,255,150,0.25), 0 0.25rem 0 rgba(150,255,150,0.25);
background-color: rgba(150, 255, 150, 0.25);
display: FORMULA[IF({$Variables.range} = 'quarter',block,none)];
text-align: center;
width: calc(100% /  FORMULA[     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     ) ]  *  FORMULA[     CASE(         FORMAT(ADDDAYS({$Variables.from},45,false),'M'),         '5',31,         '8',31,         '11',30,         IF(             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             ) = 91,             29,             28         )     ) ] );

3

FORMULA[FORMAT(ADDDAYS({$Variables.from},75,false),'MMMM')]
box-shadow: 0 -0.4rem 0 rgba(255, 150, 150, 0.25), 0 0.25rem 0 rgba(255, 150, 150, 0.25);
background-color: rgba(255, 150, 150, 0.25);
display: FORMULA[IF({$Variables.range} = 'quarter',block,none)];
text-align: center;
width: calc(100% /  FORMULA[     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     ) ]  *  FORMULA[     CASE(         FORMAT(ADDDAYS({$Variables.from},75,false),'M'),         '3',31,         '12',31,         30     ) ] );

Row 2 (for Year date range)

#Cell ValueCell TitleCell CSS Styles

1

Jan

January

box-shadow: 0 -0.4rem 0 rgba(150,150,255,0.25), 0 0.25rem 0 rgba(150,150,255,0.25);
background-color: rgba(150,150,255,0.25);
width: calc(100% / FORMULA[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)] * 31);
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
text-align: center;

2

Feb

February

box-shadow: 0 -0.4rem 0 rgba(150,255,150,0.25), 0 0.25rem 0 rgba(150,255,150,0.25);
background-color: rgba(150, 255, 150, 0.25);
width: calc(100% / FORMULA[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)] * FORMULA[     IF(         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) = 366,         29,         28) ]);
display: FORMULA[IF({$Variables.range} = 'year',block,none)];
text-align: center;

3

Mar

March

box-shadow: 0 -0.4rem 0 rgba(255, 150, 150, 0.25), 0 0.25rem 0 rgba(255, 150, 150, 0.25);
background-color: rgba(255, 150, 150, 0.25);
width: calc(100% / FORMULA[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)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];

4

Apr

April

box-shadow: 0 -0.4rem 0 rgba(150,150,255,0.25), 0 0.25rem 0 rgba(150,150,255,0.25);
background-color: rgba(150,150,255,0.25);
width: calc(100% / FORMULA[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)] * 30);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];

5

May

May

box-shadow: 0 -0.4rem 0 rgba(150,255,150,0.25), 0 0.25rem 0 rgba(150,255,150,0.25);
background-color: rgba(150, 255, 150, 0.25);
width: calc(100% / FORMULA[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)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];

6

Jun

June

box-shadow: 0 -0.4rem 0 rgba(255, 150, 150, 0.25), 0 0.25rem 0 rgba(255, 150, 150, 0.25);
background-color: rgba(255, 150, 150, 0.25);
width: calc(100% / FORMULA[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)] * 30);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];

7

Jul

July

box-shadow: 0 -0.4rem 0 rgba(150,150,255,0.25), 0 0.25rem 0 rgba(150,150,255,0.25);
background-color: rgba(150,150,255,0.25);
width: calc(100% / FORMULA[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)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];

8

Aug

August

box-shadow: 0 -0.4rem 0 rgba(150,255,150,0.25), 0 0.25rem 0 rgba(150,255,150,0.25);
background-color: rgba(150, 255, 150, 0.25);
width: calc(100% / FORMULA[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)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];

9

Sep

September

box-shadow: 0 -0.4rem 0 rgba(255, 150, 150, 0.25), 0 0.25rem 0 rgba(255, 150, 150, 0.25);
background-color: rgba(255, 150, 150, 0.25);
width: calc(100% / FORMULA[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)] * 30);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];

10

Oct

October

box-shadow: 0 -0.4rem 0 rgba(150,150,255,0.25), 0 0.25rem 0 rgba(150,150,255,0.25);
background-color: rgba(150,150,255,0.25);
width: calc(100% / FORMULA[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)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];

11

Nov

November

box-shadow: 0 -0.4rem 0 rgba(150,255,150,0.25), 0 0.25rem 0 rgba(150,255,150,0.25);
background-color: rgba(150, 255, 150, 0.25);
width: calc(100% / FORMULA[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)] * 30);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];

12

Dec

December

box-shadow: 0 -0.4rem 0 rgba(255, 150, 150, 0.25), 0 0.25rem 0 rgba(255, 150, 150, 0.25);
background-color: rgba(255, 150, 150, 0.25);
width: calc(100% / FORMULA[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)] * 31);
text-align: center;
display: FORMULA[IF({$Variables.range} = 'year',block,none)];

Row 3 (for Month date range)

#Cell ValueCell CSS Styles

1...28

From 1 to 28

display: FORMULA[IF({$Variables.range} = 'month',block,none)];
text-align: center;
width: calc(100% / FORMULA[CASE(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),28,'28',29,'29',30,'30','31')]);

29

29

width: calc(100% / FORMULA[CASE(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),28,'28',29,'29',30,'30','31')]);
text-align: center;
display: FORMULA[IF(AND({$Variables.range} = 'month',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) > 28),block,none)];

30

30

width: calc(100% / FORMULA[CASE(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),28,'28',29,'29',30,'30','31')]);
text-align: center;
display: FORMULA[IF(AND({$Variables.range} = 'month',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) > 29),block,none)];

31

31

width: calc(100% / FORMULA[CASE(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),28,'28',29,'29',30,'30','31')]);
text-align: center;
display: FORMULA[IF(AND({$Variables.range} = 'month',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) > 30),block,none)];

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

1

Sun, FORMULA[FORMAT({$Variables.from}, 'dd MMM yyyy')]

2

Mon, FORMULA[FORMAT(ADDDAYS({$Variables.from}, 1, false), 'dd MMM yyyy')]

3

Tue, FORMULA[FORMAT(ADDDAYS({$Variables.from}, 2, false), 'dd MMM yyyy')]

4

Wed, FORMULA[FORMAT(ADDDAYS({$Variables.from}, 3, false), 'dd MMM yyyy')]

5

Thu, FORMULA[FORMAT(ADDDAYS({$Variables.from}, 4, false), 'dd MMM yyyy')]

6

Fri, FORMULA[FORMAT(ADDDAYS({$Variables.from}, 5, false), 'dd MMM yyyy')]

7

Sat, FORMULA[FORMAT({$Variables.to}, 'dd MMM yyyy')]

Configure card

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

Configure Card Layout

PropertyValue

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:

  1. Type = Section Name = section Title = '' (leave empty) Properties: Columns = 2 Show on Edit page = true Show on View page = true Scrollable = false

  2. 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:

  1. Data Source Field = Subject Name = Subject Title = Subject

  2. Data Source Field = Type Name = Type Title = Type

  3. Data Source Field = EventSubtype Name = EventSubtype Title = Subtype

  4. Data Source Field = StartDateTime Name = StartDateTime Title = Start Date Time

  5. Data Source Field = EndDateTime Name = EndDateTime Title = End Date Time

  6. 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)

  1. 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

  2. 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:

#Element what event is added toEvent propertiesEvent Handler

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

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;
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;
◄ 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:

IndexNameProperties

1

Get Prev Quarter Dates

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

AND({$Variables.button} = 'prev', {$Variables.range} = 'quarter')

Variable Type = JSON Variables JSON =

{
  "from":"FORMULA[ADDMONTHS({$Variables.from}, -3)]",
  "to":"FORMULA[ADDMONTHS({$Variables.to}, -3)]"
}

2

Get Prev Year Dates

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

AND({$Variables.button} = 'prev', {$Variables.range} = 'year')

Variable Type = JSON Variables JSON =

{
  "from":"FORMULA[ADDYEARS({$Variables.from}, -1)]",
  "to":"FORMULA[ADDYEARS({$Variables.to}, -1)]"
}

3

Get Prev Month Dates

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

AND({$Variables.range} = 'month', {$Variables.button} = 'prev')

Variable Type = JSON Variables JSON =

{
  "from":"FORMULA[ADDMONTHS({$Variables.from}, -1)]",
  "to":"FORMULA[ADDMONTHS({$Variables.to}, -1)]"
}

4

Get Prev Week Dates

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

AND({$Variables.range} = 'week', {$Variables.button} = 'prev')

Variable Type = JSON Variables JSON =

{
  "from":"FORMULA[ADDDAYS({$Variables.from}, -7, false)]",
  "to":"FORMULA[ADDDAYS({$Variables.to}, -7, false)]"
}

5

Define Column Name

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

FORMULA[FORMAT({$Variables.from}, 'd MMM yyyy') + ' - ' + FORMATGMT({$Variables.to}-1, 'd MMM yyyy')]

6

Define Day of Week

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

FORMULA[INTNUMBER({$Variables.from} - STARTOFWEEK({$Variables.from}))]

"Get Next Dates" action group

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

IndexNameProperties

1

Get Next Week Dates

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

AND({$Variables.range} = 'week', {$Variables.button} = 'next')

Variable Type = JSON Variables JSON =

{
  "from":"FORMULA[ADDDAYS({$Variables.from}, 7, false)]",
  "to":"FORMULA[ADDDAYS({$Variables.to}, 7, false)]"
}

2

Get Next Quarter Dates

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

AND({$Variables.range} = 'quarter', {$Variables.button} = 'next')

Variable Type = JSON Variables JSON =

{
  "from":"FORMULA[ADDMONTHS({$Variables.from}, 3)]",
  "to":"FORMULA[ADDMONTHS({$Variables.to}, 3)]"
}

3

Get Next Year Dates

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

AND({$Variables.range} = 'year', {$Variables.button} = 'next')

Variable Type = JSON Variables JSON =

{
  "from":"FORMULA[ADDYEARS({$Variables.from},1)]",
  "to":"FORMULA[ADDYEARS({$Variables.to},1)]"
}

4

Get Next Month Dates

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

AND({$Variables.range} = 'month', {$Variables.button} = 'next')

Variable Type = JSON Variables JSON =

{
  "from":"FORMULA[ADDMONTHS({$Variables.from}, 1)]",
  "to":"FORMULA[ADDMONTHS({$Variables.to}, 1)]"
}

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)

"Get Date Ranges" action group

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

IndexNameProperties

1

Get Week Dates

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

{$Variables.range} = 'week'

Variable Type = JSON Variables JSON =

{
  "from":"FORMULA[STARTOFWEEK({$System.Date})]",
  "to":"FORMULA[ADDDAYS(STARTOFWEEK({$System.Date}), 7, false)]"
}

2

Get Year Dates

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

{$Variables.range} = 'year'

Variable Type = JSON Variables JSON =

{
  "from":"FORMULA[DATE(YEAR({$System.Date}), 1, 1)]",
  "to":"FORMULA[ADDYEARS(DATE(YEAR({$System.Date}), 1, 1), 1)]"
}

3

Get Month Dates

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

{$Variables.range} = 'month'

Variable Type = JSON Variables JSON =

{
  "from":"FORMULA[DATE(YEAR({$System.Date}), MONTH({$System.Date}), 1)]",
  "to":"FORMULA[ADDMONTHS(DATE(YEAR({$System.Date}), MONTH({$System.Date}), 1), 1)]"
}

4

Get Quarter Dates

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

{$Variables.range} = 'quarter'

Variable Type = JSON Variables JSON =

{
  "from":"FORMULA[DATE(YEAR({$System.Date}), IF(MONTH({$System.Date}) >=10, 10, IF(MONTH({$System.Date}) <=3, 1, IF(MONTH({$System.Date}) <=6, 4, 7))), 1)]",
  "to":"FORMULA[ADDMONTHS(DATE(YEAR({$System.Date}), IF(MONTH({$System.Date}) >=10, 10, IF(MONTH({$System.Date}) <=3, 1, IF(MONTH({$System.Date}) <=6, 4, 7))), 1), 3)]"
}

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)

Configure dashboard buttons and menus

  1. 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

  2. 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

  3. 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:

  1. 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

  2. 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

  3. 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

  4. 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