XWikiSelect
Version 2.1 by Guillaume Delhumeau on 2015/09/08
Summary
The XWiki select component is a widget that have the same objective than a regular select box, but styled nicely and with parameters like icons, descriptions, etc...
This is an example of use:
{{image reference="xwiki-select.png /}}
How to use
This component is usable in any Wiki page or Velocity template. For a wiki page, you need to be both inside a \{\{velocity\}\} and a \{\{html\}\} macros.
You just need to call the #xwikiSelect macro with the corresponding parameters.
- fieldName: name of the input field
- options: an array of maps describing a category of options, which contains an array of options (see example)
- defaultValue: the default value to use (could be null)
- firstIsDefaultIfDefaultNull: either if defaultValue is null, select the first option or not
- cssClass: class to add to the div (could be 'xwiki-select-small', 'xwiki-select-medium', 'xwiki-select-tall' or any other class)
Example of use
#set($options = [
{
'name': 'Category 1',
'options': [
{ 'name': 'Option 1', 'value': 'option1', 'description': 'Description of the option 1', 'icon': 'wiki', 'data': {'some-data': 'some-value'}},
{ 'name': 'Option 2', 'value': 'option2', 'description': 'Description of the option 2', 'icon': 'page'}
]
},
{
'name': 'Category 2',
'options': [
{ 'name': 'Option 3', 'value': 'option3', 'description': 'Description of the option 3', 'icon': 'check'}
]
}
])
#xwikiSelect('nameOfTheField', $options, 'option1', false, 'xwiki-select-small')
{
'name': 'Category 1',
'options': [
{ 'name': 'Option 1', 'value': 'option1', 'description': 'Description of the option 1', 'icon': 'wiki', 'data': {'some-data': 'some-value'}},
{ 'name': 'Option 2', 'value': 'option2', 'description': 'Description of the option 2', 'icon': 'page'}
]
},
{
'name': 'Category 2',
'options': [
{ 'name': 'Option 3', 'value': 'option3', 'description': 'Description of the option 3', 'icon': 'check'}
]
}
])
#xwikiSelect('nameOfTheField', $options, 'option1', false, 'xwiki-select-small')
