furo-ui5-segmented-button

furo-ui5-segmented-button #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-segmented-button.js';
exports FuroUi5SegmentedButton js
mixes FieldNodeAdapter

Summary: segmented button

Description #

The furo-ui5-segmented-button component represents a drop-down list. The items inside define the available options by using the furo-ui5-segmented-button component.

1
2
3


<furo-ui5-segmented-button
   fn-bind-data="--daoPerson(*.field_with_meta_options)">
</furo-ui5-segmented-button>

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


<furo-ui5-segmented-button 
  fn-bind-data="--daoPerson(*.sex)"></furo-ui5-segmented-button>
<furo-ui5-text-input 
  value-state="Success" 
  fn-bind-data="--daoPerson(*.sex)"></furo-ui5-text-input>
<furo-data-object 
  type="person.Person" 
  @-object-ready="--daoPerson"></furo-data-object>

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 #

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


<furo-form-layouter one>
  <furo-ui5-segmented-button 
    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-segmented-button>
  <furo-ui5-segmented-button 
    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-segmented-button>
  <furo-ui5-segmented-button 
    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-segmented-button>
  <furo-ui5-number-input-labeled 
    label="Selected option" 
    fn-bind-data="--entity(*.owner.id)"></furo-ui5-number-input-labeled>
</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

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

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

Events #

options-updated #

at-options-updated → optionNodeList

Fired after the option list was rebuilt

furo-value-changed #

at-furo-value-changed → {*} the value from the value-field. By default the value field is "id"

Fired when value has changed from the component inside. bubbles

item-selected #

at-item-selected → selectedOption

Fired when the toggle button was clicked. Payload: - if no option binding is active: ui5-segmented-button-item - if a RepeaterNode is bound: FieldNode

Methods #

bindData #

bindData(fieldNode `` ) ⟹ boolean

`` → fn-bind-data

Binds a FieldNode to the component.

Supported types:

fieldNode

bindOptions #

bindOptions(repeaterNode RepeaterNode ) ⟹ void

RepeaterNode → fn-bind-options

Bind a RepeaterNode that will be used to build up the option list.

Use idFieldPath and displayFieldPath if your structrure does not match the following signature:

1
2
3
4


[
  { "id": 1, "display_name": "option A"},
  { "id": 2, "display_name": "option B"}
]

repeaterNode The list with the options

readAttributes #

readAttributes() ⟹ void

* → fn-read-attributes

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

selectOptionById #

selectOptionById(val Id ) ⟹ void

Id → fn-select-option-by-id

Selects an option by id

val The id