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

(Note that you can also add buttons to the calendar interface itself, outside of any particular event. Learn more.)

In this article

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:

Button action scripts you can start using right away

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

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

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

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:  SendEmail.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.
Here's a related action that will open a URL in the Location field or show a dialog that the field is empty:  conditionallyOpenURLjs

Open a rich text editor to modify an event

This action uses the opensource TinyMCE rich text editor inside a popover to allow you to modify rich text fields, such as the Basecamp description, allowing you to add HTML content to your field directly in DayBack.

There are two actions in here. injectTinyMCE.js is a Before Calendar Rendered app action that adds the TinyMCE library to DayBack when you first open the calendar. richTextEditor.js is the button action that opens a new popover with the rich text editor for you to modify your field.
These are great examples of how to add a publicly available javascript library to DayBack, and how to open your own popover from a custom action using DayBack's popover function.

Buttons to Call Scripts in FileMaker

You can use custom actions to fire scripts in your FileMaker Pro solution. Learn how to do this here: Calling Scripts in FileMaker from DayBack.

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

Still need help? Message Us Message Us

Related Articles