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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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.
Last updated