MultipleSelector
value type: any[]The MultipleSelector block is a drop down selector that allows a user to select multiple values from a set of options.
The options for the selector can be provides as either an array of primitive values (Strings, numbers, booleans or dates), or as an array of label-value pairs, where the label is a string, and the value can be of any type, including objects like dates and arrays.
Other selector blocks are
ButtonSelector,CheckboxSelector,RadioSelectorandSelector.
Block
Select items
State
block_id: []
Block Setup
id: block_id
type: MultipleSelector
properties:
options:
- label: First
value: 1
disabled: false
filterString: null
style: null
- label: Second
value: 2
disabled: false
filterString: null
style: null
Settings
Examples
Listing options from database search
Search
id: example_selector
type: MultipleSelector
requests:
- id: example_search
type: MongoDBAggregation
connectionId: companies
properties:
pipeline:
- $search:
compound:
should:
- wildcard:
query:
_string.concat:
- '*'
- _state: search_input
- '*'
path:
- _id
- company_name
allowAnalyzedField: true
- $addFields:
score:
$meta: searchScore
- $sort:
score: -1
- $limit: 50
- $project:
_id: 0
value: $_id
label:
$concat:
- $_id
- ' - '
- $ifNull:
- $company_name
- ''
properties:
placeholder: Search
options:
_array.concat:
- _if_none:
- _state: example_options
- []
- _if_none:
- _request: example_search
- []
label:
disabled: true
events:
onChange:
- id: set_state
type: SetState
params:
example_options:
_mql.aggregate:
'on':
_array.concat:
- _state: example_options
- _request: example_search
pipeline:
- $match:
value:
$in:
_state: example_selector
onSearch:
debounce:
ms: 500
try:
- id: set_state
type: SetState
params:
search_input:
_event: value
- id: perform_search
type: Request
params: example_search
MultipleSelector JSON Schema Definition
type: object
properties:
events:
additionalProperties: false
properties:
onChange:
description: Trigger actions when selection is changed.
type: array
onSearch:
description: >-
Trigger actions when input is changed. 'value' is passed to the _event
operator to be used in actions such as search queries.
type: array
type: object
properties:
additionalProperties: false
properties:
allowClear:
default: true
description: Allow the user to clear the selected value, sets the value to null.
type: boolean
autoFocus:
default: false
description: Autofocus to the block on page load.
type: boolean
clearIcon:
default: CloseCircleOutlined
description: >-
Name of an Ant Design Icon or properties of an Icon block to customize
icon at far right position of the selector, shown when user is given
option to clear input.
type:
- string
- object
disabled:
default: false
description: Disable the block if true.
type: boolean
inputStyle:
description: Css style to applied to input.
type: object
label:
additionalProperties: false
description: Label properties.
properties:
align:
default: left
description: Align label left or right when inline.
enum:
- left
- right
type: string
colon:
default: true
description: Append label with colon.
type: boolean
disabled:
default: false
description: Hide input label.
type: boolean
extra:
description: Extra text to display beneath the content - supports html.
type: string
extraStyle:
description: Css style to applied to label extra.
type: object
feedbackStyle:
description: Css style to applied to label feedback.
type: object
hasFeedback:
default: true
description: >-
Display feedback extra from validation, this does not disable
validation.
type: boolean
inline:
default: false
description: Render input and label inline.
type: boolean
span:
description: Label inline span.
type: number
title:
description: Label title - supports html.
type: string
type: object
options:
default: []
oneOf:
- description: >-
Options can either be an array of primitive values, on an array of
label, value pairs - supports html.
items:
type: string
type: array
- description: >-
Options can either be an array of primitive values, on an array of
label, value pairs.
items:
type: number
type: array
- description: >-
Options can either be an array of primitive values, on an array of
label, value pairs.
items:
type: boolean
type: array
- description: >-
Options can either be an array of primitive values, on an array of
label, value pairs.
items:
properties:
disabled:
default: false
description: Disable the option if true.
type: boolean
filterString:
description: >-
String to match against when filtering selector options
during. If no filterString is provided the filter method
matches against options.label.
type: string
label:
description: Value label shown to user - supports html.
type: string
style:
description: Css style to applied to option.
type: object
value:
description: Value selected. Can be of any type.
oneOf:
- type: string
- type: number
- type: boolean
- type: object
- type: array
required:
- value
type: object
type: array
optionsStyle:
description: Css style to applied to option elements.
type: object
placeholder:
default: Select item
description: Placeholder text inside the block before user selects input.
type: string
selectedIcon:
default: CheckOutlined
description: >-
Name of an Ant Design Icon or properties of an Icon block to customize
icon showing when a selection is made in the drop-down list.
type:
- string
- object
showArrow:
default: true
description: Show the suffix icon at the drop-down position of the selector.
type: boolean
size:
default: default
description: Size of the block.
enum:
- small
- default
- large
type: string
suffixIcon:
default: DownOutlined
description: >-
Name of an Ant Design Icon or properties of an Icon block to customize
at the drop-down position of the selector.
type:
- string
- object
title:
description: Multiple selector label title - supports html.
type: string
type: object