#fmgo

Please see Responsive FileMaker Design & Web-Viewer Layouts ( the trailer ) for more details, the inspiration, and a screencast video showing how to use the file, etc.

Caveat

There are still some issues that I wish were better dealt with when using these techniques, which is the main reason I never updated my demo file until now. My main frustration is that the protocol can only be used on a given computer in either FileMaker 12 *OR* 13, not both. So if your computer is set to use the FMP URL protocol with FileMaker 13 and you try to use an FMP URL in a database open in FileMaker 12 (or vice versa), it won't work. It may try to open 13, but won't have the context from which it was initially run. For Mac users, there is a downloadable preference pane that can be used to select the default application for the FMP URL, although this doesn't remove the problem of 12 *or* 13. This problem also exists on Windows. I haven't tested this, but maybe it can do something similar. Either way, it's a real drag that we can't just trust that a solution we build using Web Viewers and the FMP URL will work for all users -- without the possibility that they may need to download & configure something just in order for it to work.</rant>

Demo = (a) Web Viewer interaction + (b) "Responsive"

As a brief review, there are two main components to this demo file:

It uses a Web Viewer, the FMP URL protocol and JavaScript to read from and push to the underlying FileMaker fields.

The layouts are "responsive"—using techniques from "Responsive Web Design"—which means a single layout adapts to screen sizes from iPhone (FMGo) to desktop.

These two components don't need to go together, but it was really the "responsive" part that pushed me to experiment with all this in the first place.  However, since the FMP URL is the thing that's changed with 13.0v2, that's what I'm focusing on in this post.

Overview  (fmp:// URL, called by JavaScript, on Responsive "Web-Viewer Layouts")

The data-entry layouts contain only a Web Viewer.  The web viewer uses a Data URL that inserts the relevant field contents into <input> elements within an HTML <form> element (like a form you'd fill out on a website). As you navigate through the records, the Web Viewer is updated with the data of each record.

When you submit a change to the data — either via the Submit button or by hitting Return/Enter on a regular keyboard or touching "Go" on the iOS keyboard — JavaScript sends the contents of all fields, along with their respective field names, as a single parameter to an FMP URL that then calls a "PerformEdit" FileMaker script on that record. This FileMaker script in turn parses the parameter into name-value pairs (field name & field value) and then uses the Set Field By Name script step to update the record.

The JavaScript

NOTE: You do not need to understand or modify this JavaScript in order to incorporate these techniques into your database.

$('form').submit(function(){ var str = $('form').serialize(); var encStr = encodeURIComponent(str); var replStr = encStr.replace(/%3D/g,':::').replace(/%26/g,'|||'); $(this).attr('action', '" & FilePath_cf & "?script=PerformEdit&param=' + replStr ); });

Basically, when the form is submitted this grabs all of the field names and field contents and places them into one text string. It then encodes that string to be "URL-safe" and then replaces the specific "=" and "&" characters that define the key-value pairs in that encoded string with other text strings to make things easier on the FileMaker side

Here are the three versions of the string before it gets sent to FileMaker as the fmp:// parameter:

1) As captured via the jQuery serialize() method [ var str ] :

NameFirst=Jane&NameLast=Doe&Company=Doe+%26+Doe&Address=123+Main+St.&City=San+Francisco&County=&State=CA&ZIP=&Phone=(415)+555-1212&Fax=&Email=jane%40doedoe.com&Web=jsfmp.com

2) Having passed through the JavaScript encodeURIComponent() function [ var encStr ] :

NameFirst%3DJane%26NameLast%3DDoe%26Company%3DDoe%2B%2526%2BDoe%26Address%3D123%2BMain%2BSt.%26City%3DSan%2BFrancisco%26County%3D%26State%3DCA%26ZIP%3D%26Phone%3D(415)%2B555-1212%26Fax%3D%26Email%3Djane%2540doedoe.com%26Web%3Djsfmp.com

3) And then swapping some strings via the JavaScript replace() method [ var replStr ] :

NameFirst:::Jane|||NameLast:::Doe|||Company:::Doe%2B%2526%2BDoe|||Address:::123%2BMain%2BSt.|||City:::San%2BFrancisco|||County:::|||State:::CA|||ZIP:::|||Phone:::(415)%2B555-1212|||Fax:::|||Email:::jane%2540doedoe.com|||Web:::jsfmp.com

You can see in this last iteration, the ampersand character that divides the key-value pairs (as seen in the initial version of the string) has been replaced with "|||", yet the ampersand entered in the Company field, "Doe & Doe", retains its standard URLencoded string "%2526".

The FileMaker Script

