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.

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)

This method invokes the tooltip action as documented here.

dbk.showMessage(content, showDelay, hideDelay, type, actionFunction);

Displays the specified message in an info bar at the bottom of the calendar window. This is the same function as utilities.showMessage described below.

dbk.filterFieldSort(filterArray);

Sorts the Status or Resource filters correctly, maintaining their folder structure. Useful for resorting the filter array if you've manipulated it with an action. The Resource and Status filter arrays can be retrieved using the seedcodeCalendar object below.

dbk.resetResources();

Resets the columns or rows in the Resource view. Should be invoked if the resource array has been manipulated by an action so those changes will be reflected in the resource views. The Resource and Status filter arrays can be retrieved using the seedcodeCalendar object below.

dbk.toggleCalendar(calendar);

Used to select or deselect a calendar on the calendar tab depending on its current state. The calendar array can be retrieved using the seedcodeCalendar object below: seedcodeCalendar.get('schedules').

dbk.toggleMultiSelect(event, shiftKey, targetElement, view);

This function allows you to programmatically select or deselect an event as part of the multi-select process. You can see an example of this in action in the Select All Events for Multi-Select example in Custom App Actions.

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);

dbk.addEvent(event);

This function will render an event on the calendar. If a Custom Action creates an ad-hoc event that's not in a data source, then this function will add it to the calendar view. This function should just be used for single events for performance reasons. If there are multiple events to add, then use the dbk.addEvents function below.

dbk.addEvents(eventArray);

This function is similar to dbk.addEvent function but accepts an array of events rather than a single event object. These events will then be added to the calendar in a single operation. Use this function when your Custom Action is adding more than one event to the calendar.

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.

Custom Actions

In Custom Actions, there are two default objects that will be of use in your code:

event - This object contains the properties of the event before it was modified.

editEvent - This object contains the properties of the event, including any changes that were made in the popover.

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

event - This object contains the properties of the event that is clicked on.

editEvent - This object contains the properties of the event that is clicked on. This object will contain the same contents of the event object as no data has been edited yet when clicking on an event.

On Event Create Action - runs just before a new event is rendered on the calendar

event - This object contains the properties of the event that is being created, such as the event source and dates.

Before Event Save Action - runs before any event changes are written back to the event data source

event - This object contains the properties of the event before it was edited.

editEvent - This object contains the properties of the event as it has been modified in the popover or via drag and drop. Any changes to this object will get saved to the event once the save action is called.

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.

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

editEvent - This object contains the new properties of the event including changes made either in the popover or by dragging and dropping the event.

event - This object has been set to match the editEvent object at this point, so the properties should match the editEvent object properties.

revertObject - This object contains the original state of the event properties before the changes were saved. This can be used to compare pre-save data or to revert the event data.

changesObject - This object contains only the properties that were changed as part of the save.

options - This object contains a single property, isUndo, which identifies if the On Event Save Action is the result of an Undo. Undo actions are triggered by clicking the Undo part of the toast message that appears at the bottom of the calendar when an event is saved or deleted.

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.

On Event Delete Action - runs after the delete button is clicked, but before the event is removed from the view

event - This object contains the properties of the event when the popover was opened

editEvent - This object contains the properties of the event, including any changes that were made in the popover before it was deleted.

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 is hovered over an event on the

event - This object contains the properties of the event when the popover was opened

editEvent - This object contains the properties of the event, including any changes that were made in the popover before it was deleted.

Example: the emailSupportOnHold.js example here shows how you can take advantage of the objects, event and revertObject

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.

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

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

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

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:

• 'container' - The DOM element that the popover will be added to

• 'id' - The unique id that should be given to the container element

• 'type' - The type of popover

○ 'modal' - A modal dialog that requires user interaction to close

○ 'popover' - A floating popover which will be automatically closed by clicking outside of it

• 'class' - A string of the CSS class name you'd like to apply to the popover

• 'destroy' - A boolean

• 'width' - A number defining the width of the popover

• 'height' - A number defining the height of the popover

• 'positionX' - A number defining the vertical position relative to the container where the popover should appear (popover type only)

• 'positionY' - A number defining the horizontal position relative to the container where the popover should appear (popover type only)

• 'staticHeight' - A boolean which defines whether the popover should auto-adjust the height or not

• 'direction' - The direction in which the popover should appear from the specified position

○ 'auto' - Determined automatically based on the available space around a specified position

• 'onShow' - A function that should run at the beginning of showing the popover

• 'onShown' - A function that should be run once the popover is fully shown

• 'onHide' - A function that should be run at the beginning of hiding/closing the popover

• 'onHidden' - A function that should be run once the popover is fully hidden/closed

• 'show' - A boolean indicating whether or not the popover should be shown or not when created (popover type only)

• 'destroy' - A boolean indicating whether or not the popover should be destroyed (removed from the DOM) when closed (popover type only)

User-defined properties:

You can define your own properties of the config object to specify a function that should be run on an "ng-click" action inside your template HTML. For example, you could define a property called 'yourCustomFunction' which runs your javascript function 'runYourCustomFunction' by adding this to your config object:

yourCustomFunction: runYourCustomFunction,

'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. This is not a method and should be called like the below.

if ( environment.isMobileDevice ) {

}

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('config');

Returns an object containing the global calendar configuration.

Config Properties:

.defaultTimedEventDuration - The default duration for new events

.databaseDateFormat - The default date format string for the associated source

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 aparnd those changes also need to reflect in a popover that is still open.

$rootScope.$broadcast('closePopovers');

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. $rootScope.$broadcast(' closePopovers'); is the last line of that custom action.

seedcodeCalendar.get('element').fullCalendar('refetchEvents');

This will refresh the whole calendar, retrieving all your events again.