!! Calendar Dashboard

The Calendar Dashboard represents events in monthly calendar and allows to manage them by simple dragging. Here is how this dashboard can look like:

This Kanban is a Composite Dashboard with 5 containers; each of them contains the same Standard Dashboard, initialized with different Input Variables. Columns in this dashboard represent days, and cards in these columns are corresponding to events. Dragging events from one column to another changes their start dates. If click on event, its detailed data will be shown in the form, where it can be edited.

To make a such dashboard administrator should do actions listed below:

Make an Event Form

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:

#TypeNameTitleProperties

1

Section

section

  • Columns: 2

  • Show on Edit page: true

  • Show on View Page: true

  • Scrollable: false

2

Button

button

Close

  • 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

Name

Title

Properties

3

Subject

Subject

Subject

  • 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 picklisis): Single list

  • Hide 'None' (for picklists): false

  • Options Groups (for picklists): not set

4

Type

Type

Type

5

EventSubtype

EventSubtype

Subtype

6

StartDateTime

StartDateTime

Start Date Time

7

EndDateTime

EndDateTime

End Date Time

8

Description

Description

Description

  • Add these Form Actions:

#Action Name and TitlePropertyValue

1

Close Panel

Type

Form API

Form Action Type

Fire Event

Name

e.FLX_KB:ApplicationEvent

Parameters

Name: data Value Type: Object Value:

{"componentType":"c:KanBanPanelComponent","method":"hideCard"}

Has Conditions

false

2

Refresh Column

Type

Form API

Form Action Type

Fire Event

Name

e.FLX_KB: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

Make new standard dashboard.

Create dashboard

  • Go to dashboard creation wizard and create new standard dashboard.

  • Give it a "Weekly Calendar Dashboard" name and some description.

  • Select "White" theme.

  • Save dashboard and go to Kanban Bulder.

Configure columns

  • Add 7 columns to the dashboard.

  • Name columns from "Sunday" to "Saturday"

  • Set column descriptions to digits from "0" to "6" (thus, descriptions will contain indexes of proper weekday)

  • Leave columns widths default ("auto")

  • Leave columns "Is Active" checkboxes default (checked)

  • Set these properties to all columns:

    • Data Source Type = SObject

    • Data Source = Event

    • Order = Start Date Time, asc

    • Page Size = 5

  • Set the following conditions to the columns and add 1 cell to their headers with the following values:

#

Column Name

Conditions

Header Cell Value

Field Name

Operator

Type

Value

1

Sunday

Start Date Time

greater than

Formula

FORMULA[DATETIMEVALUEGMT({$Variables.startDate})]

{$Variables.startdate} (Sunday)

Start Date Time

less than

Formula

FORMULA[DATETIMEVALUEGMT({$Variables.startDate} + HOURS(24))]

2

Monday

Start Date Time

greater than

Formula

FORMULA[DATETIMEVALUEGMT({$Variables.startDate}) + 1]

FORMULA[{$Variables.startdate} + 1] (Monday)

Start Date Time

less than

Formula

FORMULA[DATETIMEVALUEGMT({$Variables.startDate} + 1 + HOURS(24))]

3

Tuesday

Start Date Time

greater than

Formula

FORMULA[DATETIMEVALUEGMT({$Variables.startDate}) + 2]

FORMULA[{$Variables.startdate} + 2] (Tuesday)

Start Date Time

less than

Formula

FORMULA[DATETIMEVALUEGMT({$Variables.startDate} + 2 + HOURS(24))]

4

Wednesday

Start Date Time

greater than

Formula

FORMULA[DATETIMEVALUEGMT({$Variables.startDate}) + 3]

FORMULA[{$Variables.startdate} + 3] (Wednesday)

Start Date Time

less than

Formula

FORMULA[DATETIMEVALUEGMT({$Variables.startDate} + 3 + HOURS(24))]

5

Thursday

Start Date Time

greater than

Formula

FORMULA[DATETIMEVALUEGMT({$Variables.startDate}) + 4]

FORMULA[{$Variables.startdate} + 4] (Thursday)

Start Date Time

less than

Formula

FORMULA[DATETIMEVALUEGMT({$Variables.startDate} + 4 + HOURS(24))]

