SeedCode: Next

What's next for SeedCode, FileMaker, Calendars, and the Web

New – DayBack Calendar for FileMaker 19

Posted on May 24, 2020 by seedcode · (Add Comment) · Tagged With: Calendar, FileMaker 19, WebDirect

Here it is. The best calendar we’ve ever built is also the easiest to integrate and customize. We’ve been eagerly anticipating a few of the changes in FileMaker 19 that let high-end add-ons like DayBack integrate seamlessly with FileMaker.

And we’ve done a lot of work to make sure FileMaker developers can customize every aspect of the calendar.

All the calendar features we’ve deployed to Salesforce and Google are now available to our FileMaker developers. And things like Calendar publishing and WebDirect access that were separate subscriptions are now included. The same layouts, scripts, and behaviors now work in FileMaker Pro, Go, and WebDirect. (Even logging into your Google Calendars from within FileMaker works just as smoothly in WebDirect.)

Watch a 5-min video of the new DayBack in action:

Read Full Article →

Reschedule Multiple Events

Posted on March 23, 2020 by seedcode · (Add Comment) · Tagged With: Calendar, Resource Scheduling

Your calendar’s latest power-up: now select multiple events and reschedule them all at once. Multiple-selection is a free in-app update to DayBack for FileMaker. Here’s how it works…

Multiple-selection makes it easier to reschedule whole projects and to shift your plans from one day to another.

Do More

• Drag events to reschedule them or to change their resource or status.

• A single undo is available, making this great for trying out scenarios.

• Your records are still edited with the same FileMaker script used throughout DayBack. So any customizations you’ve made to that script will continue to work when batch-editing events.

• Check out the documentation for more details.

Can I Automatically Link Events Together?

Yes, you can permanently link events together, instead of manually selecting them each time. For example, you can chain all the items for a project together so that date changes cascade through downstream events. You’ll find instructions here: add cascading events to DayBack for FileMaker.

Add This to Your DayBack: In-App Update

This feature is available as an in-app update to DayBack and doesn’t require any FileMaker changes if you’re already using the latest DayBack Calendar. If you’re new to in-app updates, or it’s been a while since you used them, here’s an overview: in-app updates in DayBack.

If you’ve purchased DayBack Calendar on a monthly or yearly subscription, you have access to in-app updates for the life of your subscription. But if you bought DayBack outright, your included updates end after the first year.

Not to worry, when your first year ends, you can subscribe to in-app updates here: extend your updates.

Color Coding Your FileMaker Calendar by Resource

Posted on March 8, 2020 by seedcode · (4 Comments) · Tagged With: Calendar, Resource Scheduling

By default, DayBack color-codes your events by their status: more precisely, by whatever you’ve mapped to the status field. Coloring by status makes sense since many of DayBack’s scheduling views already put events into their own columns or rows by resources.

But if you’d like to add a second color for the event’s resource, you can do that by changing the event styling in DayBack to add a second color.

In this example, we’ll add a frame around each event where the frame’s color corresponds to the event’s resource. (Note that the technique used here will let you base the frame on the contents of any field, not just resource.)

If you don’t like the frames’ width or colors, you can change that in the CSS the follows below. And if you’d like to see a completely different way to display a second color, check out this post where you’ll learn how to add a header-color to each event.

Add A Second Color to Your Calendar

Begin by changing the way your event title is mapped in DayBack. Edit the definition of the field “DBk_EventSummaryCalc” in your events table, adding this string at the very beginning of that field:

<dbk-css class=”ResourceName”></dbk-css>

Where “ResourceName” is the contents of the field you mapped to your resource in DayBack’s source layout. The string above shows what your calculation should evaluate as; in FileMaker’s calc dialog, you’ll actually add a calculation like this in front of your existing DBk_EventSummaryCalc…

“<dbk-css class=” & Quote ( YourResourceField ) & “></dbk-css>” &

That dbk-css string creates a class using the resource name of your event. Once you have a class with the resource name, add the following CSS to DayBack and you’ll see a colored frame for each resource. If you haven’t changed DayBack’s CSS before, here’s an overview (be sure to click through to the section on editing themes).

A few things to keep in mind:

