Extension:Semantic Forms Inputs

The Semantic Forms extension allows users to add, edit and query data of a Semantic MediaWiki using forms. For every form field the input type specifies the type of input a field will have in the form. Semantic Forms comes with basic input types for all data types. This extension -- Semantic Forms Inputs -- aims to collect further, optically and/or functionally enhanced input types.

[edit] Download instructions

Download the latest version from Semantic Forms Inputs at Google Code or get it using Subversion:

svn co http://semanticformsinputs.googlecode.com/svn/tags/0.2/SemanticFormsInputs

To get the latest trunk version use:

svn co http://semanticformsinputs.googlecode.com/svn/trunk/SemanticFormsInputs

There is a version history available.

[edit] Installation

Remember that having Semantic MediaWiki (version 1.4 or higher should do; not sure about earlier versions) and Semantic Forms (version 1.8.4 or higher) installed is a precondition for the Semantic Forms Inputs extension; the code will not work without it.

For the date picker to work the Yahoo! User Interface (YUI) Javascript library (version 2.7.0b or higher) must be available, either locally installed or via existing internet connection. As the library is used by the Semantic Forms extension as well, this should not be a problem.

(The HeaderTabs extension 0.6.6 seems to work with 2.7.0b with some small change in the HeaderTabs.php: Remove the if-clause in lines 118 .. 126, then remove " . style" from line 127. The catch with that solution is, that the browser history feature of the Header Tabs will still not work, so you will have to deactivate it.)

Create a directory named SemanticFormsInputs in the extensions directory of your MediaWiki installation and copy the extension's files into it. Then add the following line to your LocalSettings.php below the inclusion of the Semantic Forms extension:

require_once('extensions/SemanticFormsInputs/SemanticFormsInputs.php');

[edit] Configuration parameters

You can tweak the settings of the Semantic Forms Inputs extension in the SemanticFormsInputs.Settings.inc file. You can find it in your extensions/SemanticFormsInputs directory.

If you do not want to alter that file just put the settings in your LocalSettings.php below the inclusion of SemanticFormsInputs.php

[edit] Credits

The Semantic Forms Inputs extension uses the Yahoo! User Interfaces library. See the Yahoo! User Interfaces homepage.

Button icons are derived from the Mini Icons 2 icon set from brandspankingnew.net. See the respective article on brandspankingnew.net

[edit] Contact

Comments, questions, bug reports and suggestions can be send or posted to

the appropriate Semantic Mediawiki mailing list
the Semantic Forms Inputs discussion page
the author

I am also interested in which configurations work and which don't. So if you are successfully using these input types with e.g. Semantic MediaWiki pre1.4 drop me a note.

[edit] Date Picker

Input type: datepicker

The date picker lets a user pop up a graphical calendar and enables the user to choose a date from it. The calendar is generated entirely via script and can be navigated without any page refreshes.

Preconditions: The Yahoo! User Interface (YUI) Javascript library must be available, either locally installed or via existing internet connection. As the library is used by the Semantic Forms extension as well, this should not be a problem.

You can tweak the appearance of the calendar by changing or overriding the css rules of the YUI library.

[edit] Examples

Example: A field that uses a simple date picker with all parameters set to their default values

{{{field|foo|input type=datepicker}}}

Example: A field that uses a date picker with specific parameters:

{{{field|foo|input type=datepicker
|disable input field
|show reset button
|show week numbers
|week start=1
|highlight days of week=0
|disable days of week=6,0
|disable dates=01/05/2009,25/12/2009-06/01/2010
|date format=%d.%m.%Y}}}

[edit] Parameters