6

Friday

Start Date Time

greater than

Formula

FORMULA[DATETIMEVALUEGMT({$Variables.startDate}) + 5]

FORMULA[{$Variables.startdate} + 5] (Friday)

Start Date Time

less than

Formula

FORMULA[DATETIMEVALUEGMT({$Variables.startDate} + 5 + HOURS(24))]

7

Saturday

Start Date Time

greater than

Formula

FORMULA[DATETIMEVALUEGMT({$Variables.startDate}) + 6]

FORMULA[{$Variables.startdate} + 6] (Saturday)

Start Date Time

less than

Formula

FORMULA[DATETIMEVALUEGMT({$Variables.startDate} + 6 + HOURS(24))]

  • Set height:22px CSS style to headers of all columns

  • Set font-size:14px CSS style to cells in headers of each column

Configure Card

  • Add 1 card to dashboard and name it "Event"

  • Set Data Source Type to "Event"

Card Layout configuration:

  • Set card layout to Form. Select Event Form (which was created earlier and described above)in the lookup and set its parameters to these:

    • kanban = {$Card.Kanban}

    • mode = edit

    • id = {Event.Id}

  • Set Position of Card Layout to Modal

  • Check "Hide Footer" checkbox

  • Set Text of layout header to {event.Subject} ("Title Settings section of Header Configuration tab)

Card Compact Layout configuration:

  • Set Card to Collapsible ("General" section of Card Settings)

  • Set CSS styles of Card to padding:0px

  • Set Value of the default Card Component to {Event.Subject}

  • Set its CSS Styles to background-color:#c6c9ff; padding:0px 5px;

  • Add one more Text Card Component under default and:

    • Set its Value to {Event.Type}

    • Set its CSS Styles to padding:0px 5px

  • Add third Text Card Component under previous and:

    • Set its Value to FORMULA[FORMAT({Event.StartDateTime}, 'hh:mm a')]

    • Set its CSS Styles to padding:0px 5px

  • Add fourth Text Card Component at the right of third (it will become 50% wide) and:

    • Set its Value to FORMULA[TOTEXTDURATION({Event.DurationInMinutes}, 24)]

    • Set its CSS Styles to padding:0px 5px; text-align:right;

Configure Column Junctions

Set these column junctions to Card in all columns:

  • Drag-n-drop allowed to all columns

  • Drop behavior left default to all columns (source column = Remove Card, target column = Refresh)

Configure Card Actions

To add a sense to Cards dragging some actions are necessary. In this example action will be the same for all columns, so, no need to configure them separately.

Click on card and add a new action with these properties:

  • Name = Update Event Start Date

  • Type = Field Update

  • Execute = Always

  • Status = Active

  • Context Object Type = Event

In the Field Update Settings section configure this:

  • Object Name = Event

  • Fields:

NameValue

Start Date Time

FORMULA[{Event.StartDateTime} + (({$Variables.startDate} + {$TargetColumn.Description}) - DATETIMEVALUE(DATEVALUE({Event.StartDateTime})))]

End Date Time

FORMULA[{Event.EndDateTime} + (({$Variables.startDate} + {$TargetColumn.Description}) - DATETIMEVALUE(DATEVALUE({Event.EndDateTime})))]

  • Conditions:

    • Activity ID eqials {event.id}

Make new composite dashboard

Create dashboard

  • Go to dashboard creation wizard and create new composite dashboard.

  • Give it a "Calendar Dashboard" name and some description.

  • Select "White" theme.

  • Save dashboard and go to Kanban Bulder.

Configure containers and child dashboards

  • Make dashboard have 5 containers in vertical stack.

  • Leave their properties default

  • Set their titles from "Weekly Calendar 1" (topmost container) to "Weekly Calendar 5" (bottommost container)

  • Select previously created "Weekly Calendar Dashboard" kanban as child dashboard in each container

  • Set API names for containers and Input Variables for each child dashboard:

Container

Container API name

Input Variable name

Input Variable value

Weekly Calendar 1

week1

startDate

{$Variables.week1Start}

Weekly Calendar 2

week2

startDate

{$Variables.week2Start}

Weekly Calendar 3

week3

startDate

{$Variables.week3Start}

Weekly Calendar 4

week4

startDate

{$Variables.week4Start}

Weekly Calendar 5

week5

startDate

{$Variables.week5Start}

Configure connections between child dashboards

You do not need to configure connections from dashboard of each container to every other because the dashboard is the same for all containers. It will be enough to set them one time from any container to any other.

Set connections to these:

  • Source Kanban = Weekly Calendar Dashboard

  • Target Kanban = Weekly Calendar Dashboard

  • Card Name = Event

  • Source Columns: all (set one connection per each)

  • Target Column: for each source column select target column with the same name

  • Action on drop: configure new with these properties:

    • Name = Update Event Start Date

    • Type = Field Update

    • Object name = Event

    • Conditions = Activity ID equals {event.id}

    • Fields:

NameValue

Start Date Time

FORMULA[{Event.StartDateTime} + (({$Variables.startDate} + {$TargetColumn.Description}) - DATETIMEVALUE(DATEVALUE({Event.StartDateTime})))]

End Date Time

FORMULA[{Event.EndDateTime} + (({$Variables.startDate} + {$TargetColumn.Description}) - DATETIMEVALUE(DATEVALUE({Event.EndDateTime})))]

  • Copy this action onto each connection set

Connections should look like this:

Configure actions and action groups

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

#Action nameVariable nameVariable value

1

Get Previous Month

currentDate

FORMULA[FORMAT(ADDMONTHS(DATEVALUE({$Variables.currentDate}), -1), 'yyyy-MM-dd')]

2

Get Next Month

currentDate

FORMULA[FORMAT(ADDMONTHS(DATEVALUE({$Variables.currentDate}), 1), 'yyyy-MM-dd')]

3

Update Week 1 Start Variable

week1Start

FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01')))]

4

Update Week 2 Start Variable

week2Start 

FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 7]