The FileMaker script first decodes the JavaScript-encoded string (step 2, above) via a custom function.  It then replaces all occurrences of "|||" (step 3) with pilcrows (¶) so that the one long text string becomes a list of key-value pairs, with the field name and the field value separated by the ":::" string.  The script then just loops through all these pairs, and uses the Set Field By Name script step to update all fields:

Set Variable [ $vals; Value:Substitute ( URLDecode_cf ( Get ( ScriptParameter ) ) ; "|||" ; "¶" ) ] Set Variable [ $fieldCount; Value:ValueCount($vals) ] Set Variable [ $i; Value:1 ] Set Variable [ $error; Value:0 ] Set Error Capture [ On ] Loop Exit Loop If [ $i > $fieldCount ] Set Variable [ $parseKeyValuePair; Value: Let ( [ _row = GetValue ( $vals ; $i ) ; _pos = Position ( _row ; ":::" ; 1 ; 1 ) ; $fieldName = Get( LayoutTableName ) & "::" & Left ( _row ; _pos - 1 ) ; $fieldValue = Substitute ( Middle ( _row ; _pos + 3 ; 9999 ) ; "+" ; " " ) ] ; "" ) ] Set Field By Name [ $fieldName; $fieldValue ] If [ Get ( LastError ) <> 0 ] Set Variable [ $error; Value:Get ( LastError ) ] Exit Loop If [ 1 ] End If Set Variable [ $i; Value:$i + 1 ] End Loop If [ not $error ] Commit Records/Requests End If Exit Script [ Result: $error ]

Using the demo;  Incorporating with your own data

The demo contains two separate layouts that both interact with the FileMaker data as described above:

A generic template layout, named "SomeLayout", which any FileMaker user should be able to modify and use with their own data.  As demonstrated in the video on the original post, you only need to place the relevant fields onto a standard FileMaker layout (with the appropriate naming convention; in this demo it's "SomeLayout_fields") and the Web-Viewer layout will place all those fields automatically into the web form.

A "customized" layout which uses significantly more complex CSS, JavaScript and some HTML5 — to give an example of what could be possible for developers with more web development skills.

Both layouts are Responsive. And with rumors of a larger screen coming with the iPhone 6, this could be another good reason to use these techniques over separate layouts for each device/window size…

Download the Demo File

This is the same file from my original post; cleaned up a bit, unlocked, and still happily not perfect :)  

In fact, navigating records natively in FMGo13 now looks very odd in the "Customized" layout because of the slide effect — so I'd probably remove the Status Bar on a production file like this for FMGo.  Also,  Internet Explorer 9 does not support columns in CSS so on Windows with IE9, the template layout is always just one column. There are other options if you need to support IE9.

Get it zipped (.zip) or unzipped (.fmp12) (for FMGo)

And remember to check out my original post to see more of how to use this file.

Other possibilities…

There are a number of additional advantages to using "Web-Viewer layouts".  Because the whole interface is essentially a web page, you could incorporate almost any web technologies into a Filemaker interface. Pretty much anything you've seen on the Web (specifically in Safari &/or Internet Explorer, since those are what run FM Web Viewers) could be brought into FileMaker.  Think of user-friendly web forms with instant field-validation, hints, "masks" that only allow the input of certain characters (e.g. "(___) ___-____" for U.S.-type phone numbers, in which typing a letter character won't even display), etc.

Also, because the styling of the layout is done via CSS in a text field, you could potentially open up modification of layouts to anyone with edit-access, including in FileMaker Go!

FileMaker 13 has brought in some great new web-like UI features such as hiding elements, popovers and slide controls, but there's still plenty in the world of web design that can only be implemented in FileMaker via Web Viewers.  And now since 13.0v2, there's very little reason (see Caveat, above) not to start implementing them now.

*Other FMP URL examples: http://www.filemakerbloggen.se/post/a-clickable-map http://www.isolutions-inc.com/?p=1727 http://www.soliantconsulting.com/blog/2014/04/getting-started-javascript-and-filemaker http://www.seedcode.com/filemaker-webviewer-javascript-calculation-engine  & my "A web-like UI for DevCon2Go (2013)" from last year's DevCon

Please add additional examples or resources in the comments.

33-second screencast video

Note: This file uses the official DevCon2Go as the "data file", so you need to FIRST have a copy of DevCon2Go. In FileMaker Go, the files can be locally stored on your device. In FileMaker Pro, full functionality requires the files to be hosted (FMServer or peer-to-peer). Unfortunately, the CSS in the Web Viewer doesn't seem to render correctly in Windows, even though the same HTML & CSS loads fine directly in IE 9.

