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

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

Configure Card

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:

#LabelValue

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)

Last updated