furo-ui5-combobox #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-combobox.js';
exports FuroUi5Combobox js
mixes FieldNodeAdapter

Summary: data combobox field

Description #

The furo-ui5-combobox component represents a drop-down menu with a list of the available options and a text input field to narrow down the options. It is commonly used to enable users to select an option from a predefined list. Use the function bindOptions to bind a RepeaterNode as an option list.

1
2
3
4

<furo-ui5-combobox
   fn-bind-data="--entity(*.data.description)"
   fn-bind-options="--collection(*.entities)">
</furo-ui5-combobox>

You can bind the options, or enter the options in the html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<furo-ui5-combobox 
  placeholder="Enter value" 
  fn-bind-data="--entity(*.data.description)">
	<ui5-cb-item text="Item 1"></ui5-cb-item>
	<ui5-cb-item text="Item 2"></ui5-cb-item>
	<ui5-cb-item text="Item 3"></ui5-cb-item>
</furo-ui5-combobox>

<furo-ui5-combobox 
  value-state="Success"
  fn-bind-data="--entity(*.data.item1)">
	<ui5-cb-item text="Item 1"></ui5-cb-item>
	<ui5-cb-item text="Item 2"></ui5-cb-item>
	<ui5-cb-item text="Item 3"></ui5-cb-item>
</furo-ui5-combobox>

<furo-ui5-combobox 
  value-state="Warning"
  value="Item 2" 
  fn-bind-data="--entity(*.data.item2)">
	<ui5-cb-item text="Item 1"></ui5-cb-item>
	<ui5-cb-item text="Item 2"></ui5-cb-item>
	<ui5-cb-item text="Item 3"></ui5-cb-item>
</furo-ui5-combobox>

Attributes and Properties #

activeFieldBinding #

default: false

Flag to indicate if a field is attached Default: false

displayFieldPath #

default: 'display_name'

Defines the field path that is used from the bound RepeaterNode (bindOptions) to display the option items. Point-separated path to the field E.g. data.partner.display_name default: display_name This attribute is related to the option list

descFieldPath #

default: 'id'

Defines the field path that is used from the bound RepeaterNode (bindOptions) to display the additional description of the option items. Point-separated path to the field E.g. data.partner.id default: id This attribute is related to the option list

wait #

default: 250

Debounce time in milliseconds Default value: 250

Events #

search-requested #

at-search-requested → value

Fired when typing in input (debounced, default 250ms)

options-updated #

at-options-updated → optionNodeList

Fired after the option list was rebuilt.

selection-change #

at-selection-change → selectedOption

Fired when selection is changed by user interaction

furo-value-changed #

at-furo-value-changed → selectedOption

Fired after the field value was changed.

Methods #

readAttributes #

readAttributes() ⟹ void

* → fn-read-attributes

Reads the attributes which are set on the component dom. those attributes can be set. value-state, required,readonly,disabled, value-field-path, display-field-path Use this after manual or scripted update of the attributes.

bindData #

bindData(fieldNode FieldNode ) ⟹ boolean

FieldNode → fn-bind-data

Overridden bindData of FieldNodeAdapter

• fieldNode
  
  

bindOptions #

bindOptions(repeaterNode `` ) ⟹ void

`` → fn-bind-options

Here a RepeaterNode can be connected to the component as an option list.

• repeaterNode
  
  

onFnaFieldStateChanged #

onFnaFieldStateChanged(state `` ) ⟹ void

`` → fn-on-fna-field-state-changed

set the value state

• state