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
  • Menu Lister
  • Grouped Lister
  • Nested Lister
  • Query Table Lister
  • List Columns
  • Main & Extra Filters
  • Tab Filter
  • Handlebars Lister
  • Board Lister
  • Gantt Lister
  1. Design
  2. User Interface
  3. UIs

Listers

Different lister types allow listing and editing data with different characteristics and size.

PreviousUIsNextWidgets

Last updated 2 months ago

A lister is a combination of a list of records and an editor for creating, editing and deleting each record.

While it is possible to implement new lister types, Rierino already includes 5 alternatives for different use cases:

Menu Lister

MenuLister provides a standard listing of all records with an inline editor for selected item.

This lister does not have any special configurations.

Grouped Lister

GroupedLister provides a listing of all records that are grouped under one or more levels.

This lister has the following special properties:

  • Group By: Json path for field(s) to group listed records by

Nested Lister

NestedLister provides a tiered listing of lazy loaded records, using parent-child relations, with an inline editor for selected item.

This lister has the following special properties:

  • Parent: Json path for field(s) to nest records by

Query Table Lister

QueryTableLister is a relatively more sophisticated lister type, which allows filtering of large data sets and listing of results in a table format, with a pop-up editor for selected item.

This lister has the following special configurations:

  • Selectable: Whether multiple rows can be selected to take bulk actions

List Columns

These configurations define details of columns displayed on a query based table lister.

  • Title: Title of the column

  • Path: Json path of the column data

  • Widget: Widget for displaying column values (e.g. img)

  • Properties: Properties to pass on to column widget (e.g. baseUrl)

  • Column Properties: Properties to pass on to table column object ()

A typical use case for setting a column as hidden is id columns, which are required for making a list selectable even when it is not preferred to display an id column.

Main & Extra Filters

These configurations define details of filters applicable for a query based table lister.

  • Path: Path for the filter value

  • Widget: Widget for displaying filter (e.g. TextFilter)

  • Properties: Properties to pass on to filter widget (e.g. label, shortText, width)

Tab Filter

It is also to add a tab to query table lister, which allows switching between different sub-sets of lists easier (e.g. grouped by state). The configuration of tab filter is as follows:

  • Path: Path for the filter value

  • Option Values: List of id, name pairs for listing tabs and applying the filter value

Handlebars Lister

allows building highly customized listers using handlebars template and custom events.

This lister has the following special properties:

  • Template: Handlebars template to render lister page.

Handlebars lister allows use of a number of custom events (such as for displaying details of a specific record. To call a custom event, the following code can be used (e.g. as an onclick call):

document.getElementById('{{@root.hbUUID}}').dispatchEvent(new CustomEvent( 'rie-call', { 'detail': {'eventName': '[EVENT]', 'params':[PARAMS]} } ))

Where [EVENT] and applicable [PARAMS] are as follows:

Event
Description
Params

select

Selects a specific record and displays its object editor

{"id": [ID to display] }

new

Creates a new record

-

refresh

Refreshes current records

-

set

Updates current state data, typically used for updating pagination or managing custom state data

{"pagination":{"pageSize": 10, "page": 2}}

filter

Applies current filters and pagination to update set of records

{"status": "A"}

Board Lister

BoardLister allows using kanban-style board functionality, typically used for managing tasks and status updates, allowing drag & drop functionality to move records between columns for status changes.

This lister has the following special properties:

  • Name, Description, Image, Tags: Path of the name, description, image and tags fields to display

  • Column Path: Json path for assigning records to columns

  • OptionList / Options: List of possible column values and labels

Gantt Lister

GanttLister allows using gantt chart style functionality, typically used for managing activities with start and end dates, allowing editing date ranges of records through drag and drop.

Thislister has the following special properties:

  • Name, Start Path, End Path, Type Path, Progress Path: Path for the related field to display on gantt chart

  • Length Unit: Scale displayed on the gantt chart (e.g. day, week, month, year)