Adding a FileMaker Portal next to DayBack’s WebViewer

Recently Arie Covrigaru of PlanOmatic ( http://planomatic.com ) hired us to add some custom features to his DayBack calendar.

His main request was to be able to filter the calendar by resource(s) by selecting from a searchable, scrolling list. And he wanted that in the main calendar window, beside his calendar, not in the “advanced filters” popup window where this is usually done. The solution was to nudge the webviewer object 300 pixels to the right to make room for a tab-control object with a filtered portal on each tab.

Arie’s resources are photographers, and each is associated with a “service area” (geographical location). The first tab in the side bar shows all the service areas, with a “search” field at the top to filter the portal. To filter the calendar by one or more resources, you can manually select them from the “Photogs” list, or you can click on a service area to select all photographers in that service area.

The custom sidebar has been styled to match the stock DayBack webviewer sidebar, which is hidden by default. The “Delivery” tab behaves the same as the “Status Filters” tab on the stock sidebar.

Arie loves it! If you’re interested in mods like this, get in touch or purchase one of our implementation packages.

Overview

The Selector-Connector is a data model for organizing your FileMaker table occurrence graph. It is something we’ve been loosely collaborating on with our friend and colleague Todd Geist. I say loosely, because during the evolution of the model, we never really reviewed each others work, but talked in very general terms about our progress. The fact that we ended up with something so functionally similar makes me think that we’re actually onto something! Todd has a great post and video on his approach here.

We’re also using Selector-Connector as the data model for the new  SeedCode Complete and it is one of the primary reasons we feel Complete is working so well; seeing how Selector-Connector is letting folks extend and modify Complete also tells us this approach is being validated.

The most important thing to me about the Selector-Connector model is that the techniques themselves are not new new at all. It uses powerful, native techniques that have been around since FileMaker 7–like global keys and cross-joins–but it organizes them as a pattern that we can describe, much like we can describe the Anchor-Buoy pattern.

FileMaker Data Models: Extending Anchor-Buoy

The Selector-Connector should be seen as an extension of the currently predominant data model, Anchor-Buoy. Anchor-Buoy is arguably the most widely adopted FileMaker standard in the development community, and there are two very good reasons for that.

  1. It organizes the graph very clearly with a small set of rules
  2. It has a great name that is very visually descriptive.

We want to make sure we don’t lose either of those things  if we’re going to tinker with the model. In general terms, Selector-Connector keeps the current Anchor-Buoy model but builds “on top of it.” We’re just going to “bend” its rules a little bit.

A very basic interpretation of the Anchor-Buoy rules would be:

  1. All layouts must reference Anchor Table Occurrences
  2. Interacting with Buoys is only done from the context of their Anchor
  3. Anchor Table Occurrences cannot be related to each other.

By sticking to these rules, the Anchor-Buoy model forces us to be aware of context and it also limits the chance of us doing an operation out of context, like picking the wrong table occurrence for a portal; very important things in FileMaker and generally these benefits have outweighed the draw-backs of Anchor-Buoy, and that’s why it’s the standard.

The Pop-Over Cometh

As I mentioned above, there’s nothing technically new to the Selector-Connector model. So what changed to start us down this road? For me, it was the introduction of the Pop-Over in FileMaker 13. Here was a great new object that would be a light weight alternative to pop-up windows and dialogs. Read Full Article →

ProMaps, our Google Maps add-on for FileMaker, lets you use filters to constrain which locations show up in the map.

But sometimes you want to go beyond filters and show the results of an ad hoc find request. Using the new List Of function in FileMaker 13 this is now a simple mod and we’ve written up instructions to add this to your copy of ProMaps.

Learn more about ProMaps and checkout some movies of it in action here: ProMaps for FileMaker

 


This is the beginning of a new, open source project to create a lightweight wrapper for FileMaker Custom Web Publishing designed for use in JavaScript applications.

Background: DayBack

The release of DayBack for FileMaker last month has started a very exciting time for us here at SeedCode! Bringing the Calendar to a new code base and seeing it successfully deployed in the real world has been nothing short of thrilling. We’ve recently added mobile support and are looking forward to the future enhancements of DayBack for Pro and Go.

However, now that we have this great JavaScript code base, it’s time to get going on DayBack for the browser, and starting with FileMaker Server as our first data source is the logical next step.

Assumptions

One of the goals for DayBack is to do as much of the data work as we can in JavaScript. This is based on two big assumptions, and seeing how these bare out will be an interesting part of this project:

  1. FileMaker Server is a powerful tool, and it can do a lot. However, this ability to multi-task tends to lead to deployments where it’s simply trying to do too much. On the web publishing side things like portals on target layouts, server side scripting, huge data sets, etc. often put a considerable load on the server. Can we architect DayBack to do this kind of work in the browser and therefore put a lighter load on our FileMaker Server?
  2. Supporting server side processes requires a different level and type of support than client side ones.  This is not just the case for FileMaker Server, but any server based application.  Supporting the server often requires working on a specific machine with specific issues that extend well beyond your app, web servers, permissions, program versions, etc. can all affect how things run.  By minimizing our server side footprint we hope to minimize the need for this kind of support.

fmxj.js

With these assumption in mind we’ve built a preliminary JavaScript library for building and posting queries to FileMaker Server and converting the results to JavaScript objects in a JSON format.  We have some working demos here.  We’ve also decided to make this part of the project open source (MIT License), so you can download (or fork) the library and demos from GitHub for free!

fmxj.js - working examples

fmxj.js – working examples

Here is what fmxj lets you accomplish:

    • Build complex queries and perform HTTP POSTs to your FileMaker Server.
    • Return FileMaker parent and child records as JavaScript Objects/JSON.
    • Create, edit and delete FileMaker records with JavaScript objects.
    • Filter and sort Javascript objects locally with complex criteria.
    • Query strings are created from JavaScript Objects and then sent as an HTTP POST to FileMaker’s XML Web Publishing Engine. An XML FMPXMLRESULT is returned and converted into JavaScript Objects/JSON by fmxj.
    • HTTP POSTS can be done directly to the FileMaker Server’s XML WPE or a simple PHP relay can be used to get around cross-domain issues and provide more authentication options.

As always, we love to take any opportunity we have to share our code, and I’m personally looking forward to keeping you posted on our progress.

Cheers!


Travis Spangle has posted a great example file showing Sudoku in FileMaker. It includes a couple example screens for those of us who didn’t grow up playing Brain Age (guilty).

Sudoku2

Download the unlocked file here: filemaker-sudoku.

Thanks for this, Travis!

Travis is a member of FileMaker Seattle where he’s also presented some great stuff comparing the speed trade-off of different architectures in his reporting solutions. If you’re in Seattle, our next meeting is this Tuesday where Cosma from torquedb.com will be speaking about deployment options on Amazon Web Services. Feel free to stop in.

Coming full circle with JavaScript and SQLexplorer

Having the opportunity to work on a project like SQLExplorer UROBOROS ouroboros_knot_240has been a highpoint in my FileMaker career. It was a great way to participate in the collective learning of the ExecuteSQL function by the community when it first hit the scene. But, it’s also been a great way to get a handle on the increasingly popular interaction of FileMaker Pro and JavaScript.

The Idea: JavaScript Portals for FileMaker

SQLexplorer has always displayed your query results in a “JavaScript Portal” in a web viewer , and this was born from a pretty simple requirement. Since you can choose different columns for your SQL query, having pre-formatted fields in a traditional portal often didn’t “look right.” We thought that with a “simple” JavaScript grid we’d be able to dynamically set column widths as well as apply some basic formatting, i.e. text floats left and numbers float right. We settled on using jQuery and the jQGrid plug-in for this. They’re  easy to set up, and being able to use Theme Roller provided us an easy way to keep the “portal”‘s theme matching the layout’s theme. With this, we were able to get a great looking grid that not only met are original requirements, but also had some great additional features that came with the jQGrid plug-in; notably, column sorting, changing the column order via drag and drop and a filtering tool. The end result ended up very polished, and to our great delight, several developers have re-engineered this technique for their own solutions. Read Full Article →

FileMaker’s WebDirect offers some exciting deployment opportunities. However, not being able to create PDFs or print like we can with Pro and Go is a big limitation. For many of us, an invoice may exist in a database, but until it’s represented as a printable document, it’s just not a real invoice. Finding a solution to this for the new SeedCode Complete was a high priority for us.

We looked at some plug-ins out there that allow FileMaker Server to generate PDFs: MonkeyBread and 360Works’ Scribe are two that come to mind. These work fine, but Filemaker Server is headless; this means it can’t read layouts like the client can as far as object positions, etc. so these PDFs made by these plugins can’t be based on FileMaker layouts like we’re used to doing in Pro. We’d need to have the server use templates independent from FileMaker layouts to create these PDFs.

Our friend and colleague John Renfrew has been doing some very impressive work bridging this gap between server PDF generation and FileMaker layouts. We’re looking forward to the final results of his work here, set to be released early 2015 as we think basing PDFs on FileMaker layouts is an important part of the platform for all deployments.

For SeedCode Complete, we’re recommending that folks go with the tried and true approach of setting up robot station of FileMaker Pro to generate the PDFs for the WebDirect clients. In the past we could have done this with a plug-in or have the station run on a continuous loop looking for PDF requests coming from WebDirect clients and generating them as needed, but this year at DevCon (2014) we learned of a great technique from the folks at ClickWorks, so the robot client can do this natively with no continuous loops. The general idea is that by deleting a record (something I can do from WebDirect), I will change a found set on another client’s machine, which in turn causes the OnRecordLoad script trigger to fire! Basically I can trigger a script on another client natively. Here’s the ClickWorks blog post on this really clever technique.!

And here’s a video of the SeedCode Complete PDF Robot in action.

 

 

The new version of SeedCode Complete is almost here. This is the platform we use to start new projects and this new version lets us share a lot of what we’ve learned about FileMaker 13, about WebDirect, and about making solutions that are easy to maintain.

If you’re new to Complete, this unlocked template links contacts to projects, invoices, and activity on the calendar. Added to that in this version is purchasing, inventory, and shipments. We’ve wired up the tough stuff: you add the specifics for your business. Checkout the current version of Complete here.

Our Approach: designing with constraints

We’d been working on this new version of Complete for a while and at some point Jason was inspired to ask, “What if WebDirect were the only platform for FileMaker?” “How would we design things differently?” He thought about that for a while…and then he started over as if that were the premise. I think it was kind of an experiment at first, but he stuck with it and a lot of good stuff fell out of working with that kind of constraint. The SeedCode Complete we’re previewing today is a result of that change in direction.

What if WebDirect were the only platform for FileMaker?

Some of the things that came out of this are Selector Connector: this new way of managing the graph that focusses on simplicity and portability. We’ve also had to be very sensitive to the number of layout objects that are in WebDirect, lest the layouts bog down, so the layouts that are in SeedCode Complete are very simple: they don’t have a lot of stacked objects on them. We’ve taken great care to make them look elegant, but there aren’t a lot of objects a developer needs to wade through. (You’ll see some more of Complete in layout mode at the end of the video below.)

Contacts in Layout Mode

Contacts in Layout Mode

That means you end up with layouts that are a lot easier to modify–and that’s the whole point of Complete: giving folks a platform that’s both powerful and easy to work with.

One of the biggest things that came out of this is that Complete is so fast. You work so hard to make something perform well in WebDirect, you end up with an app that performs really well in FileMaker Pro. And of course we worked with a big sample data set in there while we were building so any speed issues showed up right away.

This is not only a platform for us to use for our own projects–and a platform for our customers to use as they’re starting new solutions–it’s an opportunity for us to share all the stuff we’ve learned since we’ve started digging into FileMaker 13 and WebDirect. Things we’ve learned about animations and how to get them smooth across all platforms, things about speed and slimming down layouts. We’re really looking forward to sharing all this more widely, in a format developers can really take advantage of.

A Preview

Here are a few screenshots, followed by a video of how this all feels in action:

 

Look for the new version some time in the next few weeks: it will be on sale through year end.

Reading The Soul of a New Machine,  Kidder 1981. Describing work on the Data General MV/8000 in 1979.

Alsing [lead architect] thought that even under the best circumstances, several kinds of fear attend a debugging. One was the fear of “The Big Mistake”, the one that would be discovered late in the game and would require a major redesign–and with it perhaps a fatal delay. There was “the flakey fear”: that they’d designed [the machine] and were debugging it in such a way that it would never be reliable or easy to build in large numbers. [They] had that one fairly well in hand. But there was also “the bogeyman fear”. “Just something dark and nameless,” said Alsing, “that the machine just won’t ever work.” “It’s the infinite page fault you didn’t anticipate. The bogeyman is the space your mind can’t comprehend.”

fear

 

Sounds very contemporary for an industry that’s supposed to have changed so radically in the last 30 years. Reminds me that many of the problems of software production identified in the 60’s continue to be the problems we wrestle with today. So maybe we should own up to the enormity of what we’re working on and beat ourselves up just a little less.

The Soul of a New Machine

Love this little demo we put together for FileMaker DevCon 2009. A customer recently asked about this and I thought folks might like to see it. The demo shows how to create a grid of buttons without having to use different script parameters on all the different buttons. It’s also a tidy example of scripts used in drag and drop.

Enjoy!

CellDownload “Drag & Drop Example File: Airplane Seating Demo” from www.seedcode.com/downloads

Oh, and check out that cell phone icon on About / Contact Us… it was 2009, LOL.

 

DOWNLOAD
DayBack Calendar
Download DayBack and we'll send you a couple short emails with tips on how to modify it and use some of the little known features.
Thank you! Please download: DayBack Calendar
Want More?
Be the first to see articles and tips like these
Need More?
SeedCode tips & example files in your inbox
Need More?
SeedCode tips & example files in your inbox
Want More?
Be the first to see articles and tips like these