furo-ui5-text-input

furo-ui5-text-input #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-text-input.js';
exports FuroUi5TextInput js
mixes FieldNodeAdapter

Summary: data text input field

Description #

The ‘furo-ui5-text-input’ component allows the user to enter and edit texts with data binding.

It supports all features from the SAP ui5 Input element.

You can bind any string type, like furo.fat.String type or the google.protobuf.StringValue type.

1
2
3

 <furo-ui5-text-input
    fn-bind-data="--daoCountry(*.data.name)"
 ></furo-ui5-text-input>

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 **

supported FAT attributes #

  • “readonly”:“true” set the element to readonly
  • “required”:“true” set the element to required
  • “disabled”:“true” set the element to disabled
  • “icon”:“home” set the icon
  • “placeholder”:“string” set the placeholder for the element
  • “max”:“number” set the maximum number of characters available in the input field.

supported meta and constraints #

  • readonly: true , set the element to readonly
  • placeholder:“some string” set the placeholder for the element
  • max:“number” set the maximum number of characters available in the input field.

The constraint required will mark the element as required

Methods #

bindData(fieldNode) Bind an entity field. You can use the entity even when no data was received.

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

<furo-form-layouter four>
  <furo-ui5-text-input
    fn-bind-data="--doExp(*.furo_data_text_input)"
  ></furo-ui5-text-input>
  <furo-ui5-text-input
    readonly
    fn-bind-data="--doExp(*.furo_data_text_input)"
  ></furo-ui5-text-input>
  <furo-ui5-text-input
    disabled
    fn-bind-data="--doExp(*.furo_data_text_input)"
  ></furo-ui5-text-input>
  <furo-ui5-text-input
    value-state="Success"
    placeholder="Placeholder"
    fn-bind-data="--doExp(*.furo_data_text_input)"
  ></furo-ui5-text-input>
</furo-form-layouter>

Attributes and Properties #

nativeInputAttributes #



type #

default: 'Text'



displayFieldPath #

default: 'display_name'

Defines the field path that is used from the bound RepeaterNode (bindOptions) to display the text of 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)

change #

at-change → String

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

input #

at-input → String

Fired when the value of the ui5-input changes at each keystroke, and when a suggestion item has been selected.

furo-value-changed #

at-furo-value-changed → String

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, value-state-message, icon, placeholder, required,readonly,disabled

Use this after manual or scripted update of the attributes.



onFnaFieldStateChanged #

onFnaFieldStateChanged(state `` ) ⟹ void

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

set the value state

  • state

bindOptions #

bindOptions(repeaterNode `` ) ⟹ void

`` → fn-bind-options

Here a RepeaterNode can be connected to the component as an option list. The items are displayed as suggestion items.

  • repeaterNode