Multi select
Allows users to select multiple items at a time from a list of items.
Items
Item lookup mode: | The method used to populate the selection list. {Start Empty | Items From Service | Items From Static List | Items From Config Option} |
SelectItemsLookupMode |
List items service: | Provides the selection list based on the service input data value when the Item lookup mode is Items From Service. |
|
Service input data: | Provides the input data to the service that populates the selection list when the Item lookup mode is Items From Service. | ANY |
Ignore input data changes: | Disable the automatic service call when the service input data changes. | Boolean |
Item input data: | A business object list that populates the selection list when the Item lookup mode is Items From Config Option. | ANY[] |
Static list: | Enter the static selection list. The strings that you enter in the value property are displayed in the selection list. When the user makes a selection, the string that is in the corresponding name property is mapped to the value property of the output object. Note: Do not specify a variable here. For a variable list, use the Items From Config Option lookup mode. | NameValuePair[] |
Item selection data: | In the optionDisplayProperty field, set the business object property to display in the selection list and to take as the selection value. If not set, the defaults are: optionValueProperty, name and optionDisplayProperty, value. | SelectDataMapping |
Output business data: | When the view is bound to a complex type, the property that the user selects is passed to the property specified in optionDisplayProperty and to the property that is bound to the view. | SelectDataMapping |
Appearance
Size: | Size-based styling for this view {Default | Large | Small} |
TextSizeStyle |
Width: | The width in px, % or em.\r\nFor example\: 50px, 20%, 0.4em. If no unit is specified, px is assumed. | String |
Label placement: | The position of the label. If you select Left, the width of the view changes. {Top | Left} |
LabelPlacement |
Label width: | The width of the label in px, % or em.\r\nFor example\: 50px, 20%, 0.4em. If no unit is specified, px is assumed. | String |
Show validation marker: | Show a validation icon and border when the view is invalid. | Boolean |
Behavior
Tab index: | The tabbing sequence index of the form view. Indices start at 1, and can be set sparsely. For example, you can use 1, 5, 10. | Integer |
Events | ||||||
On Load: |
| |||||
On Service Items: |
| |||||
On Service Error: |
| |||||
On Change: |
|
Extends:
Methods:
Inherited
addClass(name, [replaced])
Add/replace CSS class(es) for this control
Name | Type | Default | Description |
name | {string} | CSS class name(s) to add to the control. Separate class names by a space if more than one class. | |
replaced | {string} | CSS class name(s) to be replaced by the first argument. Separate class names by a space if more than one class. |
Example
Button.addClass("green"); |
appendItem(value, displayText)
Returns:
{object}
Appends an item to the selection list
Name | Type | Default | Description |
value | {ANY} | The value of the selection | |
displayText | {string} | The text to be displayed |
clearItems()
Clears the selection list
focus()
Set focus on this control
Inherited
getData()
Returns:
{Object}
Retrieve bound data associated this view/control. Only works for views/controls with bound data.
Example
var dec1 = MyDecimal.getData(); |
getHelpText()
Returns:
{string}
Get help text associated with multiselect control
getItemCount()
Returns:
{integer}
Get number of items in the list
getItemText(itemVal)
Returns:
{string}
Get the display text for a value (value must be known)
Name | Type | Default | Description |
itemVal | {ANY} | Value of item to get text for |
Examples
mltslct.getItemText("option1") // returns "Option 1" (for a selection item with value="option1" and name="Option 1") |
mltslct.getItemText(mltslct.getSelectedItems()[0]) // returns the text of the first selected item |
getItemTextAt(index)
Returns:
{string}
Get display text associated with item at specified index
Name | Type | Default | Description |
index | {integer} | Index of item/option in multiselect control |
getLabel()
Returns:
{string}
Get label associated with multiselect control
getLabelPlacement()
Returns:
{string}
Get label placement for control. NOTE: This always returns the label placement as set, to avoid ambiguity always set the label placement using "T"|"L"
getLabelWidth()
Returns:
{string}
Get label width of MultiSelect control (e.g. 50px, 20%, 2em - omitting the unit assumes px)
getSelectedIndices()
Returns:
{integer[]}
Get indices of items selected in multiselect control
getSelectedItems()
Returns:
{ANY[]}
Get values associated with items selected in multiselect control
getServiceInputData()
Returns:
{ANY}
Returns the input for the list items AJAX service
getSizeStyle()
Returns:
{string}
Gets size style of control. NOTE: This always returns the size style as set, to avoid ambiguity always set the size style using "D"|"S"|"L"
getTabIndex()
Returns:
{integer}
Get tab index for select control
getType()
Returns:
{string}
Get descriptive string representing the type of control
Inherited
hide(collapseFlag)
Hide this view/control
Name | Type | Default | Description |
collapseFlag | {boolean} | Set to true to collapse the view (equivalent to a view setting of "NONE") |
Example
MyView.hide(); |
Inherited
isBound()
Returns:
{boolean}
Indicates bound status of control.
Inherited
isEnabled()
Returns:
{boolean}
Checks if the view is enabled or not
Example
var enabled = MyView.isEnabled(); |
isLabelVisible()
Returns:
{boolean}
Get label visibility for multiselect control
Inherited
isValid()
Returns:
{boolean}
Returns the valid status as last set by the setValid() method.
Example
var valid = MyView.isValid(); |
Inherited
isVisible()
Returns:
{boolean}
Checks whether or not view is visible
Example
var visible = MyView.isVisible(); |
Inherited
propagateUpValueChange(event)
Returns:
{boolean}
Propagates value change of control up through parent views
Name | Type | Default | Description |
event | {Event} | Value change event (usually an onchange event) |
Example
MyView.propagateUp(event); |
Inherited
recalculate()
Only for formula-enabled views!
Explicitly triggers the re-evaluation of the formula
for this view (if a formula has been specified). If the view is not formula-enabled,
Explicitly triggers the re-evaluation of the formula
for this view (if a formula has been specified). If the view is not formula-enabled,
recalculate()
does nothing.Example
Text1.recalculate();
//If the formula for Text1 is: new Date().toString(), Text1 is updated to the current date/time |
reloadServiceItems(input)
Sets tab index of select control
Name | Type | Default | Description |
input | {ANY} | Data to be passed to the AJAX Service retrieving the items for the control |
removeItem(value)
Returns:
{ANY}
Remove item/option matching the value specified
Name | Type | Default | Description |
value | {ANY} | Value of item/option in multiselect control |
removeItemAt(index)
Returns:
{ANY}
Remove item at specified index
Name | Type | Default | Description |
index | {integer} | Index of item/option in multiselect control |
Inherited
setEnabled(enabled, required)
Enable/disable this view/control
Name | Type | Default | Description |
enabled | {boolean} | Enabled/read-only flag (true to enable view, false to disable/make read-only) | |
required | {boolean} | Enable/disable required field flag for control |
Example
MyView.setEnabled(false); //Make MyView read-only |
setHelpText(helptext)
Set help text for multiselect control
Name | Type | Default | Description |
helptext | {string} | Help text for the control |
setItem(idx, value, text)
Set display text of item/option at specified index
Name | Type | Default | Description |
idx | {integer} | Index to set | |
value | {ANY} | Value of item/option in multiselect control | |
text | {string} | The display text to show for the item/option |
setItemText(value, text)
Set display text of item/option matching the value specified
Name | Type | Default | Description |
value | {ANY} | Value of item/option in multiselect control | |
text | {string} | The display text to show for the item/option |
setLabel(label)
Set label for multiselect control
Name | Type | Default | Description |
label | {string} | Label for the control |
setLabelPlacement(placement)
Set label placement for control. NOTE: to avoid ambiguity always set the label placement using "T"|"L"
Name | Type | Default | Description |
placement | {string} | "T"|"TOP"=Top | "L"|"LEFT"=Left |
setLabelVisible(flag)
Set label visibility for select control
Name | Type | Default | Description |
flag | {boolean} | {true | false} Set to false to hide label |
setLabelWidth(labelWidth)
Set label width of MultiSelect control (e.g. 50px, 20%, 2em - omitting the unit assumes px)
Name | Type | Default | Description |
labelWidth | {string} | Control's label width |
setSelectedItems(value)
Set items selected in select control based on the value of the items/options
Name | Type | Default | Description |
value | {ANY} | Values (i.e. keys) of items to set selection to |
setSelectedItemsAt(array)
Set items selected in select control based on the indexes
Name | Type | Default | Description |
array | {Int} | of indexes of the items to set selection |
setServiceInputData(data)
Specifies the default input for the list items AJAX service
Name | Type | Default | Description |
data | {ANY} | Default input data for service |
setSizeStyle(style)
Sets size style of control. NOTE: to avoid ambiguity always set the size style using "D"|"S"|"L"
Name | Type | Default | Description |
style | {string} | "DEFAULT"|"DEF"|"NORMAL"|"D"=Default | "SMALL"|"S"=Small | "LARGE"|"L"=Large |
setTabIndex(tabIndex)
Sets tab index of select control
Name | Type | Default | Description |
tabIndex | {integer} | Tab indices start at 1 and may be set sparsely |
Inherited
setValid(valid, errorText)
Flag this view/control as valid or invalid
Name | Type | Default | Description |
valid | {boolean} | Valid/invalid flag (true to set view valid, false to make it invalid - which typically shows the view with "invalid" styling and indicator) | |
errorText | {string} | Validation error text to show on the invalid-styled view |
Example
MyView.setValid(false, "Please fix your data entry"); //Make MyView invalid |
Inherited
setViewData(data, createPseudoBinding)
Set/update bound data associated this view/control. Only works for views/controls with bound data.
Note: Should only be used with simple type bindings, or complex type bindings with simple type properties.
Should not be used with bindings that have properties that are lists or compext types. For complex types, set bindings using
the
Note: Should only be used with simple type bindings, or complex type bindings with simple type properties.
Should not be used with bindings that have properties that are lists or compext types. For complex types, set bindings using
the
binding.set
pattern detailed in the Knowlege Center section Binding Data and Configuration OptionsName | Type | Default | Description |
data | {Object} | Value of bound data. The type of this parameter must match the type of the bound data. | |
createPseudoBinding | {boolean} | If set to true, creates a pseudo binding if there is no current binding. |
Example
MyView.setViewData("TEST"); //Updates bound data to the string 'TEST' |
Inherited
setVisible(visible, collapse)
Show/hide this view/control
Name | Type | Default | Description |
visible | {boolean} | Visibility flag (true to show view, false to hide) | |
collapse | {boolean} | Set to true to collapse the control space when visible is set to false . |
Examples
MyView.setVisible(false, false); //Equivalent to MyView.hide() |
MyView.setVisible(false, true); // Sets visibility to "None" |
Inherited
show()
Show this view/control
Example
MyView.show(); |
Inherited
triggerFormulaUpdates([phase])
Broadcasts the expression trigger for the specified view
Name | Type | Default | Description |
phase | {int} | bpmext.ui.PHASE_NORMAL | The phase we are currently in |
Example
MyView.triggerFormulaUpdates(); |