XForms, Invoice Manager

Motivation

You want to demonstrate a typical business application such as the creation of an Invoice. The invoice must have date and Boolean data types and use a bind rule to automatically calculate invoice totals. The invoice should have multiple line items, each with an amount.

Method

We will use many of the standard XForms controls and a standard XForms style sheet to style the form.

Screen Image

(Image: The original uploader was Dmccreary at English Wikibooks ., CC BY-SA 3.0)

Sample Application

Load Sample XForms Application

Sample Invoice Instance

The following is a sample of an invoice document. This document is typically sent by a supplier to a consumer of a product or service after confirmation that the products or services were delivered.

The top portion has items such as an invoice number, the date the invoice was sent to the customer and the from and to information. It is then followed by a set of line items that specify the items delivered and their price. At the end the line items are totaled and an indication made to see if the invoice was paid or not.

123
2008-10-10

Acme Services
123 Main St.
Anytown, MN 12345

Acme Consumer
123 Main St.
Anytown, MN 12345

Widget 123
100.00

Widget 456
200.00

Widget 789
300.00

net-30
false

XForms User Interface

The interface to the Invoice uses input, textarea and select1 controls. In addition, data types are assigned to the InvoiceDate and InvoicePaid indicator elements.

XForms Application Source

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">;

Invoice
rel="stylesheet" type="text/css" href="xforms.css"/>

xmlns="" id="invoice" src="new-instance.xml"/>
nodeset="instance('invoice')/InvoiceDate" type="xs:date"/>
nodeset="instance('invoice')/PaidIndicator" type="xs:boolean"/>
id="total" nodeset="instance('invoice')/TotalAmount" calculate="sum(instance('invoice')/LineItems/Item/Amount)"/>

Invoice

ref="InvoiceID" class="newline">
Invoice Number:

ref="InvoiceDate" class="newline">
Invoice Date:

ref="instance('invoice')/From">
class="group-label">From:
ref="OrganizationName" class="newline">
Company:

ref="OrganizationAddress" class="newline">
Address:

ref="instance('invoice')/To">
class="group-label">To:
ref="OrganizationName" class="newline">
Company:

ref="OrganizationAddress" class="newline">
Address:

class="Description">Description
class="Amount">Amount

nodeset="instance('invoice')/LineItems/Item">
ref="Description" class="Description"/>
ref="Amount" class="Amount"/>

bind="total" class="Amount">
Total:

ref="InvoiceTermsCode" class="newline">
Terms:

Payable on Receipt
payable-on-receipt

Net 30
net-30

2% discount if paid withn 10 days, Net 30
2-10-net-30

Net 60
net-60

ref="PaidIndicator" class="newline">
Paid:

Sample CSS File

The following CSS file required the input XForms application to add the newline class attribute for each control that appears on a new line. This allows the repeat input items to not automatically flow to a new line.

@namespace xf url("http://www.w3.org/2002/xforms");
body {font-family:Helvetica, sans-serif;}
textarea {font-family:Helvetica, sans-serif;}

.newline {display:block; margin:5px 0;}

xf|input > xf|label, xf|select > xf|label, xf|select1 > xf|label, xf|textarea > xf|label
{text-align:right; padding-right:10px; width:20ex; float:left; text-align:right;}

xf|group {border: solid black 1px; margin:15px 5px; padding:5px; background-color:lavender;}
.group-label {text-align:left; font-weight:bold; font-size:12pt;}

/* put each item on a new row */
.xf-repeat-item {padding: 3px; display:block;}

.Description, .Description .xf-value {text-align: left;}
.Description {width: 50ex; text-align: left;}
.Description .xf-value {width: 65ex; text-align: left;}

.Amount, .Amount .xf-value{text-align: right;}
.Amount {width: 12ex;}
.Amount .xf-value {width: 16ex;}

/* add to remove spaces between table cells
table {border-collapse: collapse;} */
thead tr {background-color: silver;}
thead tr th {padding: 2px 5px;}

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.