Difference between revisions of "SelectPanel"

From HSYCO
Jump to navigation Jump to search
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{UI Object Header}}
 
{{UI Object Header}}
−
Input field that allows the user to input a text.
+
Select panel that allows the user to select a value from a list.
 
Can be used with a [[submit]] button.
 
Can be used with a [[submit]] button.
−
 
−
Requires an ID.
 
  
 
For a tutorial on using this object, see [[Working with Forms]]
 
For a tutorial on using this object, see [[Working with Forms]]
  
−
[[File:UI Object input.png]]
+
[[File:UI Object selectpanel.png]]
  
 
== Parameters ==
 
== Parameters ==
 
*'''id''': the object's ID, used by UISets
 
*'''id''': the object's ID, used by UISets
 
*'''position''': the object's position. Use the pixels or rows and columns coordinates format
 
*'''position''': the object's position. Use the pixels or rows and columns coordinates format
 +
*'''size''': the panel's width and height
 +
*'''values''': comma-separated list of values. When selecting an item from the list, the corresponding value from this list is sent
 +
*'''labels''': comma-separated list of labels corresponding to the values. If missing, values will be shown instead
 
*'''css''': optional. Defines the CSS style for the input field
 
*'''css''': optional. Defines the CSS style for the input field
−
*'''type''': optional. Defines the input type, see [[#Input attributes|inputtype UI attribute]]
+
*'''template''': optional. Html template to be used for each item
  
 
== Syntax ==
 
== Syntax ==
−
  (input!id <position>; [<css>]; [<type>])
+
  (selectpanel!<id> <position>; <width>; <height>; <values>; <labels>; <css>; <template>)
 
E.g.
 
E.g.
−
  (input!myinput r1c1; color:blue; password)
+
  (selectpanel!myselect r1c1; 220; 224; 1,2,3; one,two,three)
 +
 
 +
{{UI Object Template}}
  
 
== UI Attributes ==
 
== UI Attributes ==
 
{{UI Object Attributes (Common)}}
 
{{UI Object Attributes (Common)}}
 
{{UI Object Attributes (Field)}}
 
{{UI Object Attributes (Field)}}
−
===Input attributes===
+
===SelectPanel attributes===
 
{| class="wikitable"
 
{| class="wikitable"
 
!Name
 
!Name
Line 30: Line 33:
 
|-
 
|-
  
−
|rowspan="3"|inputtype
+
|value
−
|input
+
|string
−
|Default behaviour
+
|Select value
 
|-
 
|-
−
|multiline
+
 
−
|for input fields with more than a line. Use the height attribute on the css parameter to set the size
+
|values
 +
|comma-separated list of strings
 +
|Select values
 
|-
 
|-
−
|password
+
 
−
|hides typed characters
+
|labels
 +
|comma-separated list of strings
 +
|Select labels
 
|-
 
|-
  
−
|value
+
|rowspan="2"|multi
−
|string
+
|true
−
|Input value
+
|Can select multiple values. The value sent to the server will be a comma-separated list of the selected values
 
|-
 
|-
−
 
+
|false
−
|maxlenght
+
|Default behaviour: only a single value can be selected
−
|number
 
−
|Specify the maximum length that can be typed
 
 
|-
 
|-
  
−
|rowspan="2"|eraseicon
+
|rowspan="2"|notnull
 
|true
 
|true
−
|Show an erase icon that can be clicked to quickly erase the input's content
+
|Value can't be null
 
|-
 
|-
 
|false
 
|false
−
|Default: no erase icon
+
|Default. Value can be null
 
|-
 
|-
  
−
|style
+
|width
−
|CSS style
+
|number of pixels
−
|Set the field's CSS style
+
|Set the panel's width
 
|-
 
|-
  
−
|helptext
+
|height
−
|string
+
|number of pixels
−
|Text to show when the field is empty
+
|Set the panel's height
 
|-
 
|-
  
−
|changedelay
+
|rowspan="2"|panel
−
|number
+
|true
−
|Sets the delay in milliseconds by which changes are detected. If the field is working in autosend mode, this value determines the delay between the last button press and the value being sent to the server
+
|Show background panel
 
|-
 
|-
−
 
+
|false
−
|validatekey
+
|Hide background panel
−
|regular expression
 
−
|A regular expression to be validated on a keypress. E.g. "[a-z]" will allow only lowercase letters
 
 
|-
 
|-
  
−
|validatevalue
+
|template
−
|regular expression
+
|html code
−
|A regular expression to be validated before the value is sent to the server. If the expression doesn't match the value, the previous value will be restored and the input will flash in red
+
|Set the item's template
 
|-
 
|-
  
 
|}
 
|}

Latest revision as of 17:12, 19 December 2014

Note  For a description and a complete list of UI Objects, see UI Objects.

Select panel that allows the user to select a value from a list. Can be used with a submit button.

For a tutorial on using this object, see Working with Forms

UI Object selectpanel.png

Parameters

  • id: the object's ID, used by UISets
  • position: the object's position. Use the pixels or rows and columns coordinates format
  • size: the panel's width and height
  • values: comma-separated list of values. When selecting an item from the list, the corresponding value from this list is sent
  • labels: comma-separated list of labels corresponding to the values. If missing, values will be shown instead
  • css: optional. Defines the CSS style for the input field
  • template: optional. Html template to be used for each item

Syntax

(selectpanel!<id> <position>; <width>; <height>; <values>; <labels>; <css>; <template>)

E.g. 

(selectpanel!myselect r1c1; 220; 224; 1,2,3; one,two,three)

Template

The template is HTML code that is applied to every item. An item's label is split into parts using the pipe character. These parts are replaced inside the template's code to form the final item's source. $<n> (with n starting from 1) is used to include each part of the item's label inside the HTML.

E.g. If the template is: 

<table><tr><td>$1</td><td>$2</td></table>

and the labels are: 

a|one,b|two

the resulting items will have the following html code: 

<table><tr><td>a</td><td>one</td></table>

and 

<table><tr><td>b</td><td>two</td></table>

UI Attributes

Common attributes

Name Value Description
pos x<x>y<y> Position specified as x/y coordinates. E.g. x-5y10
r<r>c<c> Position specified as row/column. E.g. r1c2
visible true Default. Show the object
false Hide the object
blink true | slow Blink the object at a slow speed
fast Blink the object at a fast speed
false Stop the blinking
opacity 0.0 ... 1.0 Object opacity from 0 (not visible) to 1 (fully visible)

Field attributes

Name Value Description
enabled true Field is enabled
false Field is disabled
autosend true Automatically sends the value on changes. It's the default behaviour when there are no submit objects on the page or in a parent container (if the field is inside a container).
false Won't send the value on changes. It's the default behaviour when there's a submit object on the page or in a parent container.
focus true Focus the field. Only a single object should have this attribute at "true".
false Reset focus
rollback true Restores the previously saved value.
rollbackenabled true Automatically restores the previous value on an error (if the value isn't valid or the remote request resolved in an error).
false Won't restore the value on errors.
error true Manually shows an error feedback on the field (won't modify the current field value).
false Hides the error visualization.

SelectPanel attributes

Name Value Description
value string Select value
values comma-separated list of strings Select values
labels comma-separated list of strings Select labels
multi true Can select multiple values. The value sent to the server will be a comma-separated list of the selected values
false Default behaviour: only a single value can be selected
notnull true Value can't be null
false Default. Value can be null
width number of pixels Set the panel's width
height number of pixels Set the panel's height
panel true Show background panel
false Hide background panel
template html code Set the item's template
Retrieved from "http://wiki.hsyco.com/3.4.0/index.php?title=SelectPanel&oldid=5409"