Extension:Semantic Forms Inputs

Description
Semantic Forms Inputs is an extension to MediaWiki that provides additional input types for Semantic MediaWikis that use the Semantic Forms extension.

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.

Download instructions
Download released versions from Semantic Forms Inputs at Google Code.

You can get the current development code using Subversion:

Documentation for the development version can be found at Extension:Semantic_Forms_Inputs/alpha

There is a version history available.

Installation
Having MediaWiki (version 1.16 or higher), Semantic MediaWiki (version 1.5.4 or higher) and Semantic Forms (2.0.8 or higher) installed is a precondition for the Semantic Forms Inputs extension; the code will not work without it. Lower versions might work but are not tested.

If you upgrade from a previous version, be aware that for the date picker the format of several parameters has changed!

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');

Configuration parameters
You can change the settings of the Semantic Forms Inputs extension by placing new settings in your LocalSettings.php file, below the inclusion of SemanticFormsInputs.php.

You can find all the current settings in the file SFI_Settings.php.

Date picker
Input type: datepicker

The date picker lets a user pop up a graphical calendar and choose a date from it. The calendar is generated entirely via script and can be navigated without any page refreshes. It always returns dates in the format yyyy/mm/dd, so they can directly be used as property values. You can tweak the appearance of the calendar by changing or overriding the CSS rules of the jQuery library.

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

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

Time picker
Input type: timepicker

The time picker lets a user pop up a menu of hours and minutes and choose a time from it. You can tweak the appearance of the time picker by changing or overriding the CSS rules of the jQuery library and/or the SFI time picker stylesheet.

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

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

DateTime picker
Input type: datetimepicker

The datetime picker is a combination of the Date picker and the  Time picker. It presents the datepicker and timepicker inputs side by side and returns one combined value in the format "yyyy/mm/dd hh:mm".

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

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

Parameters
The parameters are the same as for the component inputs, i.e. for datepicker and timepicker combined. Exceptions are given below:

Menuselect
Input type: menuselect

The menuselect input type lets a user pop up a menu with submenus and choose an entry from it. To use the menuselect you have to pass the menu structure as an unordered list. If you use wiki-internal links, the link text will be shown in the menu while the name of the target article will be sent back to the form.

This input type is intended to display menus of modest dimensions. It is not intended for monsters with hundreds of entries in dozens of submenus. You have been warned.

You can tweak the appearance of the menuselect by changing or overriding the CSS rules of the jQuery library and/or the SFI menuselect stylesheet.

If you need to use the pipe symbol (|) in the structure, you have to replace it by | .

Examples
Example: A field that uses a menuselect with all parameters set to their default values

Example: A field that generates the menu structure from semantic data. The Semantic Treeview extension must be installed for this to work.

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 Regular Expressions 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.

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.)

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.

Credits
The 'datepicker' input uses the [http://developer.yahoo.com/yui/ Yahoo! User Interface (YUI)] Javascript library.

The 'simpledatepicker' input uses the jQuery and jQuery UI Javascript libraries.

Button icons for 'datepicker' and 'simpledatepicker' are derived from the Mini Icons 2 icon set from brandspankingnew.net. See the relevant article on brandspankingnew.net

Contact
Bugs should preferably be reported on the Wikimedia bug tracker.

Comments, questions and suggestions should be sent or posted to:
 * the Semantic Mediawiki User mailing list (preferred)
 * the Semantic Forms Inputs discussion page
 * the author