411 REFERENCE · Wikibooks
XForms/Table Column Total
Reference material by Wikibooks contributors. This retains its source identity and is not 411 news reporting.
Motivation
Frequently a form must display the total of a column. This can be accomplished using the bind function in the model.
Screen Image
frame|center|Calculating the total of a column
Sample Program
<html
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"
>
<head>
<style 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
}
</style>
<title>Demonstration of table with column total</title>
<xf:model id="my-model">
<xf:instance id="my-data" src="my-data.xml" xmlns=""/>
<xf:bind nodeset="/Data/Total" calculate="sum(../Item/Amount)"/>
<xf:submission id="update-from-local-file" method="get" action="my-data.xml"
replace="instance" instance="my-crv"/>
<xf:submission id="view-xml-instance" method="get" action="my-data.xml"/>
<xf:submission id="save-to-local-file" method="put" action="my-data.xml"/>
</xf:model>
</head>
<body>
<div class="table-header">
<div class="column-header item-description">Description</div>
<div class="column-header item-amount">Value</div>
</div>
<xf:group ref="/Data">
<!-- For each Person in the PersonList display the name and phone-->
<xf:repeat nodeset="Item" id="repeatItem">
<xf:input id="description-input" ref="Description" class="item-description"/>
<xf:input ref="Amount" class="item-amount"/>
<br />
</xf:repeat>
<div class="table-footer">
<div class="column-footer item-description">Total:</div>
<div class="column-footer item-amount">
<xf:output ref="/Data/Total" />
</div>
</div>
<xf:trigger id="insertbutton">
<xf:label>Add Item</xf:label>
<xf:action ev:event="DOMActivate">
<xf:insert nodeset="Item[last()]" position="after" at="last()"/>
<xf:setvalue ref="Item[last()]/Description" value="''"/>
<xf:setvalue ref="Item[last()]/Amount" value="0"/>
<!-- put the cursor in the name field -->
<xf:setfocus control="description-input"/>
</xf:action>
</xf:trigger>
<xf:trigger id="delete">
<xf:label>Delete Item</xf:label>
<xf:delete nodeset="Item[index('repeatItem')]"
at="index('repeatItem')" ev:event="DOMActivate"/>
</xf:trigger>
<br />
<xf:submit submission="update-from-local-file">
<xf:label>Reload</xf:label>
</xf:submit>
<xf:submit submission="save-to-local-file">
<xf:label>Save</xf:label>
</xf:submit>
<xf:submit submission="view-xml-instance">
<xf:label>View XML Instance</xf:label>
</xf:submit>
</xf:group>
</body>
</html>
Sample my-data.xml instance file
<?xml version="1.0" encoding="UTF-8"?>
<Data>
<Item>
<Description>Furniture</Description>
<Amount>1000</Amount>
</Item>
<Item>
<Description>Dock</Description>
<Amount>2000</Amount>
</Item>
<Item>
<Description>Boat</Description>
<Amount>3000</Amount>
</Item>
<Item>
<Description>Lawn equipment</Description>
<Amount>4000</Amount>
</Item>
<Item>
<Description>Hot tub</Description>
<Amount>5000</Amount>
</Item>
<Total>15000</Total>
</Data>
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.
Load from XML Schema Highlight Selected Row