Overview

There have been a number of drag sorting solutions. Here is a better one.

When a client asked me to implement Ray Cologon / Nightwing's portal sorting solution into his solution I was not happy with the appearance and UX. I rebuilt my own solution from scratch using the original data set and scheme.  Here is how I solved this problem.

Better Drag Sort Features

  • Single Container field per sort portal per table
  • Single abstracted modular script
  • Sexy drop target UI indication
  • Fully Separation Model Compatible
  • One additional container field 
  • One script for all sorts

How it Works

The trick to container drag sorting is identifying the Origin and destination portal rows. Once you know these you can deserialize your sort order and update the sort order. Some solutions use ID's in the container and then check the destination container for the source ID. This solution instantiates $$Vars in the destination container that are then visible to the sort script.

Another challenge is abstracting the sorting script so that it is context insensitive and can be used throughout the whole application. Since the configuration is totally done in the container calc, there is no need to make any changes in the universal sorting script. 

Having an elegant target indicator. All solutions I have seen have either multiple container rows or single rows and do not clearly indicate where the dragged row will actually go. By using some custom CSS for the Drop Target attribute, we can have a clean line so there is no ambiguity.

The final challenge is to prevent a user from dropping the drag into a text field and subsequently erasing the text fields contents. This is handled by not dragging text and instead dragging a transparent blank image. FMP does not allow images to be dropped in text fields.

The demo files are well documented. Delfs' Engineering is also able to help you integrate custom drag sorting into your solution.

Demo Files

https://www.dropbox.com/sh/4q7unz9l30rdoo2/AACy1qUtV-UfVa-CIog6cELpa?dl=0

V1.1

  • Adds support for portals that have `allow create related records`
  • Adds support for List View, Thanks to Joshua Willing Halpern
  • Update but replaceing the Auto-Enter Container Calcs and copy and paste script contents.

Final Thoughts

I have started working on a V2 of this demo. This will support multiple selections for the drag source. (Shift or option key while clicking) Once selected they can all be dragged into the slot of the destination. There may be some artifacts in V1 from before I forked the project. 

@mrdelfs

Buy me a pint ! I attend most FM conferences, see you there!

FMP V16 Breaks the drop script trigger for png files. This, I am told, is fixed with the latest release. ~cd

 


V2 Wish List

  • Ability to work with List view and portal records - Dan Smith
  • Multiple source selection (drag multiple records - Doug Gardner
  • Add Ability to work with Allow Created Records (see comments) - David Zakary
  • Support for inter-portal dragging (and order inserting) - Mateusz Poradecki
  • FM Go Support (and WD) - Daniel

NOTE: If your comment warrants a reply, use the site contact page so we have your email.

58 Comments