• FileMaker® Pro Tip-n-Trick •

FileMaker Master-Detail in a Web Viewer

By: RJ Carroll

* This has been tested on FileMaker Pro 14-16

FileMaker Master-Detail views are a great way to minimize the number of separate layouts and also provide users with the best of both worlds when it comes to viewing their data as a hybrid of FileMaker Pro’s native “List” and “Form” views. A Master-Detail interface is also naturally intuitive to users familiar with side navigation panels that are commonplace across the web. Given their popularity with users, developers have long sought a simple, flexible way to implement master-detail views in custom apps.

The Old Masters

Originally, to create a Master-Detail view, the common approach was to add a second table occurrence for the table that the current layout is based on with the relationship defined as a Cartesian (“X”) join. This setup requires placing a portal to the new TO on the layout to serve as the “master” list, then attaching a Go To Related Record step to a button or field in the portal row. Because this basic approach can quickly become hard to manage in larger solutions with a lot of tables, a more popular method has been to use some type of a virtual list. (An implementation of a virtual list master-detail is the approach is that’s used in the Master Detail 2.0 module available on Modular FileMaker.) But what if you just want a Master-Detail without adding lots of extra tables, fields, and sets of scripts to your app?

Visualizing The “List Of”

One way to create FileMaker Master-Detail views everywhere with minimal overhead is to harness the power of a “List Of” summary. We’ve found a lot of magical uses of FileMaker Pro’s “List Of” summary field since it was introduced in FileMaker Pro 13. “List Of” summaries possess two key features that make them useful in setting up a new, super-fast type of Master-Detail view: (1) You have access from the current record to all the data for the entire found set and (2) the data is in the same sort order as the found set. So, just by creating a summary list of names, and placing that field on a layout, you already have a type of native master-detail view. It’s just not very useful for navigation. At least not yet…

Nobody Does Lists Like HTML

HTML lists have probably been around forever. They were definitely around when I learned HTML back in the 90’s, and they still work the same way. The cool thing about an HTML list item is that, unlike a portal row, it doesn’t care how much vertical space it takes up. Another cool thing about an HTML list item is that it–and this may be shocking–can be a link. Thanks to the specifications of FMP URI scheme, it can even be a link to the very FileMaker database you’re currently using. So this gives you immense power to create a Master-Detail view composed of only four easy steps:

  1. Create a stored calculation field that wraps some meaningful text from the record, along with the record number or primary key in HTML <li> and <a> tags that contain an fmp:// link back to the target record in FileMaker.
  2. Define a “List Of” summary of that field to show all the HTML elements in the found set.
  3. Place a web viewer on the layout that references the summary field and contains a little opening and closing HTML.
  4. Write a script to accept the parameter passed back to FileMaker when you click the link and navigate to the appropriate record.

That’s really all there is to it. Depending on how you setup your solution, the web viewer layout object, calculation and summary fields can literally be pasted into any part of your app without any modifications at all. If you want to get fancier and more creative, this FileMaker Master-Detail technique can also be expanded to harness CSS styling, sub-summary headers, images or anything else your web skills allow. Check out this implementation by downloading our demo file. It shouldn’t be hard to master the details in no time at all.

• Download the demo file and give it a view! •

FileMaker Master-Detail in a Web Viewer

** PLEASE NOTE: A new security feature in FileMaker Pro 16 requires you to expressly enable execution of web scripting. Make sure this has been enabled as shown below.

** UPDATE 6/1/2017: Several readers pointed out an issue that prevented this tip file from working properly in FileMaker Pro 14. Doug West found the technical reason for this, which involved a change between how the Web Viewer processes data URIs differently between version 14 and 15; specifically, the MIME type must be added to the start of the Web Viewer source in 14, but not in 15. I applied a patch to the attached file by adding “data:text/html,” to the start of the Web Viewer calculation and verified that it now works in FileMaker 14. The patched file (Build x06) replaces the previous version and is now available on this post.

FileMaker Pro 16 Privilege settings


***This article is provided for free and as-is, use, enjoy, learn, and experiment at your own risk – but have fun! eXcelisys does not offer any free support or free assistance with any of the contents of this blog post. If you would like our help or assistance, please consider retaining eXcelisys’ consulting & development services.

