XForms, Table Column Total

Motivation

Frequently a form must display the total of a column. This can be accomplished using the bind function in the model.

Sample Program

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

type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");

• { font-family: Ariel, Helvetica, sans-serif }

.table-header, .table-footer {
display: table-row;
}

.column-header, .column-footer {
display: table-cell;
text-align: center;
color: white;
background-color: gray;
font-weight: bold;
}

/* make the "Total:" in the table footer right align */
.table-footer .item-description,
.table-footer .item-amount {
text-align: right;
}

.item-description {
width: 300px;
}

.item-amount {
width: 112px;
}

.item-description .xf-value {
width: 300px;
text-align: left
}

.item-amount .xf-value {
width: 100px;
text-align: right
}

Demonstration of table with column total
id="my-model">
id="my-data" src="my-data.xml" xmlns=""/>
nodeset="/Data/Total" calculate="sum(../Item/Amount)"/>
id="update-from-local-file" method="get" action="my-data.xml"
replace="instance" instance="my-crv"/>
id="view-xml-instance" method="get" action="my-data.xml"/>
id="save-to-local-file" method="put" action="my-data.xml"/>

class="table-header">
class="column-header item-description">Description
class="column-header item-amount">Value

ref="/Data">

nodeset="Item" id="repeatItem">
id="description-input" ref="Description" class="item-description"/>
ref="Amount" class="item-amount"/>
/>

class="table-footer">
class="column-footer item-description">Total:
class="column-footer item-amount">
ref="/Data/Total" />

id="insertbutton">
Add Item
ev:event="DOMActivate">
nodeset="Item[last()]" position="after" at="last()"/>
ref="Item[last()]/Description" value="''"/>
ref="Item[last()]/Amount" value="0"/>

control="description-input"/>

id="delete">
Delete Item
nodeset="Item[index('repeatItem')]"
at="index('repeatItem')" ev:event="DOMActivate"/>

/>
submission="update-from-local-file">
Reload

submission="save-to-local-file">
Save

submission="view-xml-instance">
View XML Instance

Sample my-data.xml instance file

Furniture
1000

Dock
2000

Boat
3000

Lawn equipment
4000

Hot tub
5000

15000

Discussion

This example uses div blocks for the table header and footer. The total will be updated each time the user tabs out of a field. New items are always added to the end but you can delete an existing item just by selecting it and pressing the "Delete item" button.

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.