Array Widgets

Array widgets are used to display and update list of value or object fields.

It is possible to extend the list and variety of array widgets, and Rierino is shipped with the following widgets:

Text Widgets

Multi Text Editor

ChipArrayEditor displays a list of values with removable Chip components. This widget has the following special properties:

Table

Property	Definition	Example	Default
Value Type	Type of value this widget should display and return	integer	text
Input DOM	Additional dom properties to pass on to TextField component used for new value entries	-	-
Value DOM	Additional dom properties to pass on to Chip component used for listing current entries	-	-

JSON Schema

Selection Widgets

Multi Select Editor

SelectArrayEditor displays a list of values selected from a predefined set of options (either by name or as an actual set). This widget has the following special properties:

Table

Property	Definition	Example	Default
Options Source	Name of the options list used for selection	conditionClass	-
Options List	Actual contents of the options list used for selection	[{"id":"1"}]	-
Placeholder	Text to display as placeholder	Select option	-

JSON Schema

Multi Item Editor

ItemArrayEditor displays a list of ids of a lookup record (such as attribute, category), with structure similar to ItemEditor. Each value is selected from an AutoComplete drop down and list of current values are displayed as Chips. This widget has the following special properties in addition to sourced widget properties:

Table

Property	Definition	Example	Default
Label Path	Json path (or JMES pattern) to name field to display as label in drop down	data.main.name	name or data.name
Tooltip Path	Json path (or JMES pattern) to description field to display as tooltip in drop down	data.main.description	description or data.description
Icon Path	Json path (or JMES pattern) to icon name field to display in drop down	data.main.icon	-
Group Path	Json path (or JMES pattern) to a field for grouping values by in drop down	data.domain	-
Value Type	Type of value this widget should display and return	integer	text
Branched	Whether source of the list is 'branched', which allows listing of entries for the current branch only	true	false
Allow Free Format	Allow entry of values not in the item list	false	true
DOM	Additional dom properties to pass on to Autocomplete component	-	-

JSON Schema

Multi Item Search Editor

ItemSearchArrayEditor displays a list of ids of a lookup record (such as product) from a searchable table of values, with structure similar to ItemSearchEditor. This widget allows filtering results and should be preferred for selecting among large number of records. It has the following special properties:

Table

Property	Definition	Example	Default
Item Source	Name of data source mapping to use for fetching list of records and details	product	-
Item Selector Path	Json path to the id field for representing selected value	id	-
Columns	List of default table column configurations	-	-
Item Selection Source	Overriding data source name to use when displaying selected value details	product-list	-
Selection Filter	Filter parameter to pass selected values with when querying from detail source	productids	-
Selection Columns	List of table column configurations for displaying selected value details	{"path":"id","title":"ID"}	-
Item List Source	Overriding data source name to use when searching for values	product-search	-
List Main & Extra Filters	List of main and extra filters for searching from list source	"main":[{"path":"name","widget":"TextFilter"}]	-
List Columns	List of table column configurations for displaying search results	{"path":"id","title":"ID"}	-

JSON Schema

Multi Item Tree Editor

TreeArrayEditor displays hierarchical list of items in a tree-like structure, allowing easy selection of records. This widget has the following special properties in addition to sourced widget properties:

Table

Property	Definition	Example	Default
Label Path	Json path (or JMES pattern) to name field to display as label in drop down	data.main.name	name or data.name
Parent Path	Json path (or JMES pattern) to parent field for creating hierarchy	data.main.parentId	parent or data.parent

JSON Schema

Multi Item Table Editor

ItemTableArrayEditor displays a table of items, allowing easy selection of records while seeing their details. This widget has the following special properties in addition to sourced widget properties:

Table

Property	Definition	Example	Default
Paginated	Whether table should be paginated or not	true	false
Page Size	Number of rows to display per page if table is paginated	20	10
Columns	Array of columns with field, key, title, default, local parameters	[{"field": "name", "title": "Name"}]	-

JSON Schema

Nested Widgets

Table Editor

TableArrayEditor displays a list of objects in table form with all columns editable inline. Column widgets are typically automatically discovered based on field data types. This widget has the following special properties:

Table

Property	Definition	Example	Default
Single Column Widget	Widget to use for a single column table	TextEditor	-
Single Column Props	Extra properties to pass on to single column table	{"source": "category"}	-
Column List	UI description of all table columns similar to grid contents, including simpler widgets (img, time, date, array, table, pattern, option) as well	[ {"path":"name", "widget":"TextEditor", "props": {}}, {"path":"image", "widget":"img"} ]	-

JSON Schema

Object Table Editor

ObjectTableArrayEditor displays a list of objects in table form with selected fields as columns. Table fields are displayed using default widgets for their data types. This widget has the following special properties:

Table

Property	Definition	Example	Default
Table Fields	List of Json paths to display as table columns	[{"path":"name", "widget": "TextEditor"}]	-
Editor Tabs	Tab contents of displayed editor for row editing	[{"tab":"DEFINITION"}]	-
Editor Title	Title to display on object editor	Details	-
Editor Icon	Title to display on object editor	edit	-

JSON Schema

Grid Editor

GridArrayEditor displays a list of objects in a Grid structure. This widget has the following special properties:

Table

Property	Definition	Example	Default
Grid Size	Size of each grid entry (out of 12 per row)	6	12
Grid List	List of grids, each with content specifications and props	[{"contents":[{"path":"name"}], "props":{"sm":6}}]	-

JSON Schema

Data Grid Editor

DataGridEditor displays a rich and interactive Excel-like grid structure, supporting features such as row grouping, pivoting and formulas. This widget has the following special properties:

Table