Parameter	Support	Meaning/Remark
Standard
size	yes	Specifies the width of the text entry.
maxlength	yes	Specifies the maximum allowed length of the text entry.
rows	no
cols	no
mandatory	yes
hidden	yes
restricted	yes
uploadable	no
autocomplete	no
no autocomplete	no
autocomplete on category	no
autocomplete on concept	no
autocomplete on namespace	no
remote autocompletion	no
property	no
default	yes	Format: dd/mm/yyyy
values	yes	The days must be given as comma-separated list of dates or date ranges. The format for days is dd/mm/yyyy, for date ranges use dd/mm/yyyy-dd/mm/yyyy. Spaces are permissable.
values from category	yes	see parameter values
values from concept	yes	see parameter values
list	no
delimiter	no
class	yes
Type Specific
date format		The date format string. It is used for the input field and for the date sent back with the form. Remark: The format you choose may not be suitable for properties of type date. If you need that you will have to convert the customized date back to something recognized as a date in the template called by your form. Use the following keys: %a - abbreviated weekday name according to the current wiki locale %A - full weekday name according to the current wiki locale %b - abbreviated month name according to the current wiki locale %B - full month name according to the current wiki locale %c - preferred date and time representation for the en locale %C - century number (the year divided by 100 and truncated to an integer, range 00 to 99) %d - day of the month as a decimal number (range 01 to 31) %D - same as %m/%d/%y %e - day of the month as a decimal number, a single digit is preceded by a space (range ' 1' to '31') %F - same as %Y-%m-%d (ISO 8601 date format) %g - like %G, but without the century %G - The 4-digit year corresponding to the ISO week number %h - same as %b %H - hour as a decimal number using a 24-hour clock (range 00 to 23) %I - hour as a decimal number using a 12-hour clock (range 01 to 12) %j - day of the year as a decimal number (range 001 to 366) %k - hour as a decimal number using a 24-hour clock (range 0 to 23); single digits are preceded by a blank. (See also %H.) %l - hour as a decimal number using a 12-hour clock (range 1 to 12); single digits are preceded by a blank. (See also %I.) %m - month as a decimal number (range 01 to 12) %M - minute as a decimal number %n - newline character %p - either `AM' or `PM' according to the given time value %P - like %p, but lower case %r - time in a.m. and p.m. notation equal to %I:%M:%S %p %R - time in 24 hour notation equal to %H:%M %s - number of seconds since the Epoch, ie, since 1970-01-01 00:00:00 UTC %S - second as a decimal number %t - tab character %T - current time, equal to %H:%M:%S %u - weekday as a decimal number [1,7], with 1 representing Monday %U - week number of the current year as a decimal number, starting with the first Sunday as the first day of the first week %V - The ISO 8601:1988 week number of the current year as a decimal number, range 01 to 53, where week 1 is the first week that has at least 4 days in the current year, and with Monday as the first day of the week. %w - day of the week as a decimal, Sunday being 0 %W - week number of the current year as a decimal number, starting with the first Monday as the first day of the first week %x - preferred date representation for the en locale without the time %X - preferred time representation for the en locale without the date %y - year as a decimal number without a century (range 00 to 99) %Y - year as a decimal number including the century %z - numerical time zone representation %Z - time zone name or abbreviation %% - a literal '%' character
week start		The first day of the week (0 - Sunday, 1 - Monday, ...)
first date		the first date that can be chosen (in dd/mm/yyyy format)
last date		the last date that can be chosen (in dd/mm/yyyy format)
disable days of week		List of days that can not be selected (e.g. weekend: 6, 0)
highlight days of week		List of days that shall appear highlighted (e.g. weekend: 6, 0)
disable dates		comma-separated list of disabled dates/date ranges (dates in dd/mm/yyyy format, ranges in dd/mm/yyyy-dd/mm/yyyy format)
highlight dates		comma-separated list of dates/date ranges that shall appear highlighted (dates in dd/mm/yyyy format, ranges in dd/mm/yyyy-dd/mm/yyyy format)
month names		how month names shall be shown (short or long)
day names		how the names of the days of the week are shown (1char, short, medium, long)
show/hide week numbers		If week numbers shall be shown left of the week
disable/enable input field		If the user shall be able to fill the input field directly or only via the date picker.
show/hide reset button		If a reset button shall be shown. This is the only way for the user to erase the input field if it is disabled for direct input.

[edit] Combobox

Input type: combobox

The combobox lets a user either insert a value into an input field or pop up a list of values to choose from. The list of values is narrowed down when the user starts typing. Be aware that this can be a bit confusing if a value is already present in the input field. In this case the list will only show one value although there would be more available if the user only deleted the input field.

Preconditions: The Yahoo! User Interface (YUI) Javascript library must be available, either locally installed or via existing internet connection. As the library is used by the Semantic Forms extension as well, this should not be a problem.

You can tweak the appearance of the combobox by changing or overriding the css rules of the autocompletion widget of the YUI library.

For the combobox to work you have to give it values to show in the list, i.e. in your field definition there has to be a values, values from category or values from concept parameter.

[edit] Examples

Example: A field that uses a simple combobox with all parameters set to their default values

{{{field|foo|input type=combobox|values from category=bar}}}

Example: A field that uses a combobox with specific parameters:

{{{field|foo|input type=datepicker
|list height=100px
|size=50
|values from category=bar
}}}

[edit] Parameters

