furo-ui5-radio-button

furo-ui5-radio-button #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-radio-button.js';
exports FuroUi5RadioButton js
extends src/furo-ui5-radio-button.js
mixes FieldNodeAdapter

Summary: boolean toggle button

Description #

The ‘furo-ui5-radio-button’ component allows the user to switch true and false for Bool with data binding.

It supports all features from the SAP ui5 toggleButton element.

You can bind bool type, furo.fat.Bool type or the google.wrapper.BoolValue type.

1
2
3
4
5
6
7
8

 <furo-ui5-radio-button
    name="groupA"
    fn-bind-data="--dao(FIELDNODE)"
 ></furo-ui5-radio-button>
 <furo-ui5-radio-button
    name="groupA"
    fn-bind-data="--dao(OTHERFIELDNODE)"
 ></furo-ui5-radio-button>

Specificity #

  1. Attributes which are set in the html source will have the highest specificity and will never get overwritten by metas or fat.
  2. Attributes set in meta will have the lowest specificity and will be overwritten by attributes from fat.
meta fat html
1 10 100

supported FAT attributes #

  • “readonly”:“true” set the element to readonly
  • “disabled”:“true” set the element to disabled
  • “icon”:"" set the icon
  • “value-state”:"" set the value-state

supported meta and constraints #

  • readonly: true , set the element to readonly

The constraint required will mark the element as required

When you use at-object-ready from a furo-data-object which emits a EntityNode, just bind the field with –entity(*.fields.fieldname)

Example # 

 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-form-layouter four>
  <furo-ui5-radio-button
    fn-bind-data="--doExp(*.furo_data_checkbox_input)"
  ></furo-ui5-radio-button>
  <furo-ui5-radio-button
    readonly
    text="Override"
    fn-bind-data="--doExp(*.furo_data_checkbox_input)"
  ></furo-ui5-radio-button>
  <furo-ui5-radio-button
    disabled
    fn-bind-data="--doExp(*.furo_data_checkbox_input)"
  ></furo-ui5-radio-button>
  <furo-ui5-radio-button
    value-state="Warning"
    placeholder="Placeholder"
    fn-bind-data="--doExp(*.furo_data_checkbox_input)"
  ></furo-ui5-radio-button>
  <!-- just to be able to disable the radio again -->
  <furo-ui5-checkbox-input
    value-state="Success"
    text="Toggle"
    fn-bind-data="--doExp(*.furo_data_checkbox_input)"
  ></furo-ui5-checkbox-input>
</furo-form-layouter>

Attributes and Properties #

_previousValueState #

default: 'None'



_tmpFAT #

default: { labels: {}, value: false }



_attributesFromFNA #

default: { readonly: undefined, disabled: undefined, label: undefined, }



_constraintsFromFNA #

default: {}



_attributesFromFAT #

default: { name: undefined, // the group name label: undefined, icon: undefined, 'value-state': undefined, }



_labelsFromFAT #

default: { readonly: undefined, disabled: undefined, hidden: undefined, }



_privilegedAttributes #

default: { name: null, readonly: null, disabled: null, text: null, icon: null, 'value-state': null, }



Events #

change #

at-change → ``

Fired when the input operation has finished by pressing Enter or on focusout.

furo-value-changed #

at-furo-value-changed → Boolean

Fired when value changed

Methods #

bindData #

bindData(fieldNode FieldNode ) ⟹ void

FieldNode → fn-bind-data

Binds a FieldNode to the component.

Supported types: bool, google.protobuf.BoolValue, furo.fat.Bool

  • fieldNode

readAttributes #

readAttributes() ⟹ void

* → fn-read-attributes

Reads the attributes which are set on the component dom.



onFnaFieldValueChanged #

onFnaFieldValueChanged(val `` ) ⟹ void

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

overwrite onFnaFieldValueChanged

  • val

onFnaFieldNodeBecameInvalid #

onFnaFieldNodeBecameInvalid() ⟹ void

* → fn-on-fna-field-node-became-invalid

overwrite onFnaFieldNodeBecameInvalid function



onFnaLabelChanged #

onFnaLabelChanged(text *placeholder* ) ⟹ void

→ fn-on-fna-label-changed

overwrite onFnaLabelChanged function label is mapped to text

  • text
  • placeholder