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

caption: note that when the mouse is in the second row the inspector is focused on the second item (Image: Dmccreary, CC BY-SA 3.0)

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.

ref="instance('save-data')//item[index('item-repeat')]">

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:

xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xf="http://www.w3.org/2002/xforms">;

Summary-Inspector Pattern

id="save-data">
xmlns="">

Table Name 1
Table Description 1

Table Table Name 2
Table Description 2

Table Name 3
Table Description 3

Table Name 4
Table Description 4

id="template">
xmlns="">

Summary-Inspector Pattern

id="item-repeat" nodeset="instance('save-data')//item">
ref="name">
ref="description">

X
ev:event="DOMActivate" nodeset="."/>

Add
ev:event="DOMActivate" nodeset="instance('save-data')/items" origin="instance('template')" at="last()" position="after"/>

ref="instance('save-data')//item[index('item-repeat')]">

Item inspector
ref="name">
Name:

ref="description">
Description:

Discussion

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

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.