SeedCode Complete 13

Our newest version of SeedCode Complete has been out for about 3 months and we’ve now had an opportunity to see how people are using and modifying it for themselves and their customers. Happily, one of our customers’ favorite design patterns is the one I’m personally the proudest of: we think of them as “Cards”. It’s essentially an updated take on the Selection Portal or Master Detail design patterns you may have seen. However, the new UI elements introduced in FileMaker 13 (Pop-Overs and Sliders), combined with the new Selector-Connector data model, really make Cards shine in Complete.

The Contact Card

In designing Complete We wanted to make the design patterns consistent throughout the entire solution. For example, when looking at a Contact–whether on the Contact layout or as a related contact on another layout–we wanted that presentation to be the same.  The pattern we established in the main Contact layout would therefore be replicated throughout the solution so users could always recognize the interface for “Contacts”. Before FileMaker 13, this would be a challenge because there would typically not be enough real estate to show detailed Contact information in other contexts–on a Project layout, for example–without intruding on the Project information or seeming out of place. With 13, pop-overs and slide panels give us a lot more flexibility.

For the Contact layout we now display the basic information of the Contact with their thumbnail. We then use pop-overs as an easy to drill down to more information like additional e-mails, etc. Since we use a modal edit mode, all these fields are clickable, resulting in the appropriate action, e.g. open address in Google Maps in browser, open e-mail with selected address, etc.

This upper left section of the Contact layout, shown in red above, now becomes the “Contact Card.” When looking at related contacts, our original thought would be to access these Cards with Pop-Overs, however, we wanted the additional e-mails, etc. to be included and you can’t put a pop-over in another pop-over! After some experimenting we came up with the pattern of “sliding” to the card using a slide panel. This actually turned out better than the pop-over, particularly on OSX and iOS where we have animation making this feel like a modern mobile app. You click on the portal, and the whole portal slides to reveal the detail of the clicked row, very much like clicking on a Contact in iOS.

So now the user can “slide” to a Project Contact, access a summary of their information, send them an e-mail, or look up their address. If more Contact information is needed, or an edit needs to be made, then one more click takes you to the actual Contact record. It really smooths out the users’ navigation experience to have the Card as an intermediary between the current layout and the related records anchor layout.

The Selector-Connector Pattern

As pleased as we are about the Card design, we’re even more pleased about the way it was implemented. By using the Selector-Connector model, the Cards are all in the same context, so we can literally paste them from layout to layout and not have to change their fields to work in the new context. When we slide to a card, all we need to do is to set the Global Contact ID in the Selector table occurrence. If our “Card’s” fields all reference the SelectedContact table occurrence then they will work from any of our anchor layouts! This means when our customers need to add a Contact Card to a layout, they can copy it from any other instance of the card, and if the new layout is set up with the Selector-Connector pattern, they can paste the Card layout objects in without modification.

For more on the Selector-Connector model check out our original article as well as this post from our friend and colleague Todd Geist.

Best of Both Worlds

It can be challenging to build something that gives the user a great experience, while making that same pattern easy for developers to carry into their own additions to SeedCode Complete. We love this Card pattern and probably would have implemented it even without Selector-Connector, but being able to provide it AND make it easy to work with has been very gratifying!

We’ve recently seen some great examples of modding multi-point Google Maps in FileMaker Layouts. Here are two very slick mods based on our ProMaps template…

Filtering (and Color Coding) Based on Found Sets.

This first mod was done by Lisette Wilson of Informing Designs; she’s linked ProMaps to SeedCode Calendar so that the contents of the map change as users navigate the calendar. That alone is pretty cool, but she’s also letting users change the way the appointments on the map are color coded. In the first screenshot they’re color coding by the customer’s tank capacity:

While in this one they’re color coding by the day of the week the appointment is scheduled for. This lets users scan their map for appointments that are physically close to each other but aren’t scheduled for the same day:

Note that the pins also have the trick number assigned to that job (or “U” if a truck hasn’t been assigned yet). Lisette is using the Google Charts API to create those pins on the fly since there could be any combination of pin color and truck number. Very cool trick.

For more information about this kind of deep integration between maps and calendars, and other interesting mapping mods, please get in touch with Lisette.

Creating a Found Set by Circling Pins on the Map

The mod below was done by David McCulloch and represents a really cool workflow. He looks at his customers on the map–having filtered them down by zone and account type–and then draws a polygon around the ones he’s interested in. His scripts then gather the selected pins into a found set to which he assigns a sales rep and a date to visit them (in step “3” of the screenshot below).

While we added the polygon thing to ProMaps for him, David did the rest of the scripting here and has embedded little maps like this all over his solution to help his users keep their customers in context. Really nice work.

If you’re interested in adding drawing tools like this to the multi-point Google maps in ProMaps for FileMaker, please let us know.

More Inspiration: Beautiful Icons for your Maps

If  you’re building your own maps, or making your own mods to our ProMaps template, you’ll want to check out these map icons from http://mapicons.nicolasmollet.com. Nicolas Mollet has been maintaining a great resource of free map icons but his site is currently down for maintenance (?). We hope it comes back soon but you can see the kinds of icons he offers in another one of our customers mods here. Enjoy!

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.

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