Custom Button Actions

Custom button actions let you add your own buttons to the event popover. Buttons let you open other URLs or run scripts to run custom workflows, or see further details about an event within Salesforce or FileMaker. You can customize DayBack in other ways, such as adding  event actions that modify what happens when a user interacts with an event or app actions that control DayBack's loading behavior.
To see your custom buttons, click the gear icon to reveal the button actions drawer in the lower right of an item's popover. 

    

You can add as many custom buttons to this side panel as you'd like. Your list of buttons will scroll if the number of buttons exceeds the length of the side panel. You can have a single set of buttons that appear on all of your calendars, or you can have a completely unique set of buttons for each of your Google Calendars, Salesforce objects, or FileMaker sources. You can have different buttons, all well as custom app or event actions for shared calendars. These can be distinct from the buttons that appear for logged-in accounts, and will allow you to implement different features for different user groups.

Additionally, buttons can be added to the calendar itself. Calendar buttons allow you to run custom scripts that modify the DayBack interface, open up bookmarks, or modify groups of selected events using your own menu of buttons.

In this article

How to create your own buttons

Creating a new action is pretty easy:

1
Log in to the admin settings and select the source you're interested in modifying.
2
Click on Actions & Buttons tab on the top of the screen, then scroll down to the section entitled Button Actions.
3
Click Add New Button Action and give your action a name.
4
Give your button a name, and then 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

Check out the videos 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)

Check out our popular post-to-slack demo. Here's the sample code: dayBackSlack.js

Harvest Time Tracker Widget

You can show an in-line time tracker from your harvest account to start a timer related to a task. This is the time tracking widget we demo'ed at DevCon 2015 (movie here ). Here's the same code: openHarvestApp.js

Parse And Open URL In Event

This action looks through your event's description and will open the first URL it finds in the description: openFirstUrl.js. Here's a simple 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: trackUPS.js
Jump to this record in Salesforce
Open a Salesforce record for an event. Action can be modified to leave the calendar, or just to open the record in a new window: jump to this record
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. The 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.The link will be copied to your clipboard so that it can be pasted into an email: createInternalURL.js

Send an Email with event default from custom button or when a status change takes place
Here are two separate examples that compose a new email using your system's default mail client. In both cases, the email contains a description of the email, a custom subject, and a link to the event.
The following button action triggers an email from the event popover: emailSupport.js
This custom event action automatically opens an email when an event is moved to a specific status: emailSupportOnHold.js
Open a URL in Location field, or show a dialogue if field is empty
Here's an 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.

You will need to install two scripts. addTinyMCEPart1.js  is a Before Calendar Rendered app action that adds the TinyMCE library to DayBack when you first open the calendar. addTinyMCEPart2.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 buttons by adding assigning a CSS class for each button, and adding the CSS definition to the Colors, Fonts & CSS section of the Administrator Settings:

Tag your button with a class name. 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.

Applying Icons: You can specify icons in CSS by selecting an icon from the FontAwesome icon set and defining the icon code in the .btn::before class. The code is a unicode character definition which looks like  "\f0d1" for. 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 "Unicode: f0d1". To use that icon in CSS, add a leading slash followed by the 4 characters starting with the "f". 

Below are two examples. We assign a class name of trackUPSButton and openMapButton to each of our custom button actions. We write our CSS definitions to color the button with three colors: the icons main color, the color when a user hovers over the icon, and the color when the user clicks the icon. Lastly, we define a .btn::before class for each icon, and add our FontAwesome Unicode icon code. Check out the result below: 

/* Blue Track UPS Button */

.trackUPSButton .btn {
    background-color: darkblue;    
}
.trackUPSButton .btn:hover {
    background-color: #000066;    
}
.trackUPSButton .btn:active {
    background-color: #000033;    
}
.trackUPSButton .btn::before {
    content: '\f0d1';
    font-family: FontAwesome;
    padding-right: 5px;
}

/* Red Open Map Button */

.openMapButton .btn {
    background-color: darkred;    
}
.openMapButton .btn:hover {
    background-color: #660000;    
}
.openMapButton .btn:active {
    background-color: #330000;    
}
.openMapButton .btn::before {
    content: '\f041';
    font-family: FontAwesome;
    padding-right: 5px;
}

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

Related Articles