!! 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

• 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	Name	Title	Properties
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 Title	Property	Value
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 to	Event properties	Event 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:

Name	Value
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:

Name	Value
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 name	Variable name	Variable 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 Name	Variable 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