Custom Button Actions

Custom button actions let you add your own buttons to the calendar. These buttons let you open other URLs or run scripts to go further when working with an event.

Reveal the actions drawer by clicking the gear icon in the lower right of an item's popover. You can add as many custom actions as you'd like: your list of actions will scroll if it exceeds the length of the drawer. (Note that you can add custom actions to your Google Calendar sources as well as to your different Salesforce objects. And you can now add custom actions to shared calendars!)

How to create your own buttons

Creating a new action is pretty easy:

1: Log in to admin settings and select the source you're interested in.
2: Scroll down past the Source Settings and Field Mapping, past Event Actions, until you see "Custom Actions"
3: Click "Add New Custom Action" and give your action a name.
4: Paste the code you'd like to execute where it says "URL or Function". This is obviously the interesting part--writing the action itself. Don't hesitate to get in touch and ask for help.
5: That's it.; Here's an example that marks a Campaign as "Active" from within DayBack Calendar. You can download the action code here: makeActive.js This video shows you how to apply the code to your custom action button and then modify it as needed:

Custom action scripts you can start using right away

Integration Examples

Many of the integrations between DayBack and other Salesforce apps include integrations to do things like lookup resources or trigger workflows. Here are two intentions that use custom actions:

Integrating DayBack with the Salesforce Action Plans App

Integrating DayBack with Taskfeed for Salesforce

Google Calendar Examples

You can also use custom actions to script interactions between Salesforce and Google Calendar. You'll find code for a couple examples here: looking up Salesforce data into Google Calendar events, and creating a new Salesforce record from a Google Calendar event:

Google Calendar Actions in Salesforce

More Examples

Here are some additional examples you can use as the starting point for your own actions.

Schedule GoToMeeting or Zoom Meetings from within DayBack Calendar

Movies and example code for creating, rescheduling, and starting GoToMeetings or Zoom Meetings from within your calendar: GTM Custom Actions, and Zoom Custom Actions.

Slack WebHook (Send A Message To Slack)

Here is the code for our popular post-to-slack demo: dayBackSlack.js

Harvest Time Tracker Widget

Show an in-line time tracker from your harvest account to start a timer related to this task. This is the time tracking widget we demo'ed at DevCon 2015 (movie here ): harvest.js

Parse And Open URL In Event

This action looks through your event's description and will open the first URL it finds: openFirstUrl.js

Here's a related action that will open a URL in the Location field or show a dialog that the field is empty: conditionallyOpenURLjs

Confirm Appointments or Collect Information in a Form

Designed to be run as an event action in a shared view, this will show a simple wufoo form when a recipient clicks on an event. DayBack passes some event details into the form and then a receipt of the confirmation is sent to the recipient and the organizer: confirmAppointmentWuFooForm.js

We use a wufoo form in this example since it's simple: field validation and emailing is all handled by wufoo so the event action we have to write is pretty simple. Here's a short video of this one in action.

Track UPS Package

Similar to opening a URL, this action looks through your event's description and will track the first UPS package code it finds: track-ups.js

Jump to this record in Salesforce

Leave the calendar and arrive at the record's native Salesforce page: jump to this record

Send an email with event details

Compose an email with the event title, description, and a link to the event. emailSupport.js

Create a link to your current calendar view for DayBack users within your organization

This custom function takes advantage of the seedcodeCalendar.get(filterType) function to create a URL that can be shared with DayBack users within your organization. This link will take them right to the same view, with the same filters applied to the calendar, and even open the same event you have open: CreateInternalURL.js

Validate Field Data Entry

This custom function allows you to specify fields in which you would like to verify data entry. ValidateF ieldEntry.js If a specified field is left empty, a notice will pop-up notifying the user and allowing them to continue editing the event in the popover, or save the event with the empty fields. Click here for a video of it in action.

Send an Email with a custom or event action

Here are 2 separate examples that compose a new email with the event details in the system's default mail client: SendE mail.zip

emailSupport.js is a custom action that allows you to press a button in the event window and compose an email to "support" with the title, description, and a link to the event.

emailSupportOnHold.js is an event action that triggers when the event is saved and it's status changed to your specified status ('On Hold' in this example). It will then compose an email notifying the event is in the specified status and containing the title, description, and a link to the event.

Disable All-Day Events

This On Event Create event action turns attempts to create an all-day event action into a scheduled event at the current time-slot with the duration set from your DayBack settings. disableAllDay EventsV1.js

Check Resource Capacity

This Before Event Save event action prevents an event from being saved if it will result in the specified resource going over its daily limit of events. This daily limit is specified in a configuration object at the top of the js code. If the resource will become over its limit, an error message will show which days would be over capacity and the edit is canceled. checkResourceCapacityV1.js

Warning When Creating In The Past

This On Event Create event action generates a modal dialog if the new event starts in the past. The user can then choose cancel or continue. InThPastWarningV1.js

Call Scripts in FileMaker WebDirect

You can use custom actions to fire scripts in your FileMaker Pro solution, in FileMaker Go, or in WebDirect. For Pro and Go you'll use the fmp;// url format documented here. For WebDirect you'll use a slightly different format. Here is the url format you'd use to execute a script in FileMaker WebDirect:

https://<host>/fmi/webd#<database name>?script=<script name>[&param=<script parameter>][&<$variable name>=<value>]]

There are a couple caveats to running scripts in WebDirect via urls. We hope FileMaker, Inc. will change this in a future version, but for now...

• Calling a script in WebDirect will create a new database session that FileMaker Server treats as a new concurrent connection.

• Before the script runs your solutions "OnFirstWindowOpen" script will run.

• If you elect to run the action on the same window and you show the WebDirect toolbar, you'll see a second tool bar below the current one.

...if you're going all-in on WebDirect, we've developed some techniques to get around these limitations. They involve creating a session table so you can run scripts in the same window and session without the three limitations mentioned above. Please get in touch for more info.

Styling your action buttons with colors and icons

You can change the appearance of your Custom Actions buttons by adding CSS specific to those buttons. The way this works is by tagging your button with a new class, and then adding CSS for that class. Here're how:

Tag your button with a class. When you describe your custom action button in source settings you'll see a place to give the button a class name. Note that you can tag a button with more than one class by separating your class names with a space:

Apply some CSS to that class. Once you have a class name for your button. add some new lines to DayBack's CSS to style the button. If you've never edited the CSS before, you'll find instructions here. Here is some sample CSS to make a button blue and give it a check icon:

.SomeClassName .btn { 
background-color: blue; 
} 
.SomeClassName .btn:hover { 
background-color: gray; 
} 
.SomeClassName .btn:active { 
background-color: black; 
} 
.SomeClassName .btn::before { 
content: "\f00c"; 
font-family: FontAwesome; 
padding-right: 5px; 
}

Icons. You can specify icons in CSS by selecting something from the FontAwesome icon set as you can see in the .btn::before example above where we chose the icon "\f00c". To find an icon, visit http://fontawesome.io/cheatsheet/ and select an icon (DayBack has access to *most* of these). You'll see the unicode for each icon to the right of it like "[". To use that icon in CSS, add a leading slash and just take the 4 digits starting with the "f" in every case. So in this case it would be "\f2bc".

More resources for custom actions

Learn more about data tokens, event attributes, and the functions available to your custom actions here: APIs: Resources for Custom and Event Actions. Learn about the JavaScript objects and methods you can take advantage of here: Objects and Methods for Custom Actions.

Actions also make a great sandbox for trying out new code and testing queries. Here's an example of how DayBack's Jason Young uses Custom Actions to console log query results: Testing SOQL Queries in DayBack Calendar