Hierarchical Portal Filtering Incorporating Drag-n-Drop Technique

By Andy Persons

This is part three of a three-part series on hierarchical portal filtering in FileMaker Pro. You can find part one here and part two hereDemonstrating how to provide drag-and-drop rearranging and arbitrary sorting of hierarchical items.

Standard Interface

A common request when implementing hierarchical portal filtering is the ability to drag an item exactly where you want it to go. If you want it inside another element, just drag it on top. If you want it between two elements, just drag it in between them.

It’s a standard interface element in other areas, such as the Finder in MacOS, Explorer in Windows, and on some websites. However, the intuitive simplicity conceals quite a bit of complexity.

  • It needs to be able to clearly indicate when an item will be dropped “inside” another and when it will be “inserted” between two items.
  • It needs to elegantly handle the edge case when a user drags an item between the last child of parent and the parent’s “sibling”. Does it become the last child of that parent or the next sibling of the parent?
  • It needs to maintain the hierarchical structure at all times while providing arbitrary sort order.

Concealed Complexity

Here’s the overview:

  • This technique uses the drag-and-drop method demonstrated in this file, along with drop-target CSS to provide the visual indicators.
  • Each portal row has three container fields as drop targets. The top field will sort the dragged item above it (indicated by a line on its top border) and the bottom one will sort it below it (indicated by a line on its bottom border). The third field will make the dragged item a child of that record. Its drop target CSS is set to change the entire background color.
  • Sorting is accomplished by loading a dictionary of each related record’s id and sort number into a global variable at record load. The sort_path field uses this to calculate the sort number of each ancestor record into a single decimal number. To maintain the correct hierarchical sorting, the sort is padded with zeroes at the beginning and end. If the limits of four integer and six decimal digits are exceeded, it will automatically re-serialize the siblings.

These features could also be combined with the sorting from Part 2, if desired.


•• HierarchyRevisited part 3.fmp12 ••

screen shot filemaker pro hierarchical portal filtering Part3

**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 help or assistance, please consider retaining eXcelisys’ FileMaker Pro consulting & development services.

About eXcelisys, Inc.: Founded in 2001, eXcelisys (www.excelisys.com)is an FBA Platinum Partner and FileMaker Certified developer organization. eXcelisys specializes in designing, developing, customizing, supporting, consulting, migrating, upgrading, fixing, and integrating of database solutions for Desktop, Mobile, and Web applications. Our core technology competencies are FileMaker Pro, FileMaker Go, and MySQL for database frameworks, along with FileMaker WebDirect, WordPress, MySQL, PHP, CodeIgniter, PostgreSQL, 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 about making your business more efficient through intuitive and effective software automation. 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:


  1. Stephen June 21, 2017 at 9:53 am - Reply

    Andy this is a great technique, however how would you refactor this (a challenge) to work fluently with a sync system where it would require uuid and use of sequential serial numbers wouldn’t increment between server / and remote users.

    • Andy Persons June 23, 2017 at 5:10 pm - Reply

      Hi Stephen,

      It should work fine with UUID. I used serial numbers because it’s easier to see the technique structure that way.

      You’ll need to change the level field to count spaces instead. Also, keep in mind that FileMaker only evaluates the first 100 characters when sorting. So, if your hierarchy goes more than 5 levels deep, it will no longer sort correctly.

      You can get around this limitation by creating additional calculation fields that break the path field into 100-character sections and set the portal to sort by each of them.

      Good luck!

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



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