Orbeon Search

Comments? Feedback?

This wiki does not yet support public comments (a limitation of Google Sites), so we encourage you to post your comments either:

On Twitter by responding to @orbeon.

On our community mailing list: subscribe sending an email to ops-users-subscribe@ow2.org (content of subject/body doesn't matter), you'll get a response with the email to use to send your message to the community mailing list.

Recent site activity

Input Control

<xforms:input ref="text"/>

Standard appearance

By default, the text area control is rendered as a regular single-line input fields:

Examples of input fields

Attributes

With the standard appearance, the following attributes are available:
  • xxforms:size: same as HTML input size attribute
  • xxforms:maxlength: same as HTML input maxlength attribute
  • xxforms:autocomplete: same as HTML input autocomplete attribute
Example:

<xforms:input ref="text" xxforms:autocomplete="off/>

Placeholder for label and hint

[SINCE: 2012-01-19]

The label or hint associated with <xforms:input> may have the minimal  appearance:

<xforms:input ref=".">
    <xforms:label appearance="minimal">Your name</xforms:label>
    <xforms:hint>Hint</xforms:hint>
</xforms:input>

<xforms:input ref=".">
    <xforms:label>Your name</xforms:label>
    <xforms:hint appearance="minimal">Hint</xforms:hint>
</xforms:input>

This causes either the label or the hint to appear on the background of the field when it is empty:


Orbeon Forms leverages the HTML 5 placeholder attribute for browsers that support it (Firefox 3.5+, Chrome, Safari, Opera), and simulates the HTML 5 placeholder functionality  in JavaScript for browsers that don't support it (all versions of IE). In that case, you can customize how the placeholder is displayed by overriding the CSS class xforms-placeholder.

NOTE: The xxforms:placeholder  appearance can also be used instead of the minimal appearance. Initially (2011-11) the feature only supported xxforms:placeholder and support for minimal was added upon discussion with the W3C Forms Working Group.

Appearance based on type

The way the XForms input control is be rendered on the page depends on the type of the node it is bound to:

 BooleanIf bound to a node of type xs:boolean, a checkbox is displayed.
Date with input field
If bound to a node of type xs:date, a date input field with date picker is displayed (here shown with the date picker open).
Date without input field
If bound to a node of type xs:date and you have an appearance="minimal" on the <xforms:input>, then the date picker is rendered without the input field; only the icon of the date picker will show. When using an <xforms:input appearance="minimal">, you should consider adding to the form an <xforms:output> which shows the date (or something similar), so users know what date they selected.
Time
If bound to a node of type xs:time, a time input field is displayed.
Date and time
If bound to a node of type xs:dateTime, a date and time input fields are displayed (the date part is here shown with the date picker closed).

date, time, and dateTime types

Date picker configuration

When using the YUI widget, you can choose if you want 2 months to be displayed instead of one, and if users should be able to quickly navigate to a specific year and month by setting the oxf.xforms.datepicker.navigator property.

Make sure not to use the date picker inside an <xhtml:p>, as this will result in a "Unknown runtime error" on IE 6, 7, and 8, as IE is unable to render the markup for the date picker inside an <xhtml:p>.

Smart date and time format

The date and time fields allow you to type a date and a time in a number of formats, as listed below. When the field looses the focus, the value you entered is parsed and, if recognized, replaced with a value in a a "canonical format".

You can choose what canonical format is used by changing the value of the oxf.xforms.format.input.date and oxf.xforms.format.input.time properties.


ExampleNoteRegular expression
Time formatsnowThe current time^now$

12:34:56 p.m.
^(\d{1,2}):(\d{1,2}):(\d{1,2}) ?(p|pm|p\.m\.)$
 12:34 p.m.Is equivalent to 12:34:00 p.m.^(\d{1,2}):(\d{1,2}) ?(p|pm|p\.m\.)$
 12 p.m.Is equivalent to 12:00:00 p.m. ^(\d{1,2}) ?(p|pm|p\.m\.)$
 12:34:56 (a.m.)
 ^(\d{1,2}):(\d{1,2}):(\d{1,2}) ?(a|am|a\.m\.)?$
 12:34 (a.m.) ^(\d{1,2}):(\d{1,2}) ?(a|am|a\.m\.)?$
 12 (a.m.) ^(\d{1,2}) ?(a|am|a\.m\.)?$
 123456Is equivalent to 12:34:56^(\d{1,6})$
Date formatstoday
^tod
 tomorrow
^tom
 yesterday ^yes
 4thThe 4th of the current year and month^(\d{1,2})(st|nd|rd|th)?$
 4th Jan
^(\d{1,2})(?:st|nd|rd|th)? (\w+)$
 4th Jan 2003 ^(\d{1,2})(?:st|nd|rd|th)? (\w+),? (\d{2,4})$
 Jan 4th ^(\w+) (\d{1,2})(?:st|nd|rd|th)?$
 Jan 4th 2003 ^(\w+) (\d{1,2})(?:st|nd|rd|th)?,? (\d{2,4})$
 When the oxf.xforms.format.input.date
property starts with [M: e.g. 10/20/2000 		"US format" (month first) with the year specified^(\d{1,2}).(\d{1,2}).(\d{2,4})$
 When the oxf.xforms.format.input.date
property starts with [D: e.g. 20/10/2000		"European format" (day first) with the year specified^(\d{1,2}).(\d{1,2}).(\d{2,4})$
 When the oxf.xforms.format.input.date
property starts with [M: e.g. 10/20		"US format" (month first) with no year specified^(\d{1,2}).(\d{1,2})$
 When the oxf.xforms.format.input.date
property starts with [D: e.g. 20/10		"European format" (day first) with no year specified^(\d{1,2}).(\d{1,2})$
 2000-10-20ISO or "Asian" format(^\d{4})-(\d{1,2})-(\d{1,2})(Z|([+-]\d{2}:\d{2}))?$


Two digits years

If you type in a date field a year with only two digits (say 5/20/10), the control will assume that you intended to type a year in the twentieth or twenty first century, rather than a year in the first century. It will convert the two-digit year you typed into a four digits year by taking the corresponding year in either the twentieth or twenty first century based on which one is closest to the current year. So for instance, if the current year is 2020:
  • 10 is changed to 2010
  • 80 is changed to 1980
  • 60 is changed to 2060

Date picker internationalization

By default, the months and days of the week are in English in the date picker (as shown in the screenshot above). You can  change this by setting the value of the lang attribute on the <html> element of the page. The value of the attribute two-letter ISO 639-1 language code. For instance with <html lang="fr"> months and week days will be shown in French, for instance:


Currently, 3 languages are supported: English (the default), French, and Spanish. Note that the changing the language also changes which day of the week is shown first in the calendar: in English, Sunday is shown first; with French and Spanish, Monday is shown first. 

Date picker in scrollable area 

If you are using the date picker in an area of your page which is scrollable (e.g. <div style="overflow: scroll">), if users scroll in that area while the date picker is open, you want the date picker to be anchored to the field it is related to and to scroll with the content of the scrollable area (versus being attached to the page, and only scrolling if the page is scrolled). For this to work, assuming you have the class scrollable-area on your scrollable area, you need to add the following CSS:

.scrollable-area { position: relative }

On iOS

[SINCE 2011-11-22]

On iOS (iPhone, iPad, iPod touch), inputs bound to nodes of type xs:date, xs:time, or xs:dateTime are rendered using the iOS 5 browser native date or time widgets, which iOS users are accustomed to, and which provides a better usability, especially on the smaler screen iPhone and iPod touch.


Limitations

  • If the time has a milliseconds part:
    • The time will be shown without the milliseconds part.
    • If users modify the time, the milliseconds part will be lost.
  • If the time has a time zone specification:
    • The date will be shown as if the time zone indication was not there.
    • If users modify the time the time zone will be lost.

Sign in|Recent Site Activity|Report Abuse|Print Page|Remove Access|Powered By Google Sites