True Drag & Drop Lists
When FileMaker simply can't do what's needed natively, you resort to pulling out the old web viewer and just doing it there. Yes, learning JavaScript may be something you're resistant to - or - maybe you've fully embraced the maximum extent of the power we have access to. Either way, there are many things JavaScript can do better and all we need is to move the data back and forth between the web viewer and our fields.
When it comes to a truly natural feeling of drag and drop with lists, your only option is the web viewer and JavaScript. Fortunately, using a library named Sortable, we can easily support a very natural drag and drop experience. Sortable provide an extremely wide array of features in terms of any kind of drag and drop you might want to offer within FileMaker.
This video, and it's supporting technique file, will provide you with the starting point of how you can use Sortable within your solution in order to achieve that desired natural drag and drop experience.
Comments
Web Viewer - long term stability?
Thank you Matt! This is a much more elegant solution than the drag and drop sorting method I implemented using container fields (a heavily adapted version of Charles Delf's solution to deal with multiple lists).
I do have a question. I've been reluctant to implement large Filemaker UI elements in web viewers using Javascript with the concern that solutions could "break" with updates to the underlying operating system web browser (i.e. Safari & Edge). How concerned should I be with that?
Highly - like EXTREMELY - unlikely to go away
JavaScript and JSON are not going to go anywhere. They are the main staples of so many Internet based resources. Fortunately, Claris has done a good job of adopting and implementing standards. XML was added for import and export when it came on the scene. CSS was applied to the layout system when FileMaker moved from their own rendering. When web viewers got direct bi-directional interaction and the fact that their JSON implementation continues to get supporting functions, then you know it's absolutely got long term stability.
JavaScript is simply another language. In fact, it's a better language for MANY things because FileMaker is trapped within its own humble beginnings. Modern FileMaker development is no longer fully native. If a developer does not take the time to learn and implement JavaScript/JSON into their database solutions then, in my opinion, they are actively saying "I will disadvantage myself because I'm unwilling to learn or adapt." Unfortunately, Claris has implemented our use of JavaScript in a very 'hackish' way. We need to be able to directly execute JavaScript and an updated code editor which would support both the FileMaker calculation engine and JavaScript code. If Claris ever decided to do the correct implementation and directly embedded a JavaScript engine and environment into FileMaker then a larger world would certainly open up for technical solutions. As of right now, we have to live with the workaround we have called a Web Viewer.
That was the long answer. The short answer...
Yes!
-- Matt Petrowsky - ISO FileMaker Magazine Editor
Thank you
Thank you for your response. It wasn’t too long. I also see JavaScript as the next step for FileMaker. I’ve played with and tested different techniques. I’ll definitely start implementing these into solutions. JSON has been a godsend. I use it all over my solutions.
Thank you again for your thoughts. Your content rocks!
Alex
Trying to use this to sort a related table
Elegant solution, Matt. Image moving estimate lineitems on an estimate record. I have it working well, But, the webviewer doesn't update as you move lineitems. I noticed the GetSummary functions does actually sort, I am not moving records like in the solution. I am staying on one record and moving its lineitems. Any suggestions on how to get the webviewer to behave?
Note: I have added a custom tag in the custom function called HTMLElements with the tag "index" which grabs the index number of those related records updated order.
See example ...
<div id="data" class="list-group col">
<div index="4" id="4B . . . 9B" class="list-group-item">Testing</div>
<div index="6" id="B7 . . . DB" class="list-group-item">Research and Development</div>
<div index="1" id="19 . . . 8D" class="list-group-item">Journal Development</div>
<div index="2" id="A5 . . . E4" class="list-group-item">Data Import</div>
<div index="5" id="CA . . . 67" class="list-group-item">Script Adjustments</div>
<div index="3" id="66 . . . 99" class="list-group-item">Accounting Module</div>
</div>
Hoping to get the webview to sort by index tag. Not happening for me. :(