# new Select(config)
Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:
Create the Web Component and call its init method:
const mySelect = document.createElement("a-select").init(config)
Or use the shorthand for it:
const mySelect = createSelect({
label: "Countries",
options: [
{value: "France"},
{value: "Great Britain"}
]
})
mySelect.render()
Or directly declare the config inside a container component:
const myPanel = createPanel({
title: "My panel",
items: [
{
type: "select",
options: [
{value: "France"},
{value: "Great Britain"}
]
}
]
})
myPanel.render()
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
template |
object
|
"time" - TODO: other template like "range" | "weekday" | "month" | ... |
|
options |
Array.<string>
|
Array.<object>
|
function
|
List of options or function that returns a list of options, where each option must be an object like:
|
|
optionsFilter |
function
|
<optional> |
When the options are defined by a function, you can provide a filtering function that will be executed at runtime to filter only a specific set of options, depending on the context |
multiple |
boolean
|
<optional> |
True to enable multi-select |
value |
string
|
Array.<string>
|
<optional> |
Default value |
optionsColor |
string
|
<optional> |
Default color for all options |
valueSeparator |
string
|
<optional> |
Character used to display multiple values |
inputSeparator |
string
|
<optional> |
Character used to input multiple values |
stackValues |
boolean
|
<optional> |
True to render the values one on another |
hideInput |
boolean
|
<optional> |
true (default) to automatically hide the input field after a completed search |
allowValuesNotInList |
boolean
|
<optional> |
Allow to input a value which is not in the list of options |
allowDuplicates |
boolean
|
<optional> |
Allow to input duplicate values. Default to false. |
allowClickToDelete |
boolean
|
<optional> |
Add a "cross" icon over the values to delete them. Default to false. |
allowSwitchOnOff |
boolean
|
<optional> |
Allow to click on a value to switch it on/off |
optionRenderer |
function
|
<optional> |
Custom function to render each option in the list of options |
valueRenderer |
function
|
<optional> |
Custom function to render the actual field values |
label |
string
|
<optional> |
|
fieldWidth |
string
|
<optional> |
|
labelWidth |
string
|
<optional> |
|
labelPosition |
string
|
<optional> |
left | right | top | bottom |
labelAlign |
string
|
<optional> |
left | right |
autocomplete |
boolean
|
<optional> |
Set "off" to disable |
readOnly |
boolean
|
<optional> |
|
disabled |
boolean
|
<optional> |
|
required |
boolean
|
<optional> |
|
validationFunction |
function
|
<optional> |
Async function that must return true if the value is valid, false otherwise |
margin |
string
|
<optional> |
|
padding |
string
|
<optional> |
|
display |
string
|
<optional> |
flex | inline flex |
width |
string
|
number
|
<optional> |
|
height |
string
|
number
|
<optional> |
this
Generated markup
The field is a composition of various elements:
- a div for the field label
- a div that renders the existing values (as chips, by default)
- an input field, used to filter options
- a div to display and select the options
<a-select class="a-select">
<label class="field-label"></label>
<div class="field-select">
<span class="field-select-values"></span>
</div>
<div class="field-select-options">
<span class="field-select-input"></span>
<!-- For each option -->
<div class="field-option"></div>
</div>
</a-select>
Methods
# async addValue(newValue)
Add a value to the Select field. This method does a few things:
- check for duplicate entries (and remove if not allowed)
- check for multiple entries (and exit if not allowed)
- update the field value
- reset the input field then give it focus
Parameters:
| Name | Type | Description |
|---|---|---|
newValue |
string
|
Value to add |
# getSelection() → {object|Array.<object>}
Get the selected option(s)
A single option or an array of options if multiple values are selected
object
|
Array.<object>
# getValue() → {string|Array.<string>}
Get the field value
- Returns an array of strings if the "multiple" option is true. Returns a string otherwise.
string
|
Array.<string>
# setClickToDelete(state)
Allow/forbid to click on field values to delete them
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
state |
boolean
|
true |
# setLabelPosition(position)
Set label position
Parameters:
| Name | Type | Description |
|---|---|---|
position |
string
|
"left" (default) | "right" | "top" | "bottom" |
this
# setMultiple(state)
Allow/forbid to select multiple values
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
state |
boolean
|
true |
# setValue(newValue, rawUpdateopt)
Set the field value
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
newValue |
string
|
Array.<string>
|
The new field value |
|
rawUpdate |
boolean
|
<optional> |
If true, it doesn't update the associated record and doesn't trigger "change" event |
this
# sort(order)
Sort values
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
order |
string
|
asc | "asc" or "desc" |
this
# sortByLabel(order)
Sort values according to their corresponding label
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
order |
string
|
asc | "asc" or "desc" |
this
# updateOptions(newOptions)
Update the list of options
Parameters:
| Name | Type | Description |
|---|---|---|
newOptions |
array
|
An array of object defining the field options |
Example
mySelectField.updateOptions([
{
value: "firstName",
disabled: false,
color: "#00aaee"
},
{...}
])