Action Objects & Methods
When working with custom actions, there are a few event-related objects that will be of use depending on whether you are building a custom action or event action.
In this article
Action Object
The action object contains the event action definition and is available in all custom and event actions, although you'll likely only use it in event actions. This object includes the type of action, the URL / javascript to be executed and other attributes. For the most part, this object should be left alone except for a few cases listed below.
action.preventAction = true;
This will prevent the event action from running the next time it is called. This is useful if you are calling the function that originally executed the event action.
action.callbacks.confirm(); and action.callbacks.cancel();
Event actions have built-in callbacks for use in asynchronous processes when “Prevent Default Action” is set to true. Useful when working with external API's where you need to wait for data or when using modal dialogs where a user is required to make a selection before continuing. Confirm will run the remainder of the action that was originally called. For example, if confirm is called in an onClick action the popover will appear. If cancel is called, the popover will not open.
Params Object
The params object contains a data property that contains information about the event that invoked the action. Actions that will have a params object are the ones where an item is clicked. They are:
- After Events Rendered
'fromFilterChange' : Was this initiated from a filter being toggled on or off
'fromRefresh': Was this triggered by the calendar being refreshed
'fromScheduleChange': Was this triggered by a calendar being toggled on or off
'fromViewStateChange': Was this triggered by the calendar view changing (view changed, date changed, window resized, sidebar closed/opened) - After Source Selection
'isLast': Is this the last calendar source in a folder that is set to be applied. When selecting a folder, this trigger is fired once for each source
'item': Details on the calendar source that was toggled - After Filter Selection
'filterType': The filter that was changed (statuses or resources)
'isLast': Is this the last filter in a folder that is set to be applied. When selecting a folder, this trigger is fired once for each filter inside that folder
'item': Details on the filter that was toggled - On Field Change
'field': The name of the popover field that was changed
'value': The resulting value that was changed
'selected': Was the value toggled on or off'objectName': Salesforce Only - the object name of the related record
dbk Object
The dbk object has several methods specifically for use in Calendar, Custom and Event Actions and is available in the scopes for each.
dbk.tooltip(content, options)
dbk.showMessage(content, showDelay, hideDelay, type, actionFunction);
dbk.refreshEditPopover(editEvent);
This will also update the color swatch on the event if the primary status value has been changed.
Example: to change the primary status value:
editEvent.status[0] = 'completed'; dbk.refreshEditPopover(editEvent);
dbk.mutateFilterField(filterItem);
A simple example of using this function could look like the following...
var resources = seedcodeCalendar.get('resources'); var newResource = { name: 'New Employee', description: 'Lead Tech', } // Mutate and format the new resource data dbk.mutateFilterField(newResource); // Add the new resource data to the resource list resources.push(newResource); // Initialze the resource list so the sidebar knows that data has updated seedcodeCalendar.init('resources', resources); // Reset the resources so calendar views are updated to reflect resource changes dbk.resetResources();
dbk.filterFieldSort(filterArray);
dbk.resetResources();
dbk.toggleCalendar(calendar);
dbk.toggleMultiSelect(event, shiftKey, targetElement, view, forceDeselect);
- event: (object) the event object of the item being selected or deselected
- shiftKey: (boolean) the equivalent of the shift key being pressed or not
- targetElement: (HTML Element) the DOM element on the calendar that corresponds to the event object
- view: (object) the current DayBack view. Typically will be seedcodeCalendar.get('view);
- forceDeselect: (boolean) allows you to specify that all events should be deselected (When this is true, the first 3 parameters should be null)
dbk.addEvent(event);
dbk.addEvents(eventArray);
dbk.updateEvent(editEvent, callback);
This function is used to update an event with an app action. This
dbk.createEvent(paramObject);
This function is used to create events on a specific calendar source. Unlike dbk.addEvent this function will not only add the event to the calendar display but will also create the event in whatever data source is specified. This is useful if you wish to bypass any user interaction to create the event as there is not a separate save step involved.
The parameter for this function expects an object with the following properties available:
event: This is an object that needs to at least contain a title property and a start property formatted as a moment object. Optionally this can be an array of objects when creating more than one event. The event object can contain any valid DayBack field properties listed here. You may also just pass the event object directly for this property if calling this function from an event action. In that case specifying this property as "event: event" would clone the original event.
calendarID: The internal ID of the calendar you want to add this event to, only required if calendarName is not set.
calendarName: The name of the calendar to add the event to, only required if the calendarID is not set.
preventWarnings: Set to true to avoid any warnings about data formatting or payload size if creating many events. For example a warning dialog will show if adding more than 200 events at once as too many events added at once could trigger rate limiting with the provider.
renderEvent: A boolean, when set to true the event will be rendered on the calendar. This is useful if the desired result is to add the event to the calendar source and give immediate feedback on the calendar to show the created event.
callback: A function to run once the creation process has completed. The result of the callback is an object containing the following properties:
event: The event data that was created or failed to create.
isShown: Whether the event is shown on the calendar display or not. Reasons for not showing could be that calendar isn't selected or there is a filter applied to prevent the event from displaying.
error: An error object that contains a message property if there was an error. For example error: {message: 'The event could not be created'}
A simple example of using this function could look like the following...
var event = { title: 'Meeting', start: moment('2021-12-15') };
var params = {
event: event,
calendarName: 'Team Calendar',
renderEvent: true,
callback: function(result) {}
}
dbk.createEvent(params);
dbk.deleteEvent(paramObject);
This function is used to delete events. This function will remove the event from the calendar view and delete the event from the calendar source it is stored in.
The parameter for this function expects an object with the following properties available:
event: This is a native DayBack event object. You can get the currently viewed event objects by calling seedcodeCalendar.get('element').fullCalendar('clientEvents'). You may also just pass the event object directly for this property if calling this function from an event action. In that case specifying this property as "event: event" would clone the original event.
editEvent: Optional if the event property is not specified. This is available in the context of an event action when the popover is open.
callback: A function to run once the deletion process has completed. The result of the callback is null unless there was an error. An error will return an object containing the following properties:
error: An error object that contains a message property if there was an error. For example error: {message: 'The event could not be deleted'}
dbk.localTimeToTimezoneTime(date, isAllDay);
This function will take a local date/time and convert it to that date/time based on a timezone set in config.clientTimezone (such as the timezone chosen in this timezone selector for DaBack). It does not change the timezone of the date object but applies the appropriate offset. It accepts a "date" parameter that must be a valid moment object, and "isAllDay" which is a boolean value indicating whether times should be ignored.
dbk.timezoneTimeToLocalTime(date, isAllDay);
This function will take a date/time that has been converted to a specific timezone set in config.clientTimezone and change it back to the local time set in the operating system. It does not change the timezone of the date object but removes the previously applied offset. It accepts a "date" parameter that must be a valid moment object, and "isAllDay" which is a boolean value indicating whether times should be ignored.
dbk.getCustomFieldIdByName(storeInFieldName, schedule);
This function will take the Store in Field name of a Custom Field and the schedule object of the calendar where the Custom Field name is defined and will return the DayBack's numerical ID for use in Calendar Actions. Every event and editEvent object has a schedule object, so you can simply pass editEvent.schedule, or event.schedule as the second parameter when you are calling this function. Please see usage examples.
dbk.setEventSortPriority(event, sortValue);
This function will create a sort priority for the provided event. It accepts two required parameters. The event parameter is the event object where the sort priority will be set. The sortValue is either a string or number that will be used to determine the sort order of events. This function is meant to be used in the "Before Event Render" action, although there may be uses for it elsewhere. Below are a couple of examples on how to use this function in a "Before Event Render" action.
// // Sort events based on values from a mapped field // var sortValue = "[[Summary]]" // This should be your field name that is used in field mapping dbk.setEventSortPriority(event, sortValue);
// // Sort events based on a specified sort order of statuses // var sortOrder = [ 'Cancelled', 'OutOfOffice', 'Busy', ]; var fieldValue = event.status[0]; var sortPriority; if (fieldValue) { sortPriority = sortOrder.indexOf(fieldValue); if (sortPriority === -1) { sortPriority = null; } } dbk.setEventSortPriority(event, sortPriority);
dbk.startKioskMode(refreshInterval, preventDateChange);
This function allows you to enable kiosk mode without needing to pass the kiosk URL parameter. This allows kiosk mode to be enabled in Salesforce.
preventDateChange is a boolean with a default value of false. Setting this to true will prevent the date from changing to today when the calendar is refreshed.
dbk.getBookmarkList(callback);
This function will retrieve an object of all bookmarks the currently signed in user has access to. This can be useful for progmatically loading a bookmark based on critera like matching name. The callback will contain a result parameter with a result object or null if there are no bookmarks.
You could use this with the default bookmarks for each user action to load the bookmark by name, rather than ID.
dbk.getBookmarkList(function(result) { if (result) { // Get a bookmark with the name "My Bookmark" var bookmark = Object.values(result).find(function(b) { return b.name === 'My Bookmark'; }); // Load the bookmark if (bookmark && bookmark.id){ seedcodeCalendar.init('bookmarkID', bookmark.id); } } });
Button Actions
In Button Actions, there are two default objects that will be of use in your code:
Example: take a look at the emailSupport.js example here that shows how to use the event and editEvent object to send an email in a custom action.
Event Actions
In event actions, we take advantage of different objects depending on the type of action specified:
On Event Click action - runs when an event is clicked on--before the popover is opened
On Event Create Action - runs just before a new event is rendered on the calendar
Before Event Save Action - runs before any event changes are written back to the event data source
Example: preventing dragging from changing an event's time
On Event Save Action - runs after event changes are written to the event, but before they are written to the data source, i.e. Google
if (event.status.includes('Pending')) { delete changesObject.description; }
if (event.status === ['Completed'] && event.description.includes('Signed Off')){ changesObject.Done__c = true; }
event.beforeDrop - This object will be present when an event is edited via drag and drop. It will contain the values of the properties before the drag began. It's useful for detecting if an event is being edited via drag and drop and for potentially rolling back values.
Example: Looking up a Resource ID by Name
On Event Delete Action - runs after the delete button is clicked, but before the event is removed from the view
Example: the emailSupportOnHold.js example here shows how you can take advantage of the objects, event and revertObject
On Event Hover Action - runs when the mouse hovers over an event
Before Event Rendered - runs just before the event is rendered on the calendar
event.resource === ["Truck 1"];
On Field Change - runs when a field is changed in the event popover
params - This contains info on the change that was made. See the Params section here for more details
Example: load contact address and Force single selection for statuses and/or resources
event and editEvent Objects
Here are the properties that may be found in the event and editEvent objects, their types, and the data they contain. Some properties are source-specific (Google, Basecamp, FileMaker) are object specific (event, editEvent), or are only contained in certain event actions.
attendees - a list of attendees in the format expected by Google and 0365 APIs.
allDay - boolean. True when event is marked All Day
color - string. The rgb value for the source default color
contactDisplay - string. Contact display name
contactID - array of strings. The Unique ID of the contact
contactName - array of strings
description - string. The event description contents
end - momentJS object. The event end time
eventID - string. The unique ID of the object
eventSource - string. The unique calendar source
eventURL - string. The URL of the event where the data is stored (Google/Basecamp/SalesForce)
location - string. The location of the event
projectDisplay - string. Project display name
projectID - array of strings. The Unique ID(s) of the project(s)
projectName - array of strings. The display name(s) of the project(s)
recordID - string. The record ID in FileMaker
resource - array of strings. The list of assigned resources
schedule - object. Contains source information such as name, server connection information, field mappings.
start - momentJS object. The event start time
status - array of strings. List of assigned statuses.
tags - string. Event Tag(s)
timeEnd - string. The string value of the end time
timeStart - string. The string value of the start time
title - string. The summary of the event that is displayed in the event block on the calendar
titleEdit - string. The event title text
unscheduled - boolean. True adds the event to the unscheduled list and removes it from the calendar
event and editEvent Objects in additional fields
When using additional fields in actions, you'll want to reference the field's DayBack ID, shown in the Additional Fields tab as the "ID for Calendar Actions". These look something like 23565277179927-367387787. This event action example shows how to format a field's ID inside your action: Change the event's status.
Referencing additional fields in actions would work like this:
editEvent['your-additional-field-id']
event['your-additional-field-id']
If you want to check metadata about additional fields (like what format it is) you can reference that object like this:
editEvent.customFields['your-additional-field-id']
To make your app action code more readable, it is often preferable to refer to your numerical Field IDs by a human-readable name inside your JavaScript. Here's an example that retrieves the Custom Field 'truckNumber' defined inside the current event's schedule using the dbk.getCustomFieldIdByName() helper function:
var customFieldId = dbk.getCustomFieldIdByName('truckNumber',editEvent.schedule);
var roomNumber = editEvent[customFieldId];
utilities Object
The utilities object contains useful methods in custom actions.
utilities.showModal(title, message, cancelButtonText, cancelFunction, confirmButtonText, confirmFunction); - method
Displays a popover requesting user input.
The cancel or confirm function will be performed when the user clicks the corresponding button. Use utilities.showModal('hide') to hide the modal if you're not calling one of the cancel or confirm callbacks like action.callbacks.cancel().
utilities.showMessage(content, showDelay, hideDelay, type, actionFunction);
Displays the specified message in an info bar at the bottom of the calendar window.
"content" is the HTML or string value that you want to show in the message bar.
"showDelay" and "hideDelay" expect a number value in milliseconds.
The "type" parameter can either be null for a normal message or 'error' for an error message with a red background.
"actionFunction" is the JavaScript function that you want to run if the message bar is clicked on. Can be null.
utilities.hideMessages([type]);
Parameters are:
'message' (default) - Hides any messages that have been queued for display in the alert bar.
'modal' - Hides any modal window that is being displayed on the calendar
utilities.generateTextColor(colorCode);
Returns an color code that represents the best text color given the background color you have supplied. This is useful if you are changing an event's color and want the text to show up in the most readable way.
Parameters are:
'colorCode' - the background color of your event.
utilities.getDBKPlatform();
Returns a string representing the platform of the user connected to DayBack.
Resulting values are:
'dbkfmwd': FileMaker WebDirect
'dbkfmjs': FileMaker Client
'dbksf': Salesforce
'dbko': Browser
utilities.popover(config, template); - Creates a custom floating popover or modal
The rich text editor example in the docs here is a great example of using this function in a custom action. You'll also find this in our dialog-with-buttons example.
Parameters are:
'config' - An object containing the popover configuration that contains the details of how the popover should behave
Config properties:
'template' - An HTML template that defines the content of the popover.
Buttons can have an "ng-click" property pointing to "popover.config.yourCustomFunction();', where 'yourCustomFunction' is a user-defined property in the config object.
environment Object
The environment object contains useful properties in custom actions.
environment.isMobileDevice
A property for determining if the user is on a mobile device, including tablets/iPads. This is not a method and should be called like the below.
if ( environment.isMobileDevice ) {
}
environment.isPhone
A property for determining if the user is on a phone (tablets/iPads will return false). This is not a method and should be called like the below.
if ( environment.isPhone ) {
}
seedcodeCalendar Object
The seedcodeCalendar object contains details about the current calendar view.
seedcodeCalendar.get([property]);
Returns the corresponding property of the current calendar state.
Examples:
seedcodeCalendar.get(‘resources’);
Returns an array of loaded resources for the calendar.
seedcodeCalendar.get(‘statuses’);
Returns an array of loaded statuses for the calendar.
seedcodeCalendar.get(‘schedules’);
Returns an array of all the calendar sources and their enabled status.
seedcodeCalendar.get(‘view’);
Returns an array of properties for the current view. So view.name could be "basicHorizon".
seedcodeCalendar.get(‘date’);
Returns an array of properties for the date in focus. These are the moment.js properties of the date.
seedcodeCalendar.get(‘element’);
Returns an array of the dom properties. For example, this would return an array of all the events in the dom: seedcodeCalendar.get('element').fullCalendar('clientEvents')
seedcodeCalendar.get(‘textFilters’);
Returns the string content of the current text filter.
seedcodeCalendar.get(‘sidebar’);
Returns an array reflecting the current state of the sidebar, including the currently selected tab. This is not for looking at which filters are applied: use get('statuses') or get('resources') for that.
seedcodeCalendar.get(‘multiSelect’);
This will return the "multiSelect" object, which contains a collection of objects that each have details on a selected events. If you just want the IDs of the events that are currently selected in multi-select, use this: Object.values(seedcodeCalendar.get('multiSelect')).map(a => a.event.eventID)
seedcodeCalendar.get(‘analytics’);
This will return the analytics object, which consists of a summary data structure identifying the field being analyzed (analytics.breakdownSummary) and an array of items representing the data series (analytics.breakdownItems). The latter contains item totals for the values of the analyzed field.
Each value in the data series includes a full name description, a short description, the total events found that match that value, and the colors used to represent this value in the analytics breakdown summary. The analytics data structure can be utilized to create other chart types, such as a pie chart or bar graph, using the Chartist.js charting module, which is preloaded and available for your use.
seedcodeCalendar.get('config');
Returns an object containing the global calendar configuration.
Config Properties:
.account - String: The account (email) of the logged in user
.accountName - String: The full name of the logged in user
.admin - Boolean: Is the logged in user an admin
.databaseDateFormat - String: The default date format for the associated source
.defaultTimedEventDuration - String: The default duration for new events
.firstName - String: First name of the logged in user
.hideMenuItems - String: A list of the hidden menu items *
.homeUrl - String: The Url that the Home button links to *
.isMobileDevice - Boolean: Is the user on a mobile device
.isShare - Boolean: Is the calendar being viewed a share
.lastName - String: Last name of the logged in user
.lockSidebar - Boolean: Is the sidebar locked for this session *
.passthroughEditErrors - Boolean: When set to true, messages from editing events with updateEvent will be passed back to the callback function, rather than displayed in a modal to the user
.suppressEditEventMessages - Boolean: When set to true, no messages from editing events are presented to the user. Set to false to re-enable these messages
* Can be modified in a Before Event Rendered action to configure the calendar
Filter Objects
Resource and Status filters are stored as arrays of objects inside the seedcodeCalendar object. You can modify these objects, or build your own list of filters when the calendar starts up using an On Statuses Fetched or On Resources Fetched app action.
Below are the properties of a filter object:
- name - (required) string: The name of the filter.
- id - (optional/autogenerated) string: The id of the filter.
- sort - (optional) number: The desired position the filter should be placed.
- shortName - (optional) string: Resources only. The short name of the filter.
- class - (optional) string: Resources only. The CSS class to assign to the filter
- description - (optional) string: Resources only. The description for the filter. Can contain HTML.
- color - (optional) string: Statuses only. The RGB or RGBA value for the filter color.
- folderID - (optional) string: The folder ID that the filter belongs to.
- folderName - (optional) string: The folder Name that the filter belongs to.
- isFolder - (optional) boolean: Is this a folder. Defaults to false
- nameSafe - (read only) string: The name of the filter without special characters.
- display - (read only) string: The display value of the filter name.
- status - (optional) object: The state of the filter.
status object properties:- selected - (optional) boolean: Is the filter selected (toggled on). Defaults to false.
- folderExpanded - (optional) boolean: Is the folder expanded. Defaults to false.
- tags - (optional) Array of objects: Resources Only. Tags to assign to the filter.
tag object properties:- name - (required) string: The name of the tag.
- class - (optional/autogenerated) sting: The CSS class that should be assigned to the tag.
Useful Methods
The following are useful methods available in custom and event actions.
eventChanged(editEvent, event, endShifted);
Returns the differences between an editEvent and event object. Will return false if no differences were found.
endShifted is when the end date in the editEvent object has already been set to exclusive instead of inclusive as it is in the event popover. This would be the case in the On Event Save action, however, the editEvent and event objects have already been merged so end shifted should generally be left blank or set to false.
updateEditEvent(event, editEvent);
Updates the popover data to match what is currently set in an event object.
Useful if a routine/function has updated the event object and those changes also need to reflect in a popover that is still open.
Note that if you are trying to update the popover from an async operation like a callback from an api request, you need to trigger a digest cycle so wrap your update in a $timeout as shown below.
$timeout();
Can be used to update data in view when that data is updated from an asynchronous operation. Setting data inside a $timeout will trigger a digest cycle and will update the view.
$timeout(function() { // Set the editEvent data here // // }, 0);
seecodeCalendar.init('closePopovers', true);
Call this at the end of a custom action if you'd like to close the popover and save your changes. For example, I've created a button called "meeting attended" that checks the "attended" box, marks the status as "Closed" and then saves the event. seecodeCalendar.init('closePopovers', true); is the last line of that custom action.
seedcodeCalendar.get('element').fullCalendar('refetchEvents');
This will refresh the whole calendar, retrieving all your events again.