Components

All UI components (such as editor widgets) are defined and configured within the platform, allowing extensions as well.

Component Screen

Component definitions allow customization of entry of parameters when adding them into editors, as well as addition of custom components (e.g. implemented with web components).

Components include the following types:

• Action: Used by menus and button action widgets

• Cell: Used by table editors for cell display configurations

• DV: Used by data visualization layout editors for dashboard design

• Editor: Used by UI editors for configuring widgets used

• Filter: Used by table listers for configuring query filters

Creating Custom Components

It is possible extend the list of existing components in different ways:

Extended Editors

For editors which are frequently configured with the same list of property values (such as base URL for media editors, or code editors with AI menus), it is possible to select a core widget to extend and assign the default properties.

Hosted Editors

It is also possible to create new editors by creating custom React components, coding them directly inside the Component screen. These editors also allow using AI agents to generate the component code as per Rierino standards automatically.

External Libraries

External library dependencies can be added as a comma separated list of js file URLs in SCRIPT_URLS environment variable of the admin UI deployment.

Web Components

New widgets can be added for use in UI editors by integrating existing web components or creating new ones.

webcomponents.org - Discuss & share web componentswww.webcomponents.org

Web Components Introduction

Widgets

You can add new widget components by creating a new record in components screen with the following properties:

Property	Description	Example
remote	Set to true to indicate that this is an external component	true
tag	Web component's tag name	fast-text-area
propMap.data	Web component's attribute to pass widget data (if set to <> data is provided as inline element)	value
propMap.onChange	Web component's attribute to pass widget onChange event	onInput
propMap.onChangeEval	Web component's event variable to send to onChange function	target.value
propMap.*	Any other property to pass on to component	color=red

It is also possible to pass additional properties using component parameters (i.e. ui.props), which will be passed on to the web component using same naming.

324B

FastTextArea.json

Open

Example Web Component (can be imported on Component screen)

Listers

You can add new lister components by creating a new record in components screen with the following properties:

Property	Description	Example
remote	Set to true to indicate that this is an external component	true
tag	Web component's tag name	fast-text-area

The web components also receive all properties available to listers (e.g. onSave, onNew events), which can be used with a custom component implementation.

Functions

You can add new actions by creating a new record in components screen with the following properties:

Property	Description	Example
fn	Function name (external library must register it as a window function)	alert
title	Title to display for action	Alert
icon	Icon name to display for action	Alert

Registered window function is called with properties of the action itself (e.g. including record details).