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](/design/user-interface/uis/menus.md) and button action widgets
* **Cell:** Used by table editors for cell display configurations
* **DV:** Used by [data visualization](/data-science/data-visualizations.md) layout editors for dashboard design
* **Editor:** Used by UI editors for configuring [widgets](/design/user-interface/uis/widgets.md) 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.
{% embed url="" %}
Web Components Introduction
{% endembed %}
**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.
{% file src="/files/DJwt16LA88aOBJedGzZI" %}
Example Web Component (can be imported on Component screen)
{% endfile %}
**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).
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.rierino.com/design/user-interface/components.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.