XForms/Summary Details

Motivation
You have a long list of items, each of which has around a half screen of item details to edit. You want to quickly scroll through a table of items and change the details for the selected item.

Method
We will split our screen into two parts. The top part provides a tabular list list of items with each item displayed on a single line. As you select a single item, the details for that item will be shown on the lower part of the screen.

Screen Image


Note that when the mouse is in the second row the inspector is focused on the second item.

Sample Code
The way we get the bottom panel to change context to the selected row is to use a  element that will always focus on the selected row.

In this example the index('item-repeat') function will always be set to the selected row. So when you are on the second row the index('item-repeat') will be set to 2 and the XPath expression will be instance('save-data')//item[2]

Here is the full source code:

Discussion
Note that this pattern may be extended to use multi-line tables and a scrolling div in the top part of the form.