furo-type-renderer

furo-type-renderer #

@furo/data v2.18.0
import '@furo/data/src/furo-type-renderer.js';
exports FuroTypeRenderer js
exports <furo-type-renderer> custom-element-definition
superclass LitElement
mixes FBP
summary dynamic type rendering

The furo-type-renderer is used to display type specific data. It uses display as default context and will warn you on the console if the requested context-[type-name] does not exist or was not imported.

There is a standard set of display components @furo/ui5/src/standard-type-renderers for rendering the individual types.

The standard ui5 set can be integrated with the import

  • import ‘@furo/ui5/src/standard-type-renderers/display-registry.js’.

The standard material set can be integrated with the import

  • import ‘@furo/data-ui/src/standard-type-renderers/display-registry.js’.

If you want to implement an individual display of a type, you need your own context-[type-name] component and import it.

for repeated fields you should write your own context-[type-name]-repeated component and import it. If no context-[type-name]-repeated exists, the renderer will use the display-[type] component as fallback and display it repeatedly, this is ok for a lot of cases.

Naming convention # 

display-google-type-timeofday
------- ---------------------
   |             |
context      type-name

# examples:
cell-string
celledit-string
display-string
yourcontext-string

The method to evaluate the renderer is built as following:

context-[(package.type).replaceAll('.', '-').toLocaleLowerCase()]

Basic Usage # 

1

  <furo-type-renderer fn-bind-data="--dao(*.data.fieldname)"></furo-type-renderer>

Writing your own renderer #

The only API you need to implement in your component is the bindData() method. You just have to follow the naming convention for your renderer.

Attributes and Properties #

context #

context string default: 'display'

Set the context if you need another then display. Prebuilt context renderers exist for display, cell, celledit.

disabled #

disabled Boolean

A Boolean attribute which, if present, means this field is displayed in disabled state.

Methods #

bindData #

bindData(fieldNode FieldNode ) ⟹ void

FieldNode → fn-bind-data

Bind a fieldnode of any type

  • fieldNode Fieldnode of any type

focus #

focus() ⟹ void

* → fn-focus

forward the focus to the created element