No lectures. No desks in rows. Yes to everything else! A PauseOnError event, hosted by SmallCo. Monday evening, April 8 — Thursday morning April 11, 2019
PauseOnError – Tulum, Mexico
Tickets go on sale Tuesday, Jan 22nd 9am EST.
Here’s a mod I can’t live without. This tooltip will translate your appointments into three other time zones. Also, it’s easy to customize so you can add more cities if you need to. This is also a great example of how fun it can be to use JavaScript within FileMaker because JS makes these kinds of timezone transformations much easier.
Transforming Times with Moment.js
DayBack includes the wonderful momentjs and moment-timezone libraries for working with dates and times. That makes a tooltip like this a lot easier. For example, if you want to translate the event’s start time into London’s time zone, you do this:
|
1 |
event.start.clone().tz('Europe/London') |
And if you want to turn that time into text like “in 34 minutes” you can just do this:
|
1 |
event.start.fromNow() |
Having written tons of FileMaker functions for date and time parsing back in SeedCode Calendar’s early days, I’m in love with these momentjs functions.
Adding little JS tooltips to DayBack is also a great way to get your feet wet with JavaScript, and you’ll find some simple examples here to get you started.
Add this to Timezone Tooltip to Your File
Tooltips were added to DayBack as an in-app update in version 10.42 so make sure you’re up to date. There are two methods for adding a tooltip to DayBack: you can add the commands inline, right into DayBack’s configuration script, or you can export the tooltip’s JavaScript as a file and then point DayBack at that. The inline version is fine when you have just a tiny bit of JavaScript, like this example which shows the event’s title in the tooltip:
|
1 |
dbk.tooltip(event.title); |
That’s great and documented here, along with several examples. However, for longer code chunks, like the one for this timezone tooltip, it’s easier to export a file. This way, you can make changes to the tooltip in your favorite text editor and the paste that right into a FileMaker field without worrying about escaping your quotes as you’d have to if you tried to reference the JS inline in a FileMaker calculation.
The file-export method is the same one DayBack uses for JavaScript custom actions, here’s how to use it:
1. Download the JavaScript for this tooltip: TimezoneTooltipJS.txt.zip
2. Follow steps 1 through 3 here under the heading “Adding JavaScript actions to your file.” Those steps show you how to create a text file for this JS along with a FileMaker script to export it. You’ll add the name of your exported file to the script, so call it “timezoneTooltip.txt.”
3. Enter browse mode, then open TimezoneTooltipJS.txt. Copy the contents and paste that text into your new text field, so it’s ready to export.
4. Now edit the script “Load Source Settings at Startup…” in DayBack and find the comment “Event actions for WebViewer events…” at around line 33. (There is one of these sections per source, but line 33 is where the one for source no. 1 is located.) Edit the next Set Variable to set the $$sc_EventActions variable like this, replacing the “NA”s with the strings shown here:
|
1 2 3 4 5 6 7 8 9 10 |
// BEGIN Event Action 1 Substitute ( List ( "On Event Hover" ; // Action trigger, what interacting triggers this action "file:timezoneTooltip.txt" ; // FM Script Name or Javascript "False" ; // Prevent default action. Will prevent the default behavior "[editable, readonly]" // Event types that can use this action in brackets [editable, readonly] (optional) ) ; [ ¶ ; ", " ] ; ["NA" ; ""] ) // END Action |
5. Download this CSS (TimezoneTooltipCSS.txt.zip) and add that to DayBack’s theme. If you haven’t modified DayBack’s CSS before, it’s easy. You’ll find detailed instructions in our docs along with lots of cool examples.
6. That’s it! Run DayBack’s “Upon Opening” script and you should see your new tooltip when you hover over events. To make changes to the tooltip’s JS, paste new text into the text field you created in step 3 and run the “Upon Opening” script again to see your changes take effect.
Customizing the Cities
The JavaScript and CSS you’ll add to your file were created by Ana Petrechenko, SeedCode’s new intern from 42U. She did a great job making this easy to understand and easy to customize. To change or add cities, you’ll modify the section of the tooltip shown below. To add a city, copy the last block (Tokyo), paste it in below Tokyo’s section, and then change the city name and time zone name. The tz() function in each line takes the city’s actual time zone name, and you can find the complete list here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* You can set up different timezones here */ var timeZones = { newYork : { name : "New York", time : event.start.clone().tz('America/New_York') }, london : { name : "London", time : event.start.clone().tz('Europe/London') }, tokyo : { name : "Tokyo", time : event.start.clone().tz('Asia/Tokyo') }, }; |
Big thanks to Ana for this wonderful mod, and to Jason, Tanner, and KC for the coaching!
This is the third and final post in a series on using the Gmail API from FileMaker. Please review the previous articles, if you haven’t already, particularly the first one which covers setting your app up with Google and authentication. There’s also a great article by Brendan McBride from dbservices that covers importing emails from an inbox into FileMaker. This article can be seen as the first in the series as it leads directly to the ones we’ve done here.
Integrating FileMaker and Gmail Part 1 – Sending HTML Emails
Integrating FileMaker and Gmail Part 2 – Sending Attachments
dbservices – FileMaker Gmail Integration
As with the first article, all of these examples use the native Insert From URL script step so there won’t be any plug-ins required, and since the Insert From URL is supported in all aspects of the FileMaker platform, these techniques can be adapted to work on the Server, Go, FileMaker Cloud, and WebDirect. These techniques require FileMaker 16 or higher as they use the advanced cURL options introduced in that version.
Working With Threads
This article will be looking at working with email threads. It will cover querying for responses to a specific thread of emails and maintaining the thread correctly when responding to an email from FileMaker. Here’s a video overview along with a new free example file below:
FileMaker Gmail Integration: Example File
Please download the example file FM2Gmail v1.3 for a working demo. This new version adds the ability to receive incoming messages for existing threads and reply to them. This file replaces v1.2 from the previous article.
Latest FM2Gmail Example File
Managing Replies
At the end of our last example, we had successfully sent an HTML email with multiple attachments, but what if the correspondent responds to the message? If we want our outgoing message to be associated with a specific FileMaker record, then it’s likely we’ll want all the responses to this email, and all subsequent responses, to be associated with this record as well. Let’s look at this in action. I’ve sent a message from our example file to myself, and now I’m going to respond and add a new inline attachment to my response. Read Full Article →
The latest in-app update to DayBack introduces custom tooltips. These tooltips are completely scriptable. You can customize the content and can style the tooltips (and their content) using your own CSS.
How It Works
Tooltips are triggered by a new calendar action: On Event Hover. This new action can call FileMaker scripts or execute JavaScript. It’s JavaScript you’ll use for the tooltips, and you can call a simple function to show any content you’d like. Here’s the Javascript for the example above:
dbk.tooltip(event.title);
That’s passing the event’s title into the tooltip function. You can also pass in more fields and use HTML to make it more readable. Here’s another field (resource), separated by a line break:
dbk.tooltip(event.title + ‘<br />’ + event.resource);
The tooltip documentation covers all this and provides a more thorough description of this JavaScript, lots of examples, and notes on styling this with CSS.
Going Further
There are a lot of possibilities here when you combine the On Event Hover actions running JavaScript inline with tooltips that will show any HTML you put in there. By adding some logic to your JavaScript you can have different tooltips for different kind of events, or show different tooltips on different views. Tooltips have access to any of the JS libraries in DayBack, including momentjs for formatting dates.
Writing tooltips like this is probably the easiest way to get started with JavaScript in FileMaker. You can show meaningful, user-facing results with just a single line of JS, and we can help. Let us know what you’re working on and we can point you in the right direction.
And if you have interesting use cases for running a FileMaker script on hover, we’d love to hear about that too. Don’t forget, you can also add buttons to DayBack to run your own scripts (FileMaker scripts or JavaScript) and buttons may make more sense for some actions. More here: custom button actions in DayBack.
Get It Now
If you’re already using DayBack, tooltips and the new On Event Hover action are free in-app updates. Just click “Check for Updates” from the upper right corner. If you’re new to in-app updates, you can see them in action here: how in-app updates add new features and preserve your customizations.
If you’re not yet using DayBack, download an unlocked trial, link it to your files, and see if it can make a difference for your team’s schedule…
This is the second in a series of articles on using the Gmail API from FileMaker. The first article has some background on this approach as well as instructions for authenticating to the Gmail API and sending HTML emails. Please review that article here if you haven’t already. Additionally, there’s a great post by dbservices on integrating Gmail with FileMaker that lead to these articles and should be checked out as well.
As with the first article, all of these examples use the native Insert From URL script step so there won’t be any plug-ins required, and since the Insert From URL is supported in all aspects of the FileMaker platform, these techniques can be adapted to work on the Server, Go, FileMaker Cloud, and WebDirect. These techniques require FileMaker 16 or higher as they use the advanced cURL options introduced in that version.
In this article, we’re looking at sending large, multiple attachments via Gmail. Here’s a video overview along with a new free example file below.
FileMaker Gmail Integration: Example File
Please download the example file FM2Gmail v1.2 for a working demo. This new version adds the ability to send attachments and replaces v1.1 from the previous article.
FM2Gmail Example File v1.2
Sending an Email with Attachments from FileMaker
Before we can send anything, we do need to authenticate our app with Google. Please refer to our previous article’s section on Getting Started / Authentication if you need to review these steps. Once we’re all authenticated, we can compose a new e-mail with attachments. You’ll notice in the new example file that the compose window has a new paper clip button for adding attachments. This button brings up a Card window which we can use to drag attachments in, add individual attachments and import entire folders of images or text files. Read Full Article →
This is the first in a series of articles on using the Gmail API from FileMaker. We’ll provide free example files for each post and these examples will all use the native Insert From URL script step so there won’t be any plug-ins required.
In this article, we’re going to look at sending HTML emails. In future articles, I’ll examine sending large emails (35MB) with multiple attachments, resumable uploading, and managing threads. This approach provides a first-rate email experience that is not available using the native Send Mail script step. And, since the Insert From URL script step is supported natively across the whole FileMaker platform, the techniques shown here work on the Server, Go, FileMaker Cloud and WebDirect. This technique requires FileMaker 16 or higher since we’ll be using the advanced cURL options introduced in FileMaker 16.
Here’s an introduction. Step-by-step instructions and an unlocked example file follow:
Background and Choosing the Gmail API
I recently had the opportunity to build a comprehensive Gmail integration into a client’s system. The main reason the client wanted to go the Gmail route was to have seamless integration with their native Gmail experience; at first they weren’t that interested in threads or large attachments, but those features soon became important once they started emailing from within FileMaker.
Before we started, the client and I discussed which route we wanted to take, like using a plug-in or rolling our own. Fortunately, right about this time, dbservices published a great blog post and example file on integrating with the Gmail API. This article provided great techniques for authenticating to Google as well as creating an inbox in FileMaker that would import Gmails with their attachments. Basically, they had already done a lot of the work we needed. I implemented their authentication and inbox routine and then added the techniques I’m going to share here.
Track estimated vs. actual time right in your FileMaker Calendar
We recently customized DayBack for a team tracking the manufacturing and assembly trade show displays. Folks on the manufacturing floor use DayBack to see what they’re scheduled to work on AND to log their time. They can then compare estimated to actual time with Calendar Analytics.
DayBack is designed to be customized and provides several hooks where you can add your own time tracking scripts and layouts. This post illustrates five different approaches and includes instructions/examples below.
If you’re using DayBack to see what you need to work on, it makes sense to log time right there as well. Here’s what we did for this customer:
Logging time in a card window from within DayBack Calendar.
Comparing estimated to actual time in Calendar Analytics
Time Tracking in FileMaker: Five Methods within DayBack Calendar
1. Card Windows
By modifying just one FileMaker script, you can add CSS specific to certain users or privilege sets. Use this to…
- Swap out or remove buttons
- Show or hide different calendar views
- Show or hide individual fields in an event
- Add icons for certain event statuses
- Show or hide help icons
- Code examples for all of these, and more, are here.
Edit the script “Export Theme ({Preview})” and in the Else branch, replace the single ExportFieldContents line with lines 22 through 31 in the screenshot below. You’ll see just a single branch here for the user “Bob”, but change that to “=” and you can create a separate branch for each user who needs special CSS. (Click on the image for a larger version.)
Line 25, which you can’t really read in the screenshot, is where you actually add new CSS. Here is the second part of the SetField dialog and the example here just turns off the green plus button:
|
1 2 3 4 5 6 7 8 9 10 11 |
// Hide the plus button for new events ".add-event-container { display: none !important; }" & ¶ & // Hide the "new event" popover button "div[content=newEvent]{ display: none !important; }" & ¶ & CalendarInterface::ExportGlob |
Don’t forget to include the regular CSS at the end, in the last two lines which reference the CalendarInterface::ExportGlob. You’ll find examples of some common CSS changes here: customizing DayBack’s CSS.
Note that the script above only runs at startup, so if you are having users log in and out of your solution after startup, you’ll want to run DayBack’s “Upon Opening” script after each login change.
Enjoy!
Analytics (charting) is now available on all scheduling views in DayBack for FileMaker. Here are some screenshots of the same data, first in the multi-day scheduling view and then in horizon view.
Three trucks over 10 days: when the chart crosses the orange threshold, that truck is overbooked.
Here’s the same data in Horizon view.
Both views have their advantages: horizon view is easier to read, but the scheduling view is great if you need to see what times are open. So now you can use analytics on both views.
In this example, we set the dotted orange threshold at three-installations-per-day and can now quickly see which days are exceeding our capacity. (If this field service use case applies to your work, we have a video going over the example in more detail.)
Learn more:
Overview: how analytics drive better decisions
How we use analytics at SeedCode
Download an unlocked 30-day trial of DayBack and add it to your file.
Add this to your copy
This is a free in-app update to DayBack, so existing users can add it to their file without disrupting customizations they’ve already made. If you’re new to DayBack Calendar or in-app updates, here’s how they work and how they let you take advantage of new version of DayBack while you continue to customize it: in-app updates.
SeedCode can now customize your ProMaps solution so you can run your maps in FileMaker WebDirect.
ProMaps doesn’t work in WebDirect by default, but KC Embrey and Jason Young have figured out how to customize it to create a seamless user experience. Check out this short video showing ProMaps running in WebDrect: notice how it can call FileMaker scripts in WebDirect and pass found sets between WebDirect layouts and the map. We’re thrilled with how this turned out!
Add This to Your File
If you’d like to run your copy of ProMaps in WebDirect, it’s a pretty complex modification. The description below meant to show advanced developers what we’re doing with WebDirect and how they can replicate that or extend it. Unfortunately, it’s not intended to be a step-by-step guide for getting your copy of ProMaps running in WebDirect. That’s not something we can describe in a blog post, but it is something we can set up for you if you’reinterested.
If you’re a developer fluent in custom web publishing or the new Data API, read on, and we’ll describe how we’ve set this up. If you need more guidance than that, we’re happy to get you an estimate and set this up for you: once it’s up and running, you can customize it like regular ProMaps. Please get in touch.
Maps in FileMaker WebDirect – Why Is This So Hard?
Until now, the problem has been that it’s tough to call scripts in a WebDirect session from inside a web viewer in the same session. If you ask your web viewer to run a FileMaker script by URL, for example, WebDirect will ask you to log in again and start a second WebDirect session, run your start-up scripts, etc. This is a terrible user experience. WebDirect has no support for tokens or deep linking which make this kind of thing simple in most web apps: once you’re logged into Google Apps, for example, you can open a document by URL without having to log in again.
Users run into this any time the map takes you to a FileMaker layout or runs a FileMaker script. When you click on a button to view a property record in your own layout, or when you perform a find in FileMaker and then as the map to show the found set: these kinds of action require communication between the web viewer and the WebDirect session. And this communication is not built into WebDirect.
The Solution
Using a Session Table. KC and Jason figured out that on-timer triggers in WebDirect could call scripts seamlessly: the trick would be telling the on-timer to run a different script depending on what the user asked to do. So they created a session table in ProMaps which has one record for every logged in user. Now when you click a button in ProMaps that would typically run a script, ProMaps instead sends the name of the script to your record in that session table. An on-timer script in ProMaps queries your session record to see if there are any scripts it needs to execute and when it finds one, it runs that script along with any parameters.
But how does the WebViewer write to your record in the session table if the whole problem is that the WebViewer can’t call FileMaker scripts without spinning up a new session? Instead of editing your session record with a script, ProMaps uses the web publishing gateway or the Data API to edit your session record. In our deployments, we use fmxj.
fmxj.js is an open source JavaScript wrapper for FileMaker XML web publishing. Jason Young created this in 2015 for DayBack Online. We wanted a dead-simple way to talk to hosted FileMaker databases in JavaScript without a lot of dependency on third-party apps. In this ProMaps solution, it’s used to let the web viewer edit your record in the ProMaps session table; we could have used the new Data API, but we’re very familiar with fmxj and it already has a method in place for handling authentication server side.
If you’re interested in using fmxj in your own projects, here are some resources:
Note: the “drop a pin” example in this video is not a stock ProMaps feature–KC added that for a customer and wanted to show that it also worked in WebDirect. All the other functions shown in the video are built into ProMaps. If you’d like your map to do something fancy, just get in touch.