Parameter	Support	Meaning/Remark
Standard
size	yes	Specifies the width of the text entry.
maxlength	yes	Specifies the maximum allowed length of the text entry.
rows	no
cols	no
mandatory	yes
hidden	yes
restricted	yes
uploadable	no
autocomplete	no
no autocomplete	no
autocomplete on category	no
autocomplete on concept	no
autocomplete on namespace	no
remote autocompletion	no
property	no
default	yes
values	yes	For the combobox to work you have to give it values to show in the list, i.e. in your field definition there has to be a values, values from category or values from concept parameter.
values from category	yes	see parameter values
values from concept	yes	see parameter values
list	no
delimiter	no
class	yes
Type Specific
list height		the max list height for browsers that understand it, the list height for Internet Explorer (may be any absolute value allowed in CSS, e.g. 5em or 1cm or 100px; % does not work)

[edit] Regular Expression Filter

Input type: regexp

What it does: With the Regular Expression Filter you can fine-tune what values are allowed and what is blocked in your input fields. You can even string several filters together to have a cascade of checks, e.g. to give an error message specific to what violation occured.

How it works: Specify regexp as your input type and in the parameter regexp give a Javascript regular expression, that the user input has to match. If you want a base type different from text specify it with the parameter base type. You may want to specify an error message with the message parameter. Finally there is the problem, that you can not use the | character because it gets lost in the field definition. Use ! instead. Or specifiy any other replacement character in the parameter or char and use that. See Writing a Regular Expression Pattern for an introduction to writing a regular expression pattern in Javascript.

If you want to specify a chain of regexp filters there is the problem, that every parameter can be used only once in every field definition, e.g. just giving regexp twice will not work. To work around that and still be able to address the filters further down the chain, specify a prefix for each filter in the parameter base prefix of its predecessor. Sounds complicated? Have a look at the example below. You may, but do not need to specify a prefix for the final input type - each filter stage consumes only the parameters from the parameter set, that it understands, i.e. the specific parameters listed below.

[edit] Examples

Example: A simple text input field accepting only letters, numbers and spaces. (This may be useful for fields from which an article's name is generated in the Semantic Forms one-step process.)

{{{field|foo|input type=regexp|regexp=/^[0-9A-Za-z ]+$/}}}

Example: A text input field accepting only numbers and having no more than 5 digits. Certain numbers are forbidden. Each condition gets its own error message.

{{{field|foo|input type=regexp
|regexp=/^\d*$/|message=Only numbers!|base type=regexp|base prefix=filter2
|filter2.regexp=/^.{0,5}$/|filter2.message=No more than 5 digits!|filter2.base type=regexp|filter2.base prefix=filter3
|filter3.regexp=/^666$/|filter3.message=Don't you dare!|filter3.inverse}}}

Example: A somewhat more complicated input field accepting valid dates in the (german) format dd.mm.yyyy with the basetype datepicker, so the user can either use the date picker or insert the date directly.

{{{field|TestProp2|input type=regexp
|regexp=/^((((([01][0-9]!2[0-8])\.(0[1-9]!1[0-2]))!((29!30)\.(0[13-9]!1[0-2]))!(31\.(0[13578]!1[02])))\.\d{4})!(29\.02\.(\d\d(0[48]![2468][048]![13579][26])!([02468][048]![13579][26])00)))$/
|base type=datepicker
|date format=%d.%m.%Y
}}}

[edit] Parameters

Parameter	Support	Meaning
Standard
Depends on the base type
Type Specific
base type		The base type to be used. May be any input type that generates an html form element of type input or select (e.g. text (with or without values), listbox, datepicker) or another regexp. Defaults to text.
base prefix		Prefix for the parameters of the base type (see example)
regexp		The regular expression the input has to match to be valid. This must be given including the slashes! Defaults to /.*/, i.e. any value.
inverse		If set, the input must NOT match the regular expression to be valid. I.e. the regular expression is inverted.
or char		The OR-character to be used in the regular expression instead of \|. Defaults to !
message		The error message to be displayed if the match fails. Defaults to Wrong format! (or equivalent in the current locale)

[edit] See also

Extension:Semantic Forms Inputs

From MediaWiki.org

Contents

[edit] Description

[edit] Download instructions

[edit] Installation

[edit] Configuration parameters

[edit] Credits

[edit] Contact

[edit] Date Picker

[edit] Examples

[edit] Parameters

[edit] Combobox

[edit] Examples

[edit] Parameters

[edit] Regular Expression Filter

[edit] Examples

[edit] Parameters

[edit] See also

Views

Personal tools

Site

Search

Support

Download

Development

Communication

Toolbox