Home

Listers

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

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

  • Priority Path: Json path in table records, which allows switching priority between 2 rows by updating their value together

  • Table Properties:

    • Scroll Help: Whether a scroll to top/bottom helper should be automatically displayed if the content grows longer than the window height.

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.

This lister 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)

Map Lister

GoogleMapsLister allows using Google Maps for listing of location based records.

This lister has the following special properties:

  • Location: Data field including lat, lng details of a record

  • Location Title: Data field to display on location of a record

PreviousUIsNextWidgets

Last updated