Instructions for download & use:

   1) If you haven't already, download FileMaker's DevCon2Go13    2) Whether or not you've just downloaded it, open DevCon2Go13 and let it run its automatic updates    3) Close DevCon2Go13    4) Download DevCon2Go13_WebUI (v1.2)   (oddly not downloading in desktop Safari (?!) )    5) If you're in FileMaker Pro (not Go), make sure DevCon2Go13_WebUI is in the same folder as DevCon2Go13    6) Open DevCon2Go13_WebUI and give it whirl    Note: If the file ever stalls during later use, try opening DevCon2Go again & letting it run its updates

Things to try:

   • Navigate thru records (native FileMaker)    • Tap/click: circle " i " by speaker; "1 more by <speaker>", "Objectives", etc    • Enter Session Notes    • "list" & "menu" buttons    • "List by Speaker" (in the menu), viewing sessions under each speaker    • Multi-criteria finds (e.g. all Design track sessions on Tuesday)    • Different devices and/or change the window width in FMP (even if unhosted)

Things to notice  (a.k.a. Benefits for both the user & the developer):

   • Only one (ONE!) layout for all devices (FMGo iPhone, FMGo iPad & FMPro)    • No hiding of information for people using iPhone/iPod (e.g. list views)    • All edits (Session Notes & Favorites) are set in DevCon2Go (this is just a UI 'shell')    • No switching back and forth between layouts with relevant data (objectives, notes, etc.)    • No changing of found set to view sessions by one speaker    • Ability to select & copy any text    • Increased accessibility in FMPro, with ability to "Speak" text & to increase font size (without need for horizontal scrolling)    • "Recorded" icon is pure CSS3, significantly smaller than multiple instances of a base64 image in a list view

Caveats/Confessions:

   • Since I have no access to your copy of the "data file" (DevCon2Go), I've had to "cheat" a bit — such as placing Base64 images inside the "UI file" (DevCon2Go_WebUI)    • I've scrambled to put this together around my work & before DevCon (please don't tell my clients, especially my best-est client who'll be here at DevCon ;) so I've cobbled together some code from various places without having the chance to clean up or optimize the code as much as I'd like… so this doesn't run as fast as it could :(    • I've tried to stay mostly loyal to DevCon2Go's design (greys & screen layout) & focus primarily on enhancing experience within that design (e.g. show/hide details)    • As I've strived for, this does function on older devices and iOS5, but it runs more slowly & clunky. Newer devices and iOS6 are significantly smoother    • I've pushed some of the design more than perhaps I think best, but I wanted to see how these technologies would perform in a real-world file, and to show some of the possibilities of using these techniques    • I copied/pasted Favorites script from DevCon2Go, but because I didn't include the Utility table in my relationship graph, there's no link to your iCal    • Although this file is pretty complex and uses quite a bit of custom CSS & jQuery, I believe simpler files—&/or the "template" idea in my previous post—could be available to FileMaker developers without the web experience.

Potential Enhancements:

Besides optimizing the code to make this run faster, some ideas I've had:    • "Sort by…" drop-down to create sub-summary-like lists when sorted by Task, by Level, etc.    • Different color schemes, selectable by user    • Layouts displaying HTML &/or CSS so the whole app could be modified even in FMGo    • Maintain user "preferences" for things like: "Always Display Objectives" or "One-column layout for iPad portrait view"…    • Default to current day's sessions during DevCon

So… Whaddya think?

What parts work using these techniques? What parts don't? Can you think of situations that might be better suited? Can you make this better? (please do!)

I'd love to hear your thoughts in the comments (below).

The Intention (& the reality): I do intend to clean up my demo file and put together a clear, descriptive blog post(s), but being realistic—knowing myself and my current workload—it's going to be a while before I can get to that :-P  But I figured that I could at least share the slides I made on my way up to Portland and a screencast video similar to what I showed in room 400 :-)

The Status: This is a work in progress, proof of concept, etc., but based on my discussions at Pause after my demo, it seems there could be a number of good uses for these techniques, not only in FMGo but in FMPro as well.

The Stuff:

The slides

The screencast*

*the errata: at 1:18, I mean "portrait" even though I say "landscape" at 5:52, I mean "whatever you name this layout" more than "whatever you call this" at 6:30, I mean "arrow keys" even though I say "cursor" 

The Future: As much as I'd like to continue exploring all the possibilities with this, I've got to focus on my client projects now… but I will come back to this.  Come find me at DevCon and see what I've done by then.  And show me what you've come up with as well!

The Question: Can you think of real uses for these techniques?  Could this be a practical interface for some FileMaker (Pro &/or Go) functionality?  Feel free to leave your thoughts and ideas in the comments below.

The UPDATE  (Aug. 6, 2013): I've created a downloadable file using these techniques and blogged about it here.  It's a UI file for FileMaker's "DevCon2Go" file.