Demo Example: Events Dashboard

The Event Dashboard represents events and allows user to view events schedule and manage them. Here is how such dashboard can look like:

To make this dashboard administrator should do actions listed below:

Create Actions and Actions Group

Create the following Actions of "Define Variable" type. Set Variable Type to Text in all actions:

1. Action name = Get Previous Month Variable name = currentDate Variable value = FORMULA[FORMAT(ADDMONTHS(DATEVALUE({$Variables.currentDate}), -1), 'yyyy-MM-dd')]

2. Action name = Get Next Month Variable name = currentDate Variable value = FORMULA[FORMAT(ADDMONTHS(DATEVALUE({$Variables.currentDate}), 1), 'yyyy-MM-dd')]

3. Action name = Update Week 1 Start Variable Variable name = week1Start Variable value = FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01')))]

4. Action name = Update Week 2 Start Variable Variable name = week2Start Variable value = FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 7]

5. Action name = Update Week 3 Start Variable Variable name = week3Start Variable value = FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 14]

6. Action name = Update Week 4 Start Variable Variable name = week4Start Variable value = FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 21]

7. Action name = Update Week 1 Variable Variable name = week1 Variable value = FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))), 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 6, 'dd/MM/yyyy')]

8. Action name = Update Week 2 Variable Variable name = week2 Variable value = FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 7, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 13, 'dd/MM/yyyy')]

9. Action name = Update Week 3 Variable Variable name = week3 Variable value = FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 14, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 20, 'dd/MM/yyyy')]

10. Action name = Update Week 4 Variable Variable name = week4 Variable value = FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 21, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 27, 'dd/MM/yyyy')]

Create 2 Action Groups and add actions from configured above to them (in the order specified below):

1. name = Get Previous Month Action Group

• actions:

  1. Get Previous Month

  2. Update Week 1 Start Variable

  3. Update Week 2 Start Variable

  4. Update Week 3 Start Variable

  5. Update Week 4 Start Variable

  6. Update Week 1 Variable

  7. Update Week 2 Variable

  8. Update Week 3 Variable

  9. Update Week 4 Variable

1. name = Get Next Month Action Group

• actions:

  1. Get Next Month

  2. Update Week 1 Start Variable

  3. Update Week 2 Start Variable

  4. Update Week 3 Start Variable

  5. Update Week 4 Start Variable

  6. Update Week 1 Variable

  7. Update Week 2 Variable

  8. Update Week 3 Variable

  9. Update Week 4 Variable

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 Basic Configuration and set icon:

Go to Statistics Configuration.

• Add the cell and set these properties to it:

  • Type = Text

  • Value = FORMULA[FORMAT({$Variables.currentDate}, 'MMMM, yyyy')]

• Set CSS Styles to this cell:

font-size: 24px

Go to Buttons Configuration and add 3 buttons:

Button "Previous Month":

Configure handler of this button:

• Type = Action Group

• Value = Get Previous Month Action Group (that was created before)

• Parameters = not set

• Success handler:

  • Type = KanBan API

  • Value = Refresh Kanbans

  • Parameters = not set

Button "Next Month":

Configure handler of this button:

• Type = Action Group

• Value = Get Next Month Action Group (that was created before)

• Parameters = not set

• Success handler:

  • Type = KanBan API

  • Value = Refresh Kanbans

  • Parameters = not set

Button "New Event":

Configure handler of this button:

• Type = SObject

• Value = Event

• Parameters = not set

Go to Variables Configuration and add these variables:

1. currentDate = {$System.Date}

2. week1 = FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))), 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 6, 'dd/MM/yyyy')]

3. week1Start = FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01')))]

4. week1End = FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 6]

5. week2 = FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 7, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 13, 'dd/MM/yyyy')]

6. week2Start = FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 7]

7. week2End = FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 13]

8. week3 = FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 14, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 20, 'dd/MM/yyyy')]

9. week3Start = FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 14]

10. week3End = FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 14]

11. week4 = FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 21, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 27, 'dd/MM/yyyy')]

12. week4Start = FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 21]

13. week4End = FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$System.Date}, 'yyyy-MM-01'))) + 27]

Configure Columns

• Add 4 columns to the dashboard.

• Name them (see table below)

• Leave column width default ("auto")

• Leave column "Is Active" checkbox default (checked)

• Set these properties to Data Source Configuration:

  • Data Source Type = SObject

  • Data Source = Event

  • Set the following conditions to the proper columns (select Type = "Formula" in all):

1. Column name = {$Variables.week1} Condition 1: Start Date Time > FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01')))]T00:00:00Z Condition 2: Start Date Time < FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 7]T00:00:00Z

2. Column name = {$Variables.week2} Condition 1: Start Date Time > FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 7]T00:00:00Z Condition 2: Start Date Time < FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 14]T00:00:00Z

3. Column name = {$Variables.week3} Condition 1: Start Date Time > FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 14]T00:00:00Z Condition 2: Start Date Time < FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 21]T00:00:00Z

4. Column name = {$Variables.week4} Condition 1: Start Date Time > FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 21]T00:00:00Z Condition 2: Start Date Time < FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 28]T00:00:00Z

• Open Body Configuration tab:

  • Select Cards in Row = 1

  • Configure CSS Styles:

background-color: FORMULA[IF(STARTOFWEEK({$Variables.week1start})
 = STARTOFWEEK({$System.Date}), '#feffea', '#ffffff')]

Configure Card

• Add 1 card to dashboard

• Set Data Source Type to "Event"

• Set card layout:

Basic configuration:

• Layout body type = Standard

• Position = right

• All checkboxes = false

Header configuration:

• Title settings:

  • Text = {Event.Subject}

Footer configuration:

• Add button "Open Event":

Configure handler of this button:

• Type = SObject

• Value = {Event.Id}

• Parameters = not set

Add tab to Tabs configuration:

• Label = Details

• Title = Details

• Icon = standard:lead_list

• Layout = Standard with 5 rows:

#	Label	Value
1	Type	Type
2	Assigned To	Account ID:Account Name
3	Start Date Time	Start Date Time
4	Duration	Duration
5	Location	Location

Open Card Compact Layout editor :

• add CSS Styles to the card settings (1):

background-color: #ffffff
border-left: 3px solid #15db00

• Change the Value of default existing Card Component to {Event.Subject} (2).

• Set its width to 100 (leave default)

• Expend "Styles" section and set the following:

text-decoration: underline
color: #006dcc
display: contents
flex: initial

• Add text component (3) below the previous

• Set its Value and Title to {Event.Who.Name}

• Leave its width default (100)

• Add text component (4) below

• Set its value to FORMULA[FORMAT({Event.StartDateTime})]

• Set its Title to {Event.StartDateTime}

• Leave its width default (100)