You’ll want to create specific CSS for each resource: you’ll see three resources in the CSS below, following /* Resource Name 1 */ and then /* Resource Name 2 */, etc.
If your resource name has more than one word, like “Beth Reynolds”, you’ll replace that space with a period in the CSS, so Beth Reynolds becomes Beth.Reynolds

Here are some example CSS styles to create colored frames for three resources: Beth Reynolds, James Woolsey, and Peter Samuels…

/* Resource Color Frame Customizations */

.fc-event-draggable {
    padding-left: 0;
}
.fc-event-draggable .fc-event-time, .fc-event-draggable .fc-event-title {
    padding-left: 3px;
}
.fc-event-draggable .fc-event-time {
    width: 98%;
    overflow: hidden;
}
.fc-event-vert.fc-event-end {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.fc-event-vert.fc-event-start {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* Resource Name 1 */
.Beth.Reynolds::before {
    position: absolute;
    left: 0;
    top: 0;
    content: ' ';
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: transparent;

/* Modify Border Color and Size here */
    border: 4px solid rgba(255, 70, 10, 0.8);

    border-radius: 4px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


/* Resource Name 2 */
.James.Woolsey::before {
    position: absolute;
    left: 0;
    top: 0;
    content: ' ';
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: transparent;

/* Modify Border Color and Size here */
    border: 4px solid rgba(33, 132, 234, 0.8);

    border-radius: 4px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* Resource Name 2 */
.Peter.Samuels::before {
    position: absolute;
    left: 0;
    top: 0;
    content: ' ';
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: transparent;

/* Modify Border Color and Size here */
    border: 4px solid rgba(0, 150, 100, 0.8);

    border-radius: 4px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* End Resource Color Frame Customizations */

/* Resource Color Frame Customizations */

.fc-event-draggable {

padding-left: 0;

}

.fc-event-draggable .fc-event-time, .fc-event-draggable .fc-event-title {

padding-left: 3px;

}

.fc-event-draggable .fc-event-time {

width: 98%;

overflow: hidden;

}

.fc-event-vert.fc-event-end {

border-bottom-left-radius: 6px;

border-bottom-right-radius: 6px;

}

.fc-event-vert.fc-event-start {

border-top-left-radius: 6px;

border-top-right-radius: 6px;

}

/* Resource Name 1 */

.Beth.Reynolds::before {

position: absolute;

left: 0;

top: 0;

content: ' ';

width: 100%;

height: 100%;

z-index: -1;

background-color: transparent;

/* Modify Border Color and Size here */

border: 4px solid rgba(255, 70, 10, 0.8);

border-radius: 4px;

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

}

/* Resource Name 2 */

.James.Woolsey::before {

position: absolute;

left: 0;

top: 0;

content: ' ';

width: 100%;

height: 100%;

z-index: -1;

background-color: transparent;

/* Modify Border Color and Size here */

border: 4px solid rgba(33, 132, 234, 0.8);

border-radius: 4px;

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

}

/* Resource Name 2 */

.Peter.Samuels::before {

position: absolute;

left: 0;

top: 0;

content: ' ';

width: 100%;

height: 100%;

z-index: -1;

background-color: transparent;

/* Modify Border Color and Size here */

border: 4px solid rgba(0, 150, 100, 0.8);

border-radius: 4px;

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

}

/* End Resource Color Frame Customizations */

That’s it! Big thanks to KC Embrey who worked out the CSS for this mod.

Please get in touch if y have questions about adding colors or styling your calendar. You should be able to understand your calendar at a glance, and we’re here to help.

Plotting Irregular Shapes in FileMaker Maps

Posted on January 20, 2020 by KC Embrey · (Add Comment) · Tagged With: Maps

SeedCode’s ProMaps template comes with support for “neighborhoods” or areas: shapes our users employ to depict things like sales territories or city borders. Usually, these areas are a single, contiguous shape, like the neighborhoods in Seattle shown in red below in a stock copy of ProMaps.

Stock copy of ProMaps showing neighborhood areas in red

But what if an area consists of multiple separated shapes? Much of the time, city, municipal, and congressional boundaries are not just made up of one simple shape, but a set of multiple shapes. Or maybe you want to represent something like national forest boundaries or oil fields as in the examples below:

Oil fields in Indiana; all red areas are one “area” in ProMaps

Zoomed in on oil fields.

It turns out that this can be done with a very small tweak to ProMaps. To do this, we need to first define how to separate the multiple arrays of latitude/longitude pairs for one area. For this example, we’ll stick with formatting similar to JSON. This means each polygon will be wrapped in brackets ( [ ] ), and separated with a comma. When specifying multiple polygons, our object is going to be an array of arrays, so everything will need to be enclosed in brackets to define it as a single array object. Here’s the template for how multi-polygon area data should look:

[[lat,lng
lat,lng],
[lat,lng
lat,lng]]

[[lat,lng

lat,lng],

[lat,lng

lat,lng]]

The next step is to update the “Set Variable [ $sc_areaBorderCoordinates…” script step on line 26 of the “Export Map HTML” script. We’ll update the calculation value with the following:

List (
$sc_areaBorderCoordinates ;
"[\"" &amp;
Substitute ( $sc_AreaDataRecord ; [ "],\n[" ; "%%" ]  ; [ "[" ; "" ] ; [ "]" ; "" ] ; ["%%" ; "\"],[\"" ] ; ["\n" ; "\"¶\"" ])
&amp; "\"]"
)

List (

$sc_areaBorderCoordinates ;

"[\"" &

Substitute ( $sc_AreaDataRecord ; [ "],\n[" ; "%%" ] ; [ "[" ; "" ] ; [ "]" ; "" ] ; ["%%" ; "\"],[\"" ] ; ["\n" ; "\"¶\"" ])

& "\"]"

)

It’s important to note that we’re sticking with ProMaps’ use of return characters to indicate the separation between each lat/long pair. Because of this, it’s vital that you follow the format in the example (no extra line breaks), or the substitute function will result in a malformed object.

With this one script change and formatted data, you’ll be able to see multiple polygons drawn on the map for a single area!

Learn more about the ProMaps template

Resource Scheduling Grid in FileMaker

Posted on December 25, 2019 by seedcode · (Add Comment) · Tagged With: Analytics, Calendar, Resource Scheduling

DayBack’s scheduling grids highlight gaps in your schedule across multiple weeks, so you know if you’re on track or overextended. These multi-week views are designed to be customized, and we’ve recently helped a customer create an exquisite depiction of their workload.

A Customized Scheduling Grid

SeedCode’s Ann Kiser customized this view in collaboration with our customer, Pär-Anders Björklund, from Linjepunkt Repro in Sweden. Linjepunkt offers high-end retouching and image processing services; the grid below shows their current project at the left and their resource allocation for each day.

Customized scheduling grid for Linjepunkt Repro

Based on DayBack’s Built-in Pivot Views

This customization is a compact version of the “pivot views” built into DayBack Calendar. Below you’ll find a couple of screenshots from this stock pivot view. The first has “compression” set to off so that you see all of the text for each event. The second image has compression turned on, so each event only takes up one line.

Built-in pivot view showing trucks as rows and days as columns

Built-in pivot view with compression turned on

In addition to this version, where each column is a day, pivot views are also available at smaller time scales. In those “timed” versions, each column is anywhere between five minutes and one hour.

Note that both of the screens above have calendar analytics turned on. The analytics chart that the bottom of the screen is reporting the value of the net invoice field in each appointment’s record. You’ll see a colored line for the invoiced amounts from the three resources/trucks. The orange dotted line represents a goal of $2,100.00 per day, per truck.

Charting Resource Revenue with Calendar Analytics for FileMaker

Configuring analytics to sum the values in a specific field

While this example uses analytics to track money, you can also use it to track time. Inside SeedCode, we use analytics to budget our time and make sure we’re able to keep our promises to customers. Here’s a short video on how we use analytics to track customizations to DayBack: Schedule Balancing with Calendar Analytics.

Resource scheduling, pivot views, and analytics are all built into DayBack Calendar for FileMaker.

Big thanks to Pär-Anders for letting us share this work!

How We Spend Our Time

Posted on December 13, 2019 by seedcode · (Add Comment) · Tagged With: Making Time

The holidays often occasion a wintry mix of goal setting and castigation. Sometimes we need to change how we work. Other times, we just feel something is missing. Whatever the reasons, the seasonal shame spiral gets real.

Keep your self-improvement projects in perspective with these two posts from dayback.com.

And be kind to yourself this holiday season =)

Time Shame: Plan Your Day Like a Road Trip

Our industry’s focus on productivity can encourage us to be ashamed of how we spend our time. Shame isn’t a signal to cram more into your schedule.

We Can’t See Late: The Consequences of Getting a Late Start are Widely Misunderstood

If projects are frequently running late, it’s often because we can’t recognize projects slipping until the slip is unavoidably large.

Earthquakes, JSON, and Automation in FileMaker Maps

Posted on December 5, 2019 by KC Embrey · (1 Comment) · Tagged With: javascript, Maps

FileMaker can do a lot more with the Google Maps API than just showing pins on the map and creating routes. This mod of SeedCode’s ProMaps template is a great example: it reacts to earthquake alerts. It visualizes the impact zones for seismic events and reports on the affected properties.

Alan Corkhill at Marx Okubo recently had us put together some significant customizations to their copy of ProMaps, integrating data on seismic events (earthquakes) from ShakeAlert. The ultimate result is that, when data on new seismic activity is received, the data is automatically imported into ProMaps, creating a visual representation of the severity waves from the event and which properties are likely to be affected. FileMaker then creates reports for those properties, including images from ProMaps.

Connecting FileMaker, Google Maps, and Seismic Event JSON

This was quite a broad, challenging project, but the end result is fantastic. Here’s a little more detail on how we accomplished this:

Using Jason Young’s example file for integrating Gmail with FileMaker, a server-side script periodically checks a special mailbox for new alerts. The script scans those emails for seismic event details: specifically, for a link to the full details of the event.

We then use that link to download a JSON file with all of the details of the event and parse the data into FileMaker records. Those records contain “zone” data, which includes:

• Latitude and longitude data for points of a polygon (the impact zones)
• A percentage likelihood that properties in that zone will be affected by this event

With this data, we can load the map with a visual representation of each of these zones.

Next, using Google’s JavaScript API, we determine which properties fall within a zone of the seismic event and send that data back to FileMaker for reporting.

The last step in this process is creating the reports: each needs a picture of the property on the map’s satellite view. The trick here is that this all needs to happen on the server, rather than a FileMaker Pro client. How did we make that happen? We used PhantomJSCloud. PhantomJSCloud is a service that renders a page as if you were viewing it in a browser, then takes a screen-shot and sends that back, all with a simple Insert from URL (CURL) command. This allows us to process the seismic event data, render the map, and take the images for the property reports, all using FileMaker server-side scripts.

Here’s the final result for an example property:

This whole solution has been implemented in a series of small deliveries, and now it’s great to see everything come together like this, up and running in Web Direct. Big thanks to, Alan, for letting us share this work!

Learn more about adding ProMaps to your file

ProMaps Custom Icons and Pins

Posted on October 28, 2019 by KC Embrey · (Add Comment) · Tagged With: Maps

Using a different icon and pin colors on your map is a great way to visualize found sets. Fortunately, ProMaps for FileMaker makes it easy to assign different icons based on different values in your fields. Sometimes, though, you may want to create icons and color combinations on the fly.

Brian Ouimette and Jonathan Sherry at Full City Consulting have come up with a great looking icon selector for ProMaps. This allows them to create markers, set a color, then choose between a pin icon or truck icon, and the marker image will be automatically rendered by their scripts.

To make this happen, their FileMaker scripts perform the following steps:

Custom JavaScript code is loaded in a new web viewer
That code is passed preset SVG shape data
The JavaScript code converts that SVG shape data into a PNG based on the selected color
That new PNG image is passed back as a parameter in a FileMaker script using the FMP URL protocol, just like ProMaps and DayBack
The image is then saved into the marker’s container field in ProMaps

While the scripting is a bit complicated, the end result is really easy for schedulers:

Thanks, Brian and Jonathan for putting together this great example!

(For more on creating icons on the fly, checkout using the Google API to generate pins.)

Unicode Emojis in Calendar Events

Posted on October 18, 2019 by KC Embrey · (2 Comments) · Tagged With: Calendar

DayBack Calendar lets you style your events with colors, icons, and custom CSS. This means you can make a visual sense of even an extremely dense and complex schedule.

For example, you can add Font Awesome icons to the summary of any event. While Font Awesome icons are great for many solutions, they look flat and you have to specify their color in the CSS. Some people want fancier looking icons, and Unicode emojis work great for that!

Here’s an example of a calendar where items with a status that starts with “Paused” have a pause icon at the beginning of the summary, and those in a “Done” status have a party emoji icon:

Since these icons are part of the Unicode character set, you can add many of them directly into your event summary calculation using FileMaker’s “Char” function. Others that don’t work in FileMaker can still work in the web viewer calendar by adding a <dbk-css> element and referring to a custom CSS class for the icon.

Instructions on adding Unicode emoji characters to your DayBack solution can be found in the documentation here.

If you’re feeling adventurous, leave a comment showing off your use of fancy icons in your DayBack solution!

Calendar Flags + FileMaker Konferenz

Posted on October 14, 2019 by seedcode · (1 Comment) · Tagged With: Calendar, Resource Scheduling, Sidebar

Here’s a great trick for highlighting a found set in your FileMaker calendar. Gerhard Huber customized his copy of DayBack so that when he clicks on an event, the project for that event shows up in the calendar’s left-hand sidebar. At the same time, he adds a flag icon to every event for the same project so he can see these in the context of all his other projects:

Flags are done by adding event-styles to DayBack Calendar. You’ll find instructions here: event styles.

Gerhard is a serious craftsman who’s made some truly slick mods to DayBack; he is looking forward to showing off his work to anyone who’s interested at the German FileMaker Conference in Hamburg. Find him and say Hi for a private showing in between sessions.

Thanks, Gerhard for sharing your work!

Topics

Productivity & Making Time

DayBack Calendar: what’s new

JavaScript and AngularJS

FileMaker Go best practices

What works – incresing code quality while staying lean

Collected articles on FileMaker SQL
Subscribe to Our Blog via Email

Enter your email address to subscribe to our blog and learn about new posts by email.

Email Address
About

We wanted a place where we could talk about some of the new things we're working on, post screen shots and code, and get some feedback from customers who want to be part of the development process.

This is where we get to talk about what's coming next from SeedCode.
Search

Headline for site

SeedCode: Next

New – DayBack Calendar for FileMaker 19

Reschedule Multiple Events

Do More

Can I Automatically Link Events Together?

Add This to Your DayBack: In-App Update

Color Coding Your FileMaker Calendar by Resource

Add A Second Color to Your Calendar

Plotting Irregular Shapes in FileMaker Maps

Resource Scheduling Grid in FileMaker

A Customized Scheduling Grid

Based on DayBack’s Built-in Pivot Views

How We Spend Our Time

Time Shame: Plan Your Day Like a Road Trip

We Can’t See Late: The Consequences of Getting a Late Start are Widely Misunderstood

Earthquakes, JSON, and Automation in FileMaker Maps

Connecting FileMaker, Google Maps, and Seismic Event JSON

ProMaps Custom Icons and Pins

Unicode Emojis in Calendar Events

Calendar Flags + FileMaker Konferenz

Topics

Subscribe to Our Blog via Email

About

Search

jghfgxhcjvb

Popular Pages

Contact Us

What Works

Need Help?

Stay in the loop

Popular Pages

Need Help?

Headline for site

SeedCode: Next

Do More

Can I Automatically Link Events Together?

Add This to Your DayBack: In-App Update

Add A Second Color to Your Calendar

A Customized Scheduling Grid

Based on DayBack’s Built-in Pivot Views

Time Shame: Plan Your Day Like a Road Trip

We Can’t See Late: The Consequences of Getting a Late Start are Widely Misunderstood

Connecting FileMaker, Google Maps, and Seismic Event JSON

Topics

Subscribe to Our Blog via Email

About

Search

jghfgxhcjvb

Popular Pages

Contact Us

What Works

Need Help?

Stay in the loop

Popular Pages

Need Help?

Download