Drag And Drop

NOTE: This page describes an Orbeon Forms project, not a feature which is currently part of Orbeon Forms.

Goal

  • Support for horizontal and vertical drag and drop of iterations within an xforms:repeat
  • Support for moving iteration from a nested repeat to another nested repeat (say moving a cell from a line to another line).

Status

  • Done
    • Basic implementation merged in xforms.js
  • To do
    • Get D&D working in repeat-table-cells sandbox example

Documentation

How to expose DnD in Orbeon Forms

Orbeon Forms supports the xforms:repeat construct. This construct allows repeating groups of UI controls based on information stored in XML documents. This is often used to repeat table rows, but not exclusively.

The first way we would like to implement DnD in Orbeon Forms is by adding an attribute to xforms:repeat, which would automatically make the repeated elements in the UI reorderable by the user with drag and drop. For example, the form author would write:

<xforms:repeat nodeset="vehicles/vehicle" xxforms:dnd="true" id="vehicles-repeat">
  <tr>
     <td>...</td>
  </tr>
</xforms:repeat>

The magic that enables DnD is the xxforms:dnd attribute.

From that XForms markup, Orbeon Forms sends HTML to the web browser, for example (this is taken from our Government Forms example app's detail page):

<tr id="repeat-begin-vehicles-repeat" class="xforms-repeat-begin-end"/>
<tr class="xforms-repeat-delimiter"/>
<!-- Here is the first iteration -->
<tr class="xforms-repeat-selected-item-1">
  <td>...</td>
</tr>
<tr class="xforms-repeat-delimiter"/>
<!-- Here is the second iteration -->
<tr>
  <td>...</td>
</tr>
<tr class="xforms-repeat-delimiter"/>
<tr class="xforms-repeat-template"></tr>
<tr id="repeat-end-vehicles-repeat" class="xforms-repeat-begin-end"/>

When the attribute is set on xforms:repeat, the server must communicate to the client that the repeat is DnD-enabled. One possibility would be to use a CSS class:

<tr id="repeat-begin-vehicles-repeat" class="xforms-repeat-begin-end xforms-dnd"/>

When elements are reordered (that is, the user has dropped an element to the right spot), the client must notify the server that this reordering happened, through an Ajax request. Orbeon Forms already has a mechanism to send notifications to the server, so it is merely a matter of building on this. The Ajax message could contain something like:

<xforms:event name="xxforms-dnd" source-control-id="vehicles-repeat" dnd-start="3" dnd-end="1"/>

where the new attributes dnd-start and dnd-end tell the server that the iteration at position 3 was moved by the user to position 1.

The server will then have to react to this event and reorder information on the server side.

Next tasks

NOTE: We have already done a very rough prototype using DnD, to see how YUI behaves in a very simple case. We provide this for inspiration, but the JavaScript code in this prototype likely will have to be rewritten entirely.

Tasks:
  • Implement the code that detects, on the client, whether a repeat is DnD-enabled, and configure YUI to handle this. This must be done in the file xforms.js. which contains the client-side code for the Orbeon Forms XForms engine.
  • The server may, in addition, provide information telling that DnD is vertically or horizontally constrained, possibly again with a CSS class or some information stored in a JavaScript variable. YUI supports this type of vertical/horizontal constraints.
  • The result must be that DnD-marked repeats must be re-orderable by the user.
  • Figure out how to mark an area visually draggable so the user knows it can be dragged. This could be done with additional icons added by script, or CSS (discuss). It is important that the user know where to click to drag. Also, in certain cases YUI DnD may prevent the user from selecting form fields, so the solution must take this into account.
  • Write the code which, once a user drops a repeat iteration, sends the proper Ajax request to the server by leveraging the code in xforms.js (Erik or Alex to write the server-side code).
  • Provide a few examples showing that the DnD works as expected (see also "Testing" below).
Check these tasks from 2010:
  • Server (Erik)
    • server should not send updates after a move if the client already knows about those
    • check why the server send an update to the client

Testing

  • The DnD functionality must work for repeated table rows (<tr>), table cells (<td>), and regular HTML <div> elements.
  • Make sure the JavaScript code works with IE 6, IE 7, and Firefox 2 and 3.
  • Make sure the Orbeon Forms example apps are not broken by the changes to xforms.js.

Comments