LogoLogo
Home
Core Platform
Core Platform
  • Introduction
    • Overview
    • Use Cases
    • Architecture
    • Built with ML & AI
    • Quick Start
  • Examples
    • Training Examples
      • API Flow Examples
      • Microservice Examples
      • UI Example
      • Exercise: Hello World API
      • Exercise: Test State
      • Exercise: Test UI
    • Exercise: To-do List
      • To-do List Runner
      • To-do List Gateway
      • To-do List UI
      • To-do List Query
  • Troubleshooting
    • Rierino Packages
    • Release Notes
    • Useful Checks
    • Error Codes
  • Devops
    • Overview
    • API Flows
      • Using the Saga Screen
      • Defining a Saga
      • Configuring Saga Steps
        • Event Step
        • Transform Step
          • Transform Classes
        • Condition Step
          • Condition Classes
        • Step Link
      • Injecting Variables
    • Microservices
      • Runners
        • Using the Runner Screen
        • Defining a Runner
        • Managing Runner Settings
        • Adding Runner Elements
        • Deploying Runners
          • Spring Runners
          • Samza Runners
          • Camel Runners
      • Elements
        • Systems
        • State Managers
          • Typical Use Cases
          • State Data Structure
          • Local States
            • In-Memory Map
            • Caffeine Cache
            • Samza Based
            • Lucene Based
            • Single File
            • Multiple Files
            • Selected IDs Map
            • Indexed Map
          • Shared States
            • MongoDB Collection
            • Jooq (SQL) Table
            • Redis Map
            • Couchbase Collection
            • Elasticsearch Index
            • Elasticsearch Joined
            • Etcd Namespace
          • Specialized States
            • CRUD Service
            • Odata Service
          • State Coordinators
            • Lazy Cache Coordinator
            • Event Store Coordinator
            • Write thru Coordinator
          • Loading Strategies
          • ID Generators
        • Listeners
        • Query Managers
          • MongoDB
          • Elasticsearch
          • Lucene
          • SQL Based
          • Odata Service
        • Handlers
          • Core Handlers
            • Write Data
            • Read Data
            • Query Data
            • Apply Rules
            • Call Rest API
            • Generate Text/Html
            • Parse Html
            • Generate Secrets
            • Orchestrate User Task
            • Perform File Operation
            • Run Shell Command
            • Send/Receive Emails
          • Custom Code Handlers
            • Run Scripts
            • Run Java Code
            • Run Java Package
          • Flow Handlers
            • Orchestrate Saga
            • Loop Each Entry
            • Run Multiple Steps
            • Buffer Payloads
            • Merge Parallel Steps
            • Log Event
            • Send Event
            • Validate Event
            • Transform Event
            • Perform DB Transaction
            • Trigger Runner Command
            • Do Nothing
            • Modify Role Data
            • Enrich Role Data
            • Convert Pulse to Journal
          • Gateway Handlers
            • Authenticate
              • No Authentication
              • State Based
              • Keycloak Based
            • Sessionize
          • Specialized Handlers
            • Apply Advanced Rules
            • Calculate Real-time Metrics
            • Score ML Models
            • Score LangChain Models
            • Service MCP Requests
            • Service A2A Requests
            • Consume Web of Things
            • Perform Text Embedding
            • Run Python Procedure
            • Generate Excel
            • Generate PDF
            • Call SOAP API
            • Integrate with Camel
        • Actions
        • Streams
          • Kafka Topic
          • CDC Feed
          • Camel Component
        • Roles
        • Generic Settings
        • Global Settings
      • Deployments
        • Defining a Deployment
        • Alternative Loaders
    • Gateway & Security
      • Gateway Servers
        • Gateway Systems
        • Gateway Channels
        • Gateway Services
        • Gateway Tokens
      • APIs
        • OpenAPI Specification
        • Response Formats
    • Administration
      • Managing Deployments
      • Sending Commands
      • Streaming Messages
      • Migrating Assets
    • Batch Tasks
      • Python Processes
      • Python Iterators
      • Python Processors
    • Pro-Code
      • Custom Handlers
      • Custom State Managers
      • Custom Query Managers
      • Custom CDC Managers
  • Design
    • Overview
    • User Interface
      • Apps
      • UIs
        • Listers
        • Widgets
          • Value Widgets
          • Array Widgets
          • Object Widgets
          • Indirect Widgets
          • Atom Widgets
        • Menus
          • Lister Menu Actions
          • Selection Menu Actions
          • Editor Menu Actions
          • Widget Menu Actions
          • Custom Menu Actions
          • RAI Menu Actions
        • Extended Scope
          • Conditional Display
          • Data Context
          • Extra Data
          • Default Item
          • Extra Events
      • Options
      • Translations
      • Icons
      • Styles
      • Components
    • API Mapping
    • Data Schema
      • Common Data
  • Configuration
    • Overview
    • Queries
      • Query Types
      • Query Platforms
        • MongoDB Queries
        • Odata Queries
        • SQL Queries
        • Elasticsearch Queries
        • Lucene Queries
        • Siddhi Queries
    • Business Rules
      • Drools Rules
    • Dynamic Handlers
  • Data Science
    • Overview
    • ML Models
      • Scheduler Platforms
        • Airflow Scheduler
    • GenAI Models
    • MCP Servers
    • Complex Event Processing
      • Siddhi Data Flows
    • Data Visualizations
    • Customizations
  • EXTENSIONS
    • JMESPath
    • Handlebars
Powered by GitBook

© Rierino Software Inc. 2025. All rights reserved.

On this page
  • Extending Components
  • Adding External Libraries
  • Web Components
  • Functions
  1. Design
  2. User Interface

Components

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

PreviousStylesNextAPI Mapping

Last updated 6 months ago

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 and button action widgets

  • Cell: Used by table editors for cell display configurations

  • DV: Used by layout editors for dashboard design

  • Editor: Used by UI editors for configuring used

  • Filter: Used by table listers for configuring query filters

Extending Components

It is possible extend the list of existing components by adding external libraries and using web components.

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

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.

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

menus
data visualization
widgets
webcomponents.org - Discuss & share web components
Web Components Introduction
324B
FastTextArea.json
Example Web Component (can be imported on Component screen)
Component Screen
Logo