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:

Property	Definition	Example	Default
props.valueType	Type of value this widget should display and return	integer	text
inputProps.dom	Additional dom properties to pass on to TextField component used for new value entries	-	-
valueProps.dom	Additional dom properties to pass on to Chip component used for listing current entries	-	-

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:

Property	Definition	Example	Default
props.options	Name of the options list used for selection	conditionClass	-
props.optionValues	Actual contents of the options list used for selection	[{"id":"1"}]	-
props.placeholder	Text to display as placeholder	Select option	-
props.dom	Additional dom properties to pass on to Select component	-	-

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:

Property	Definition	Example	Default
props.itemLabel	Json path (or JMES pattern) to name field to display as label in drop down	data.main.name	name or data.name
props.itemTooltip	Json path (or JMES pattern) to description field to display as tooltip in drop down	data.main.description	description or data.description
props.itemIcon	Json path (or JMES pattern) to icon name field to display in drop down	data.main.icon	-
props.itemGroup	Json path (or JMES pattern) to a field for grouping values by in drop down	data.domain	-
props.valueType	Type of value this widget should display and return	integer	text
inputProps.dom	Additional dom properties to pass on to Autocomplete component	-	-

Multi Item Search Editor

ItemSearchEditor 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:

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

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:

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

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:

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

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:

Property	Definition	Example	Default
valueProps.widget	Widget to use for a single column table	TextEditor	-
valueProps.widgetProps	Extra properties to pass on to single column table	{"source": "category"}	-
valueProps.contents	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"} ]	-
valueProps.fieldProps	Properties to pass on to all table columns (when contents is undefined)	-	-

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:

Property	Definition	Example	Default
props.tableFields	List of Json paths to display as table columns	[{"path":"name", "widget": "TextEditor"}]	-
props.uiDesign.tabs	Tab contents of displayed editor for row editing	[{"tab":"DEFINITION"}]	-
props.uiDesign.title	Title to display on object editor	Details	-
props.uiDesign.titleIcon	Title to display on object editor	edit	-

Grid Editor

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

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

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:

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

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:

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

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:

Property	Definition	Example	Default
valueProps.dom	Additional dom properties to pass on to div encapsulating each image	-	-
inputProps.dom	Additional dom properties to pass on to TextField for entering image paths	-	-

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:

Property	Definition	Example	Default
props.mediaPath	Json path for the media url in editor contents	imageUrl	media
props.uiDesign	Complete editor UI configurations for detail contents	{"title": "Image", "titleIcon": "media", "tabs":[{"tab":"DEFINITION"}]}	-
valueProps.dom	Additional dom properties to pass on to div encapsulating each image	-	-
inputProps.dom	Additional dom properties to pass on to TextField for entering image paths	-	-

Handlebars Preview Editor

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:

Property	Definition	Example	Default
props.sourcePartialPath	Json path for element for reading partial	data.inline	data.partial
props.sourcePreviewPath	Json path for element for reading preview	data.render	data.preview
props.componentPath	Json path for id of template component to use for data entry	data.component	component
props.disabledPath	Json path for detecting whether current data entry should be disabled	data.disable	disabled
props.contentPath	Json path for data to use in populating template from entry	data.body	content
props.minHeight	Minimum height for rendered list	100	-
props.editOnly	Whether it should be possible to change structure of contents by default	true	false
props.uiDesign	Complete editor UI configurations for editing entry contents	{"tabs":[{"tab":"DEFINITION"}]}	-

This editor loads all 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:

Property	Definition	Example	Default
props.uiDesign	Complete editor UI configurations	{"tabs":[{"tab":"DEFINITION"}]}	-
props.uiDesignRef	Editor design reference	component	-

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:

Property	Definition	Example	Default
props.attributeValueSource	Id of the UI source for populating attribute value list for attributes of lookup type	attribute_value	-
props.attributeValueLabel	Data element to use as label for the values from attribute value source	data.name.enUS	-
props.attributeValueTooltip	Data element to use as description for the values from attribute value source	data.description.enUS	-
props.attributeValueAttribute	Data element to use for selecting values of a given attribute	data.attributeId	-
props.attributeValueFilterParam	Data element from attribute value source to filter applicable attribute values on server side	status	-
props.attributeSource	Id of the UI source for populating attribute list	attribute_with_categories	-
props.attributeLabel	Data element to use as label for the attribute editor from attribute source	data.name.enUS	-
props.attributeTooltip	Data element to use as description for the attribute editor from attribute source	data.description.enUS	-
props.filterParam	Data element from attribute source to filter applicable attributes on server side	status	-
props.filterField	Data element from attribute source to filter applicable attributes locally	categories	-
props.filterPath	Data element from current root record to compare against filter field values	data.category

Multi Action Editor

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

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

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.