furo-ui5-textarea-input

furo-ui5-textarea-input #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-textarea-input.js';
exports FuroUi5TextareaInput js
extends src/furo-ui5-textarea-input.js
mixes FieldNodeAdapter

Summary: data textarea input field

Description #

The ‘furo-ui5-textarea-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-textarea-input
    fn-bind-data="--daoCountry(*.data.name)"
 ></furo-ui5-textarea-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
  • “placeholder”:“string” set the placeholder for the element
  • “rows”:“number” set the number of rows.
  • “growing”:“true” Enables the ui5-textarea to automatically grow and shrink dynamically with its content.
  • “show-exceeded-text”:“true” if set to true. the characters exceeding the maxlength value are selected on paste and the counter below the ui5-textarea displays their number. If set to false, the user is not allowed to enter more characters than what is set in the maxlength property.
  • “growing-max-lines”:“number” Defines the maximum number of lines that the Web Component can grow.
  • “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 #

bind-data(fieldNode) Bind a entity field. You can use the entity even when no data was received.

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

Example # 

1
2
3
4
5
6
7
8

<furo-ui5-textarea-input
  fn-bind-data="--dataObject(*.furo_data_textarea_input)"
></furo-ui5-textarea-input>
<furo-ui5-textarea-input
  rows="9"
  value-state="Information"
  fn-bind-data="--dataObject(*.furo_data_textarea_input)"
></furo-ui5-textarea-input>

Attributes and Properties #

nativeInputAttributes #



value #

default: ''



Events #

change #

at-change → text

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

input #

at-input → ``

Fired when the value of the ui5-input changes at each keystroke.

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