JavaScript Custom Actions

Introduction

While most button actions run scripts in your FileMaker file, you can also run custom JavaScript to interact with other web services. This is new to DayBack for FileMaker as of version 9.53. DayBack's event actions can also call JavaScript and the exporting technique shown below can be used to export files for event actions also.

We previewed this at DevCon 2015 and showed off a couple examples of what you may want to use JavaScript actions for. Though this video shows them in DayBack Online, they're now available to DayBack for FileMaker also:

Adding JavaScript actions to your file.

1. Create a new field in the CalendarInterface table called "CustomActions". This should be a repeating text field: give it about 10 repetitions. You'll paste the actual text of each custom action into one repetition of this field. (You can see some example text here.

2. Create a new script called "Load JavaScript Actions". This script will name and export a .txt field for each action you'd like to use. Here is a screenshot of the script showing two custom actions being exported:

Make note of the name you give each file as you'll reference these names in step 4 below. And be sure that your file names just contain simple text characters: no punctuation outside of the ".txt" or other characters that are not premised in JavaScript variable names.

3. Edit the script "Load Source Settings at Startup" and add a new Perform Script step at the top to run the "Load JavaScript Actions" script your just wrote.

4. Continue editing the "Load Source Settings at Startup" script and find the comment "Custom Event Actions..." where you specify the button name and the script to run for each custom action. Where your FileMaker scripts were described like this...

"Button Name, FileMaker Script Name"

...your JavaScript custom actions will be described like this...

"Button Name, file:customaction.txt"

...where "customaction.txt" is one of the files you named and exported in the script you wrote in step 2.

Using Event Data Tokens

DayBack gives you the ability to specify data tokens that will be replaced by event data at the time the JavaScript action is run. This means your JS actions can pass along fields from your event and that's useful for passing event data to other services (like including an event's title in your Slack post). Using this token works a bit differently that the $vars you can use in your FileMaker scripts.

In your JavaScript custom actions, the data tokens are wrapped in double brackets with the mapped field identifier [[DataToken]]. This identifier is not the field name, it's a generic version of the field name DayBack uses under the hood. For example if you wanted to reference your event ID field it would look like this [[eventID]] even though your field name be named "myevents::primarykey".

allDay contactID contactName description end (the end timestamp of the event) eventID eventSource (the number of the event's source: "1" not "Source No 1"projectID ProjectName resource start (the starting timestamp of the event) status titleEdit (the event summary) title (your eventsummerycalc field)

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 eID = [[eventID]];
alert(eID);

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

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

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:

• 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.