Property	Definition	Example	Default
Column List	List of AG Grid columns and their features	[{ "field": "quantity", "headerName": "Qty", "maxWidth": 100, "cellDataType": "number" }]	-
Show Add Row Button	Whether an add button should be displayed to allow adding rows	true	false
Height	Height of the data grid	100px	80vh
Enabled Features	Features to enable on AG Grid	{filtering: true, sideBar: true}	-

JSON Schema

AG Grid: High-Performance React Grid, Angular Grid, JavaScript Gridwww.ag-grid.com

Step Editor

StepArrayEditor is a variation of GridArrayEditor, where each entry is considered a step and visualized as such. This widget has the same special properties as the Grid Editor.

Tab Editor

TabArrayEditor displays a list of objects inside a tab panel, where adding new entries results in adding new tabs. This widget has the following special properties:

Table

Property	Definition	Example	Default
Tab Label Path	Json path for displaying as tab labels	tab	name or data.name
Grid List	List of grids for each tab, each with content specifications and props	[{"contents":[{"path":"name"}], "props":{"sm":6}}]	-

JSON Schema

Customize Editor

CustomizeArrayEditor is a special editor which displays data customizations for records, with options to add/remove applicable customizations mapping customBy attributes of records with customization ids. This widget has the following special properties:

Table

Property	Definition	Example	Default
Customization Source	Name of data source mapping to use for fetching list of customization names, types and ids	product_customization	customization
Grid List	List of grids, each with content specifications and props for customized data entries	[{"contents":[{"path":"name"}], "props":{"sm":6}}]	-

JSON Schema

Other Widgets

Multi Media Editor

MediaArrayEditor displays a list of images or videos, each represented by their relative URL path. This widget has the following special properties in addition to those listed in Media Editor:

Table

Property	Definition	Example	Default
Value DOM	Additional dom properties to pass on to div encapsulating each image	-	-
Input DOM	Additional dom properties to pass on to TextField for entering image paths	-	-

JSON Schema

Multi Media Metadata Editor

MediaMetadataArrayEditor displays a list of images or videos with metadata fields editable, each represented by their relative URL path. This widget has the following special properties in addition to those listed in Media Editor:

Table

Property	Definition	Example	Default
Media Path	Json path for the media url in editor contents	imageUrl	media
UI Design (Editor Icon, Title & Tabs)	Complete editor UI configurations for detail contents	{"title": "Image", "titleIcon": "media", "tabs":[{"tab":"DEFINITION"}]}	-
Value DOM	Additional dom properties to pass on to div encapsulating each image	-	-
Input DOM	Additional dom properties to pass on to TextField for entering image paths	-	-

JSON Schema

Handlebars Preview Editor

HandlebarsPreviewArrayEditor is used for collecting list of records while rendering each record with a Handlebars template, providing form of a web page / section builder. This widget has the following special properties in addition to sourced widget properties:

Table

Property	Definition	Example	Default
Source Partial Path	Json path for element for reading partial template in source	data.inline	data.partial
Source Preview Path	Json path for element for reading preview template in source	data.render	data.preview
Component Id Path	Json path for id of template component to use for data entry	data.component	component
Is Disabled Path	Json path for detecting whether current data entry should be disabled	data.disable	disabled
Content Path	Json path for data to use in populating template from entry	data.body	content
Min Height	Minimum height for rendered list	100	-
Edit Only	Whether it should be possible to change structure of contents by default	true	false
UI Design (Editor Icon, Title & Tabs)	Complete editor UI configurations for editing entry contents	{"tabs":[{"tab":"DEFINITION"}]}	-

JSON Schema

This editor loads all partial templates from a data source (e.g. page components). For each record in current data list, it uses a component field to identify the preview template to use and populates that template with record's content field values.

Preview Editor

EditorPreviewArrayEditor is a special editor for designing UI screens, allowing definition of list of editors to include within a grid. This widget has the following special properties:

Table

Property	Definition	Example	Default
Design Details	Complete editor UI configurations	{"tabs":[{"tab":"DEFINITION"}]}	-
Design Reference	Editor design reference	component	-

JSON Schema

Multi Attribute Editor

AttributeArrayEditor is a special component for editing a dynamic array with attribute & value / valueId fields, where list of applicable attributes are identified based on another data element. This widget has the following special properties:

Table

Property	Definition	Example	Default
Attribute Value Source	Id of the UI source for populating attribute value list for attributes of lookup type	attribute_value	-
Attribute Value Label	Data element to use as label for the values from attribute value source	data.name.enUS	-
Attribute Value Tooltip	Data element to use as description for the values from attribute value source	data.description.enUS	-
Attribute Value Attribute Field	Data element to use for selecting values of a given attribute	data.attributeId	-
Attribute Value Server Side Filter Field	Data element from attribute value source to filter applicable attribute values on server side	status	-
Attribute Source	Id of the UI source for populating attribute list	attribute_with_categories	-
Attribute Label	Data element to use as label for the attribute editor from attribute source	data.name.enUS	-
Attribute Tooltip	Data element to use as description for the attribute editor from attribute source	data.description.enUS	-
Attribute Server Side Filter Field	Data element from attribute source to filter applicable attributes on server side	status	-
Attribute Client Side Filter Field	Data element from attribute source to filter applicable attributes locally	categories	-
Attribute Filter Value Path	Data element from current root record to compare against filter field values	data.category

JSON Schema

Multi Action Editor

ActionArrayEditor is a special component for editing action items for business rules. This widget has the following special properties:

Table

Property	Definition	Example	Default
Domain	Rule domain for loading available functions	product_discount	-

JSON Schema

Array To Object Editor

ArrayToObjectEditor allows editing of a key-value array using Object Widgets, which is useful for cases where the list of keys is predefined. This widget has the same special properties as Contents Editor.