Custom Button Actions

Overview

Custom button actions in DayBack let you add your own buttons to the Event Popover. These buttons can open URLs, run scripts for custom workflows, or show additional event details in Salesforce or FileMaker. Additionally, you can enhance DayBack with Event Actions, which modify user interactions with events, and App Actions, which control DayBack's loading behavior.

Unlimited Custom Buttons

You can add as many custom buttons as you like to the side panel in DayBack. If the buttons exceed the panel length, the list will scroll. You can have a single set of buttons for all calendars or unique sets for each of your Google Calendars, Salesforce objects, or FileMaker sources. Additionally, you can customize buttons, app actions, or event actions differently for shared calendars compared to logged-in accounts, allowing specific features for different user groups.

Calendar Buttons

Additionally, you can add buttons to the calendar and sidebar interface itself. Calendar buttons allow you to run custom scripts that modify the DayBack interface, open bookmarks, or modify groups of selected events using your custom menu of buttons. You can also add buttons directly to the bottom of the popover, alongside the Save and Delete buttons.

Sample Code Used in the Video

The above video shows you how to add your Button Action code and then modify it as needed. The example button marks a Campaign as "Active" from within the Event Popover.

Download the sample code: Make Campaign Active Button.

Here are some examples you can use as is, or use as a starting point for your own button actions:

Schedule Zoom Meetings or GoToMeeting calls

• Check out the videos and example code for creating, rescheduling, and starting GoToMeetings or Zoom Meetings from within your calendar
• Sample Code: Schedule GoToMeeting, Schedule Zoom Meeting

Send a Message to a Slack Channel

• Check out our popular Post-to-Slack demo video.
• Sample Code: Send Messages to a Slack Channel

Add a Harvest Time Tracker Widget

• Show an in-line time tracker from your Harvest account to start a timer related to a task. We first showcased this time tracking widget at DevCon 2015 (See movie here).
• Sample Code: Open the Harvest App

Open URL in Event Description

• The first example looks through your event description, and opens the first URL it finds. A related example looks through your event's description, and conditionally opens a URL if one is present, or shows a dialog box if the location field is empty.
• Sample Code: Open the First URL found, and Conditionally Open a URL, or show an error.

Track a UPS Package

• Similar to opening a URL, this action scans your event's description and tracks the first UPS package code it finds.
• Sample Code: Track UPS Packages

Jump to This Record in Salesforce

• This action can be modified to leave the calendar or open the record in a new window.
• Sample Code: Open a Event's Salesforce record

Share a Link to your Filtered View with Others

• This action creates a URL link to your current calendar view. This is useful if you want to quickly share an internal link to your screen with other users in your organization.
• The URL is copied to your clipboard for easy sharing with others. When clicked, the link will take a user to the same view, with the same filters applied, and even open the same event you have open.
• The action uses one of DayBack's Objects and Methods, namely the seedcodeCalendar.get(filterType) function, which create a URL that can be shared with DayBack users within your organization.
• Sample Code: Create Internal URL to share your view with staff.

Send an Email with Event Details, from a Button, or based on a Status Change

• The first example is a Button Action that compose a new email using your system's default mail client when the button is clicked. The email includes a description, a custom subject, and a link to the event. The second example is an Event Action that automatically triggers an email when an event is moved to a specific status.
• Sample Code: Click Button to Send Email, or Send an Email on Change of Status.

Open a Rich Text Editor to Modify any Event Field

• This action uses the open-source TinyMCE rich text editor inside a popover to allow you to modify rich text fields, such as the Basecamp description, directly in DayBack.
• This example show how to add a publicly available JavaScript library to DayBack and how to open your own popover from a Button Action using DayBack's dbk.popover() function. See the DBK Object for a list of available function.
• Sample code:
  • Part 1: Add TinyMCE Library to DayBack
    • A "Before Calendar Rendered" App Action that adds the TinyMCE library to DayBack when you first open the calendar.
  • Part 2: Launch Rich Text Editor.
    • The Button Action that opens a new popover with the rich text editor for you to modify your field.

Additional Button Scripts

View our extensive collection of Button Actions in our public extensions library.

Use custom actions to trigger scripts in your FileMaker Pro solution. Learn how to do this here: Calling Scripts in FileMaker from DayBack.

You can customize the appearance of your action buttons by assigning a CSS class to each button and adding the corresponding CSS definitions in the "Colors, Fonts & CSS" section of the Administrator Settings.

1. Tag Your Button with a Class Name: When defining your Button Action in the source settings, you'll find a field to assign a CSS class name. You can assign multiple classes to a button by separating the class names with spaces.
2. Apply CSS to the Class: Once you have a class name for your button, add the corresponding CSS to DayBack's CSS configuration. If you're new to editing CSS, you can find instructions here.
3. Applying Icons: Specify icons in CSS by selecting from the FontAwesome icon set. Define the icon code in the .btn::before class using a Unicode character definition. For example, "\f0d1 ". Visit FontAwesome Cheatsheet to select an icon and find its Unicode. Use the format "\fxxxx " in your CSS, where "xxxx " is the Unicode. The format requires a leading slash followed by the 3-4 characters starting with the "f ". 

Examples

Below are two examples. We assign the class names trackUPSButton and openMapButton to our custom button actions. We then write CSS to style the buttons with three colors: the main color, the hover color, and the active (clicked) color. Finally, we define a .btn::before class for each icon and add the FontAwesome Unicode icon code. The code is listed 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;
}

Add Buttons to Calendar, Sidebar, or Popover

You can also add buttons to other elements of the DayBack user interface. See our article on adding buttons to the Calendar, Sidebar, or Popover.

Learning Resources

• Data Tokens, Event Attributes, and Functions: Gain a deeper understanding of the available data tokens, event attributes, and functions for your custom actions by visiting the APIs: Resources for Custom and Event Actions.
• JavaScript Objects and Methods: Explore the JavaScript objects and methods you can utilize in your custom actions at Objects and Methods for Custom Actions.

Sandbox for Testing

Custom actions provide an excellent environment for experimenting with new code and testing queries. For example, check out how DayBack's Jason Young uses custom actions to console log query results in Testing SOQL Queries in DayBack Calendar.

Draft Mode

For testing App Actions or Event Actions, we recommend using Draft Mode. This mode allows you to make custom changes what are only active for your user session. This mode is great for testing code changes without affecting other users. Drafts and be saved, disabled, reenabled, and then applied to production when your code changes are ready for production user.