Design Patterns: “Cards” in SeedCode Complete

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!

Featured Posts

Follow Along

Stay up to date with the latest news & examples from SeedCode

2 Comments

  • I love your product and I am saving up to purchase it for my company. I am also so glad to hear that it has been updated for 13. I can’t wait to purchase it!

    Drooling,
    Aric Hoek
    Professional Photographer

  • I’m excited by this design, as well, both for keeping the focus where needed and for the modularity. Navigation is much simpler and expansion is easier, as well. Thanks for the good work.

Leave a Reply

Your email address will not be published. Required fields are marked *

Check out some of our other posts ...

Suggesting Appointment Slots

Show Available Slots that Match Multiple Criteria Schedulers often look for gaps in their schedules to find the open resources for each opportunity. But sometimes,

Introducing Draft Settings Mode

Following up on this idea that people stretch themselves when they feel a little safer, we’ve been very focused on the customization experience for DayBack

New Longer Timescales for DayBack

Resource Scheduling Swimlanes You can now extend the pivoted scheduling view in DayBack to show items by week instead of solely by day. This lets

FileMaker Summer Camp – Recap

Unconference Sessions If you missed Pause in October, here’s a look at the sessions that attendees hosted. All the sessions are listed in this post

COMPANY

FOLLOW ALONG

Stay up to date with the latest news & examples from SeedCode

© 2024 SeedCode, Inc.