5

Update Week 3 Start Variable

week3Start

FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 14]

6

Update Week 4 Start Variable

week4Start 

FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 21]

7

Update Week 5 Start Variable

week5Start 

FORMULA[STARTOFWEEK(DATEVALUE(FORMAT({$Variables.currentDate}, 'yyyy-MM-01'))) + 28]

8

Update Week 1 Variable

week1 

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')]

9

Update Week 2 Variable

week2 

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')]

10

Update Week 3 Variable

week3 

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')]

11

Update Week 4 Variable

week4 

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')]

12

Update Week 5 Variable

week5 

FORMULA[FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 28, 'dd/MM/yyyy') + ' - ' + FORMAT(STARTOFWEEK(DATEVALUE(FORMAT(DATEVALUE({$Variables.currentDate}), 'yyyy-MM-01'))) + 34, '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 5 Start Variable

      7. Update Week 1 Variable

      8. Update Week 2 Variable

      9. Update Week 3 Variable

      10. Update Week 4 Variable

      11. Update Week 5 Variable

  2. 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 5 Start Variable

      7. Update Week 1 Variable

      8. Update Week 2 Variable

      9. Update Week 3 Variable

      10. Update Week 4 Variable

      11. Update Week 5 Variable

Configure Dashboard

Basic Configuration tab

  • Set Icon to action:new_event

Statistic Configuration tab

  • Add one Cell of Text type

  • Set its CSS Style to font-size: 24px;

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

Variables Configuration tab

  • Add these variables:

#Variable NameVariable Value

1

currentDate

{$System.Date}

2

week1Start

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

3

week2Start

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

4

week3Start

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

5

week4Start

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

6

week5Start

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

Buttons Configuration tab

  • Add the following buttons:

    1. Previous Month

      • type = Icon

      • title = Previous Month

      • icon = utility:left

      • handler:

        • type =Action Group

        • value = Get Previous Month Action Group

        • parameters not set

        • success handler:

          • type = Kanban API

          • value = Refresh Kanbans

          • parameters not set

    2. Next Month

      • type = Icon

      • title = Next Month

      • icon = utility:right

      • handler:

        • type =Action Group

        • value = Get Next Month Action Group

        • parameters not set

        • success handler:

          • type = Kanban API

          • value = Refresh Kanbans

          • parameters not set

Last updated