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 various alternatives for different use cases.
Basic Listers
These listers are displayed as side menus with basic filtering capabilities and action lists, typically used for managing limited number of records.
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
Single Lister
SingleLister allows displaying only a single record as an object editor screen without listing other records, typically used for managing user's own profile, environment or similar singular entries.
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:
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"}
Advanced Listers
These listers support more advanced features, such as filtering and favorites, sharing the following special configurations:
Common Configurations
Favorites & Title
Hide Title: Hides lister title as well as create button and action menus
Title Pagination: Displays pagination and page navigation next to lister title
List Favorites: Whether favorites should be listed on top of the query table for easy navigation to them
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
Default Filters
List of default values to apply as initial filters when a user views the lister. The configuration of default filters is as follows:
Path: Path for the filter value
Value: Default value for the filter, which can be a JMESPath expression if starting with = sign.
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
Priority Direction: Whether priority path is sorted ascending (asc) or descending (desc), which is used in switching
Sort API: API URL for submitting reordered list of {ids:[]} for sorting whole list of visible records using drag & drop
Disable Sorting on Filter: Whether sort API should be disabled when user has applied filters to the list
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 ()
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
Calendar Lister
CalendarLister allows displaying records with start and end dates in a monthly/weekly/daily calendar or in agenda mode.
This lister has the following special properties:
Start Date Field: Data field for the start date (defaults to createTime)
End Date Field: Data field for the end date (defaults to createTime)
Background Field: Field for coloring the date entry (defaults to #000)
Icon Field: Field for the name of icon to display
Title Field: Field for displaying text on the date entry (defaults to id)
Default View: Default view to display on calendar (defaults to month)
Views: List of views allowes on the calendar (defaults to month, day, agenda)
Event Creation Handlers: Actions used for creating new records (e.g. double click)
Custom Code Lister
CustomCodeLister allows using JSX code for rendering custom listers on the fly.
Last updated