DayBackOnline

Custom Actions

Overview: What Are Custom Actions?

Custom actions let you add your own buttons to the calendar. These buttons let you open other urls (including fmp:// urls) to go further when working with an event.

Reveal the actions drawer by clicking the gear icon in the lower right of the event'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.

How to Create Your Own Actions

You can create your own custom actions in "Administrator Settings" under the "Settings" tab in the calendar sidebar. In administrator settings navigate to the calendar source and then select the source you would like to add the custom actions for. Scroll down to the bottom of the source settings and you will see a section labeled "Custom Actions".

Click "Add New Custom Action" to create a new action. Custom actions may contain a URL or Javascript code. For URL's you have the ability to specify to open the URL in a new window.

Using Event Data Tokens

DayBack gives you the ability to specify data tokens that will be replaced by event data at the time the custom action is run. This is useful for passing event data to other services for example.

All data tokens are wrapped in double brackets with the mapped field name [[DataToken]]. For example if you wanted to reference the ID field as it is mapped by default it would look like this [[id]]. Data tokens use the names that you assigned when you mapped your fields in the source settings (your field names). The only exception here is we also utilize a token called "allDay". This is a boolean that signifies an all day event or not.

An example URL using data tokens might look like: https://www.somewebsite.com?id=[[id]]&date=[[DateStart]]

If you are using data tokens in Javascript code we recommend wrapping the token in quotes so if the value is empty it doesn't throw an error in your javascript code. All data tokens are strings this way which makes coding more consistent.

An example here might be: var eventID = [[id]]; alert(eventID);

Even with boolean values like allDay the preferred method here is to use a string for example: var isAllDay = "[[allDay]]" === "true"; //Evaluates to a boolean

Using Event Data Tokens with Google Calendar

Since there is no field mapping required for Google Calendar sources (DayBack knows how to find the data it need in Google) you'll use DayBack's own name for each data object when writing custom actions for your Google events. Here are the names of each of the properties you can reference in a custom action for a Google Calendar event:

        eventID 
        allDay 
        start 
        end 
        title 
        titleEdit
        description
        resource
        status
        contactID
        contactName
        projectID
        projectName

Some Custom Action Scripts You Can Start Using

Use the examples below as the starting point for your own actions.

Slack WebHook (Send A Message To Slack Group Chat)

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

Schedule GoToMeetings from DayBack

Create, reschedule, and start GoToMeetings from within DayBack Calendar. Instructions and a movie of this in action are here.

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

Create a link to your existing 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. ValidateFieldEntry.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: 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.

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

Call Scripts in 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. (That's a WebDirect bug we hope gets squashed soon.)

What Kind of Javascript Can I Use?

Most everything. We don't allow access to the global window object but all built in functions for window can still be called directly. For example: open(), close(), alert(), location.href, can all be used as long as you don't use them in the context of window. In other words use location.href instead of window.location.href.

DayBack also includes a few popular libraries to make coding easier. jQuery, BootStrap, and moment.js are all included. So anything you can do in one of those libraries can be used in a custom action.

Keep in mind when writing Javascript for custom actions that the code is executed when loaded (it's loaded when the button to run the action is clicked). So things like onload or jQuery $.ready() aren't necessary here.

Add Icons and Colors to your Custom Action Buttons

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. Revisit the script when you've described your custom action button: that's the script "Load Source Settings at Startup...". To add a CSS class to your button, simply add an additional parameter after the name of your button's script. So the buttons might look like this:

List (
"View Event Record, Go To Event Record From WebViewer, SomeClassName";
"Sample Custom Action, Custom Action Example, AnotherClassName" ;
""
)

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 https://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".