furo-ui5-reference-search #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-reference-search.js';
exports FuroUi5ReferenceSearch js
exports <furo-ui5-reference-search> custom-element-definition
superclass LitElement
mixes FBP
mixes FieldNodeAdapter

Summary: furo ui5 data reference search

Description #

The furo-ui5-reference-search is a search input field with the capability to open and extended search component.

Bound data must fullfill the furo.Reference signature. The service, deeplink,… is taken from the spec of your field. Do not forget to specify.

default usage

1
2
3

  <furo-ui5-reference-search
  fn-bind-data="--data(*.is_person)"
  ></furo-ui5-reference-search>

usage with an extended searcher

1
2
3
4

  <furo-ui5-reference-search
  extended-searcher="country-filter"
  fn-bind-data="--data(*.is_person)"
  ></furo-ui5-reference-search>

usage example for a non default response

1
2
3
4
5
6
7

  <furo-ui5-reference-search
  extended-searcher="contact-filter"
  search-response-path="xx_entities"
  value-field-path="data.xx_id"
  display-field-path="data.xx_display_name"
  fn-bind-data="--data(*.is_person)"
  ></furo-ui5-reference-search-labeled>

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

If your type has a reference type signature (‘id’,‘display_name’, ’link’), the service, and initial deep link is extracted from the link part of your type.

If you bind a scalar field, the value which is set in ‘valueFieldPath’ will be set.

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

Specs #

Define a proper default value on the reference type.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

link:
type: furo.Link
description: HTS for the initial search (the default works on root resources only)
__proto:
   number: 3
__ui: null
meta:
  default: |
    {
         "rel": "list",
         "href": "/contacts",
         "method": "GET",
         "type": "contact.Contact",
         "service": "contact.Contacts"
     }    
  placeholder: ""
  hint: ""
  label: contact.Reference.link.label
  options:
    flags: []
    list: []
  readonly: false
  repeated: false
  typespecific: null

API of an extended searcher #

Searcher Methods #

The only method you have to implement is htsIn. The reference-search will pass its own hts to the extended searcher. A call on qpIn on the searcher will also pass the resulting hts to the extended searcher.

Extended Searcher Events #

Fire a record-selected to set the item on the reference-search. Fire a escape-filter-panel to close the extended search.

Examples #

Minimal example #

1
2
3
4
5

<furo-form-layouter four="">
  <furo-ui5-reference-search 
    fn-bind-data="--entityReady(*.owner)">
  </furo-ui5-reference-search>
</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 
  fn-bind-data="--entityReady(*.owner)" 
  extended-searcher="demo-extended-searcher" 
  min-term-length="1">
</furo-ui5-reference-search>

Attributes and Properties #

service #

service string default: ''

setter for the service

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 extended 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.

maxItemsToDisplay #

max-items-to-display number default: 8

The maximal number of items to display.

This value will be set as page-size query-param for the backend.

If the response contains hts information with rel next a “load more” button will be displayed at the end of the list.

value #

default: { id: '', display_name: '' }

minTermLength #

min-term-length number default: 2

The minimal length of search term to trigger a search.

debounceTimeout #

debounce-timeout number default: 250

wait for this time between keystrokes to trigger a search to the service

placeholder #

placeholder string default: ''

Overrides the hint text from the specs.

Use with caution, normally the specs defines this value.

label #

label string default: ''

Overrides the label text from the specs.

Use with caution, normally the specs defines this value.

noDataText #

no-data-text string default: 'no result found'

hint text when result not found by search

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

valueState #

value-state string default: 'None'

Value State of the input field

method #

method String

Set the method. This is only needed when your service is not named “List”. This is not the http method.

required #

required reflects Boolean

Overrides the required value from the specs.

Use with caution, normally the specs defines this value.

searchOnEnterOnly #

search-on-enter-only Boolean

Enable this, to avoid the automatic triggering of “search”.

The user have to press enter to trigger the search. Min-term-length is respected.

readonly #

readonly Boolean

Overrides the readonly value from the specs.

Use with caution, normally the specs defines this value.

disabled #

disabled Boolean

Disable

busy #

busy Boolean

This is used to activate the loading indicator.

extendedSearcher #

extended-searcher String

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

Events #

item-selected #

at-item-selected → ``Object the complete item

Fired when a item was selected from the list.

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, and when a suggestion item has been selected.

Methods #

bindData #

bindData(fieldNode FieldNode ) ⟹ void

FieldNode → fn-bind-data

Binds a FieldNode to the component.

Supported types: can be a scalar type or any complex type with ‘id’,‘display_name’ signature or use the furo.Reference type.

• fieldNode
  
  

focus #

focus() ⟹ void

* → fn-focus

focuses the input field

triggerSearch #

triggerSearch(term `` ) ⟹ void

`` → fn-trigger-search

triggerSearch search for a term

• term
  
  

onFnaFieldStateChanged #

onFnaFieldStateChanged(state `` ) ⟹ void

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

set the value state

• state
  
  

readAttributes #

readAttributes() ⟹ void

* → fn-read-attributes

Reads the attributes which are set on the component dom.

Following attributes can be set:

• value-state
• value-state-message
• icon
• placeholder
• label
• required
• readonly
• disabled

Use this after manual or scripted update of the attributes.

htsIn #

htsIn(hts `` ) ⟹ void

`` → fn-hts-in

htsIn sets the HTS for the collection-agent.

This is only needed if you want to have fine grained control over the hts

• hts
  
  

qpIn #

qpIn(qp `` ) ⟹ void

`` → fn-qp-in

qpIn Use this to set query params manualy

• qp
  
  

setFilter #

setFilter(filter `` ) ⟹ void

`` → fn-set-filter

Sets the filter. Hint: use the FieldNode._base64 property to send complex objects as a filter and decode it on the server side or do btoa(JSON.stringify(FILTER))

• filter
  
  

clearResultList #

clearResultList() ⟹ void

* → fn-clear-result-list

clears the result set

Styling #

The following custom properties available for styling: