Monday, November 18, 2013

Inserting and reordering grid rows

Grids are a key ingredient in Form Builder and Form Runner, as they are the main tool you use to layout controls on a page. And since Orbeon Forms 4 they are also repeatable, which means that you can repeat one or multiple row of the grid.

We have just added some important missing features to repeated grids:
  • The ability to reorder grid rows.
  • The ability to specify exactly where to insert a new row.
We thought quite a bit about how to best create the user interface. Drag and drop to reorder would be nice, but it is also hard to do right (we'll still consider adding this in the future). Cramming each row with 4 more icons didn't seem like a good idea. Icons showing upon hover would have been possible, but in the end we opted for a very simple solution: a menu, available on each row, which you explicitly open. Another benefit of the menu is that you also have more space to tell the user what the operations really do.

The new grid menu
We now have 5 operations:
  • Insert Above
  • Insert Below
  • Move Up
  • Move Down
  • Remove
The "Remove" operation was already available in previous versions via an icon.

Not all operations are available at all times. For example, you can't:
  • move rows beyond the top or bottom
  • insert or remove rows beyond the configured maximum or minimum if any
  • move and reorder "frozen" rows that can appear at the beginning of a grid
  • remove a row which has "remove constraint"
We have left the "+" icon at the top of the grid, which inserts a new row below the currently selected row. We have improved on this a bit by very discretely highlighting the current row, and improved keyboard focus handling when inserting/moving rows.

This feature will be available in Orbeon Forms 4.5.

1 comment:

  1. Nice! These controls will be very handy for tools that manage work queues and lists where the order of the items is relevant. Looking forward to trying out 4.5!

    ReplyDelete