Drag and Drop UI to Set Field Order

Hi All,

I would like to create a form with elements that allow the user to drag fields into a box to set their order. (See mockup image below) This structure will be used to concatenate lines of text to fill various printed forms. I am lost on how this might be done in 4D. Anyone have examples of how this could be accomplished with 4D native code or some other web area approach? I just need to capture the field order from this drop area…

(This is my first post to the new discussion board. Hope I did this right…grin)

Thanks in advance for your help!
Kirk

Do you have to have the field area on the right? Does it serve another purpose? I’m asking because it seems like you could just display a listbox or possible fields on the left and change the order by dragging. Or enable/disable a field/row with a checkbox to include/exclude.

Tom Benedict

Thanks Tom,

I need to provide a bit more user friendly and flexible UI than you are describing. All fields needs to be capable of being dropped in any position, specific to any one of several thousand customers. I made a test run with list boxes and check boxes, but it didn’t look good or feel like a modern design. The interface in my mockup is similar to another application that is familiar to our users. I am trying to mimic it the best I can. Just floating this out there to see if there are any ideas from the great collective 4D brain trust.

Thanks,
Kirk

In the past I’ve seen something like that done using a text area where the user enters a tag to insert a field.

<<Name>>
<<Address 1>> <<Address 2>>
<<City>> <<State>> <<Zip>>
<<Phone 1>> <<Fax>>
<<eMail>>

But that isn’t very modern, so if I was going to create an interface like your mock up in 4D, I’d probably try something like this:

  • Have the fields down the left as draggable objects that you OBJECT DUPLICATE when the user drops in the area on the right.
  • Have a hidden object between each field, plus at the start/end of each line and one for a new line, that you can use to tell where to insert (i.e. the nearest one). For a visual indicator show the nearest one as they drag.
  • When they drop, rearrange everything accordingly.
  • Similar for moving a field in the area, you just wouldn’t duplicate it.

You would obviously need to keep some data structure behind the scenes that tracks the field order.

Hi Kirk, you are welcome
I think the solution is to manage an SVG image as a drop zone. I use this solution in the 4D for iOS Project Editor and you can also find sample code in the 4D Labels component.


With this solution, you can drop field everywhere and rearrange the order of the field in the drop zone.
1 Like

Kirk,

Looking into the listbox drag and drop closer I see that it doesn’t support both draggable and movable properties at the same time. So you could drop an object onto a listbox, but you couldn’t subsequently reorder the list by moving the listbox row. At least that’s what the docs appear to say; I haven’t tried it. Also, buttons or text require holding down the Alt key to drag which wouldn’t meet your UX requirement.

You may need to consider something with SVG or Javascript. Maybe Spiffy Guy Matt Davis can dream something up?

Tom

This looks interesting. I will review. Thank you, Vincent!!