furo-ui5-select #

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

Summary: data select field

Description #

The furo-ui5-select component is used to create a drop-down list. The items inside the furo-ui5-select define the available options by using the ui5-option component. Use the function bindOptions to bind a RepeaterNode as a option list.

1
2
3
4

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

Example with options from specs #

A simple way to use the segmented button is, uising it with specified options for a string type.

Defining a type with the options may look like a big overhead, but it let you switch the UI implementation by just changing the tag name.

The labels in the demo are not translated for better readability.

Markup #

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<furo-ui5-select
  label="Use with select"
  value-state="Success"
  fn-bind-data="--daoPerson(*.sex)"></furo-ui5-select>
<furo-ui5-select
  label="Use with select"
  value-state="Success"
  fn-bind-data="--daoPerson(*.sex)"></furo-ui5-select>
<furo-ui5-text-input
  label="use with text-input"
  value-state="Success" fn-bind-data="--daoPerson(*.sex)"></furo-ui5-text-input>

Type definition #

look at fields.sex.meta.options.list

 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

name: Person
type: Person
description: Person message type
lifecycle: null
__proto:
  package: person
  targetfile: person.proto
  imports:
    - google/protobuf/field_mask.proto
  options:
    go_package: github.com/eclipse/eclipsefuro-web/furo-specs/dist/pb/person;personpb
    java_multiple_files: "true"
    java_outer_classname: PersonProto
    java_package: com.example.tutorial.person
fields:
  sex:
    type: string
    description: sex
    __proto:
      number: 8
    __ui: null
    meta:
      default: female
      placeholder: ""
      hint: ""
      label: sex
      options:
        flags: []
        list: # set the default options
          - '@type': type.googleapis.com/furo.Optionitem
            display_name: person.type.sex.unknown.label
            id: unknown
            selected: false
          - '@type': type.googleapis.com/furo.Optionitem
            display_name: person.type.sex.female.label
            id: female
            selected: true
          - '@type': type.googleapis.com/furo.Optionitem
            display_name: person.type.sex.male.label
            id: male
            selected: false
      readonly: false
      repeated: false
      typespecific: null
    constraints: {}
    

Example with bindOptions #

Set the id of the selected optioin to a value which is not in the list and press load options again.

Markup #

 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
26
27
28
29
30
31
32
33
34

<furo-ui5-select
  label="by display_name"
  value-field-path="data.id"
  id-field-path="data.id"
  display-field-path="data.display_name"
  fn-bind-options="--collection(*.entities)"
  fn-bind-data="--entity(*.owner.id)"></furo-ui5-select>
<furo-ui5-select
  label="by first_name"
  value-field-path="data.id"
  id-field-path="data.id"
  display-field-path="data.first_name"
  fn-bind-options="--collection(*.entities)"
  fn-bind-data="--entity(*.owner.id)"></furo-ui5-select>
<furo-ui5-select
  label="by phone_nr"
  value-field-path="data.id"
  id-field-path="data.id"
  display-field-path="data.phone_nr"
  fn-bind-options="--collection(*.entities)"
  fn-bind-data="--entity(*.owner.id)"></furo-ui5-select>
<furo-ui5-number-input
  label="Selected option"
  fn-bind-data="--entity(*.owner.id)"></furo-ui5-number-input>
</furo-form-layouter>
<!-- this data object contains the list -->
<furo-data-object
  type="person.PersonCollection"
  @-object-ready="--collection"
  fn-inject-raw="--response"></furo-data-object>
<!-- this data object contains the field, you want to update -->
<furo-data-object
  type="task.Task"
  @-object-ready="--entity"></furo-data-object>

Attributes and Properties #

activeFieldBinding #

default: false

Flag to indicate if a field is attached Default: false

idFieldPath #

default: 'id'

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

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

valueFieldPath #

default: 'id'

Defines the field path that is used to update the bound component if the user has selected an option. Point-separated path to the field Must be set if a data binding is specified. default: id This attribute is related to the option list. optionList[selected].valueFieldPath ==> bound FieldNode

boundFieldIdPath #

default: 'id'

Defines the id field path of the bound FieldNode. Point-separated path to the field Must be set if a data binding is specified with a complex type. default: id This attribute is related to the bound FieldNode.

Events #

options-updated #

at-options-updated → optionNodeList

Fired after the option list was rebuilt.

item-selected #

at-item-selected → selectedOption

Fired when the item of the dropdown list is selected.

furo-value-changed #

at-furo-value-changed → selectedOption

Fires the field value when it changes.

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.

bindOptions #

bindOptions(repeaterNode `` ) ⟹ void

`` → fn-bind-options

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

• repeaterNode
  
  

setOptions #

setOptions(arr *rawJson* ) ⟹ boolean

→ fn-set-options

inject raw data as options

• arr
• rawJson raw data array
  
  

bindData #

bindData(fieldNode FieldNode ) ⟹ boolean

FieldNode → fn-bind-data

Overridden bindData of FieldNodeAdapter

• fieldNode
  
  

onFnaFieldStateChanged #

onFnaFieldStateChanged(state `` ) ⟹ void

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

set the value state

• state
  
  

selectOptionById #

selectOptionById(id * ) ⟹ void

* → fn-select-option-by-id

Selects an option by id. The id field must be comparable.

• id must match the data