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.

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.

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
     Total:    Terms:   Payable on Receipt payable-on-receipt </xf:item> <xf:item> <xf:label>Net 30</xf:label> <xf:value>net-30</xf:value> </xf:item> <xf:item> <xf:label>2% discount if paid withn 10 days, Net 30</xf:label> <xf:value>2-10-net-30</xf:value> </xf:item> <xf:item> <xf:label>Net 60</xf:label> <xf:value>net-60</xf:value> </xf:item> </xf:select1> <xf:input ref="PaidIndicator" class="newline"> <xf:label>Paid:</xf:label> </xf:input>

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.