About eXcelisys, Inc.: Founded in 2001, eXcelisys (www.excelisys.com) is an FBA Platinum Partner and FileMaker Certified developer organization. we specialize in designing, developing, customizing, supporting, consulting, migrating, upgrading, fixing, and integrating of database solutions for Desktop, Mobile, and Web. Our core technology competencies are FileMaker Pro, FileMaker Go, PostgreSQL, and MySQL for database frameworks. Complimenting those database frameworks we have competency with FileMaker WebDirect, WordPress, PHP, CodeIgniter, Joomla, Drupal, Magento, CSS, HTML5, and Javascript for web sites and web applications. Aside from providing excellent customer service, our goals are to use these technologies to intuitively automate your organization’s data solution needs seamlessly and flawlessly across the web, mobile, and desktop platforms. Contact eXcelisys today for a free estimate and consultation regarding your business software automation needs @ 866-592-9235.

eXcelisys, Inc. is an independent entity and this web site/information/blog post has not been authorized, sponsored, or otherwise affiliated with FileMaker, Inc. FileMaker is a trademark of FileMaker, Inc., registered in the U.S. and other countries.

About the Author:

10 Comments

  1. Günter May 16, 2017 at 12:56 pm - Reply

    super !!

  2. Arie May 26, 2017 at 11:02 am - Reply

    Thank you very much.
    Very good Tip.
    Only a comment. I tested it using Filemaker Pro Advanced 14, 15 and 16 and it didn’t work in filemaker 14. It seems that the web viewer works different in 14.

    • RJ Carroll June 1, 2017 at 8:20 pm - Reply

      Hi Arie:

      Thanks for pointing out the issue with this tip file in FileMaker Pro 14. It seems the issue was the omission in the Web Viewer source of the explicit MIME type declaration, which was required in 14 but not later versions. I’ve patched the demo file and added a note to post above to explain the fix along with a link to the official issue documentation on the FileMaker help site.

      -RJ

  3. Clay Hendrix June 12, 2017 at 3:34 pm - Reply

    I cannot get this work on a hosted solution. Is there something that should be done differently for a hosted solution? When I click on a value in the HTML object, the error indicates that the file is not available and the host is not available or the file is not available on that host.

    Really cool solution. Thanks!

  4. Marius January 24, 2018 at 9:06 am - Reply

    Hi there, Carroll !

    I’ve tried to open with FM 15, everything ok.

    When it come to FM 16, It’s not working. A Web page cannot be displayed .

    Any idea ?

    • Doug West January 26, 2018 at 11:00 am - Reply

      Marius –

      I downloaded a fresh copy to my workstation and everything appears to be working properly with my FileMaker Pro 16.

      Have you made any modifications to your copy of the tip file? Are you using Mac or Windows?

  5. Marius January 29, 2018 at 5:12 am - Reply

    Working on a win 10 and win 7.

    Didn’t any change !

  6. Marius January 30, 2018 at 4:28 am - Reply

    Hi there, Doug !

    I didn’t made any change to the file.

    I’m working on Win 7 & Win 10.

Leave A Comment

Website Content and Design

Website Content and Design

Copyright © eXcelisys, Inc., all rights reserved. No unauthorized use permitted; all derivative works must have prior approval. All content – including design and copy within the eXcelisys website is protected under international copyright laws. eXcelisys will prosecute ANYONE who borrows or steals any derivative or facsimile of the content and design of eXcelisys’ website without written approval or permission. Read More

Trademarks

Trademarks

FileMaker®, FileMaker Pro® and the referencing FileMaker® logos are trademarks of FileMaker, Inc., in the United States, the European Union and other countries. MySQL® and MySQL® Logos are registered trademarks of MySQL AB in the United States, the European Union and other countries. The PostgreSQL elephant logo “Slonik” is a registered trademark of the PostgreSQL Global Development Group. Read More

Privacy Policy

Privacy Policy

We will never give or sell your email address or contact information to anybody, for any reason. There are no eXceptions. We do not make our customer list available to anyone outside of eXcelisys at all, ever.

There is no way that submitting your information to eXcelisys will result in you receiving “spam” or other junk mail from eXcelisys if you have requested us not to do so. Read More