furo-ui5-reference-search-labeled

furo-ui5-reference-search-labeled #

@furo/components v1.0.0-rc.7
import '@furo/components/src/furo-ui5-reference-search-labeled.js';
exports FuroUi5ReferenceSearchLabeled js
exports <furo-ui5-reference-search-labeled> custom-element-definition
superclass LitElement
mixes FBP

Summary: labeled input field

Examples #

Minimal example # 

1
2
3
4
5

<furo-form-layouter four="">
  <furo-ui5-reference-search-labeled 
    fn-bind-data="--entityReady(*.owner)">
  </furo-ui5-reference-search-labeled>
</furo-form-layouter>

Example with extended searcher #

To add the extended searcher, just set the name of the extended searcher component on the field extended-searcher.

The min-term-length in this demo is set to 1 character.

1
2
3
4
5

<furo-ui5-reference-search-labeled 
  fn-bind-data="--entityReady(*.owner)" 
  extended-searcher="demo-extended-searcher" 
  min-term-length="1">
</furo-ui5-reference-search-labeled>

Description #

furo-ui5-reference-search-labeled The furo-ui5-reference-search-labeled is a composition to easily use a complete input field with label according to the design specification of SAP Fiori Design System.

Attributes and Properties #

service #

service string default: ''

the service name

label #

label string default: ''

the label for the data-reference-search

extendedSearcher #

extended-searcher string default: ''

Define the extended searcher. Do not forget to import the searcher you want to use.

disableSearchList #

disable-search-list boolean default: false

A Boolean attribute which, if present, means this field can not be searched.

This is very useful when you want enforce the usage of the extended search

icon #

icon string default: 'search'

Use this attribute to set a custom icon for your searcher

searchResponsePath #

search-response-path string default: 'entities'

Path to the node in the response value which contains the array with the selection items. By default this goes to entitites

valueFieldPath #

value-field-path string default: 'data.id'

Path to response value item which is used for the id. By default this goes to data.id

displayFieldPath #

display-field-path string default: 'data.display_name'

Path to selection value node which is used for the display. By default this goes to data.display_name

extendedValueFieldPath #

extended-value-field-path string default: 'data.id'

Path to response value item of the exteded search which is used for the id. By default this goes to data.id. Only needed when your extended searcher does not have the id, display_name signature in the response.

extendedDisplayFieldPath #

extended-display-field-path string default: 'data.display_name'

Path to response value item of the exteded search which is used for the display. By default this goes to data.display_name. Only needed when your extended searcher does not have the id, display_name signature in the response.

placeholder #

placeholder

Overrides the hint text from the specs. Use with caution, normally the specs defines this value.

disabled #

disabled

A Boolean attribute which, if present, means this field cannot be edited by the user.

readonly #

readonly



required #

required

A Boolean attribute which, if present, means this field is required and marked with *.

Methods #

focus #

focus(options Object ) ⟹ void

Object → fn-focus

Focuses the underlying ui5 input element

bindData #

bindData(fieldNode FieldNode ) ⟹ void

FieldNode → fn-bind-data

Orchestrates the data field connection to the inside

  • fieldNode

setFilter #

setFilter(filter `` ) ⟹ void

`` → fn-set-filter

sets the filter to the inner furo-ui5-reference-search

  • filter