Value Widgets

Value widgets are used to display and update single value fields (such as text, number, boolean).

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

Text Widgets

Text Editor

TextEditor provides ability to enter free text data. This widget has the following special properties:

Property	Definition	Example	Default
props.valueType	Type of value this widget should display and return	integer	text
props.dom	Additional dom properties to pass on to TextField component	{"multiline": true}	-

Code Editor

CodeEditor provides ability to enter multi-line code with syntax highlighting and autocomplete in various languages (such as java, javascript, python) using Ace editor. This widget has the following special properties:

Property	Definition	Example	Default
props.language	Programming language to use for syntax	java	javascript
props.syntaxThreshold		100000	50000
props.dom	Additional dom properties to pass on to Ace component	{"maxLines":100}	-

Markdown Editor

MarkdownEditor provides ability to enter and preview contents using Markdown language, which is stored as text. This widget has the following special properties:

Property	Definition	Example	Default
props.dom	Dom properties to pass on to wrapper div component	-	-

MarkdownWikipedia

Markdown Language

Label Editor

LabelEditor provides ability to flat values with a TextField. This widget has the following special properties:

Property	Definition	Example	Default
props.dom	Additional dom properties to pass on to TextField component	-	-

Value Display

ValueDisplay provides ability to display static values using Typography. This widget has the following special properties:

Property	Definition	Example	Default
props.dom	Additional dom properties to pass on to Typography component	-	-

Delimited Text Editor

TextToArrayEditor provides ability to edit delimited test fields as array elements (ensuring automated and correct application of delimiters). This widget has the following special properties:

Property	Definition	Example	Default
props.delimiter	Delimiter to use for joining text values	;	,

Selection Widgets

Select Editor

SelectEditor provides ability to select from a predefined list of options (either by name or as an actual list). If options have "color" attributes defined, they are also displayed with the given color. This widget has the following special properties:

Property	Definition	Example	Default
props.options	Name of the options list used for selection	status	-
props.optionValues	Actual contents of the options list used for selection	[{"id":"A"}, {"id":"I"}]	-
props.placeholder	Text to display as placeholder	Select option	-
props.clearLabel	Text to display for setting selected value as null	None	-
props.dom	Additional dom properties to pass on to Select component	-	-

Autocomplete Editor

AutoCompleteTextEditor provides a list of options to choose from, which is filtered with autocomplete feature. It is also possible to enter a value not included in the list of options to this widget. This widget has the following special properties:

Property	Definition	Example	Default
props.options	Name of the options list used for autocomplete	conditionClass	-
props.optionValues	Actual contents of the options list used for autocomplete	-	-
props.valueType	Type of value this widget should display and return	integer	text
inputProps.dom	Additional dom properties to pass on to Autocomplete component	-	-

Box Select Editor

BoxSelectEditor provides ability to select from a predefined list of options all displayed with their icons and name on screen as grid items. 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"}]	-
valueProps.size	Grid size of each displayed entry	3	-

Item Editor

ItemEditor provides ability to select id of a lookup record (such as attribute, category) from an AutoComplete drop down. This widget can load full list of records or apply a given set of filters as well. It has the same properties as multi item editor.

Item Search Editor

ItemSearchEditor provides ability to select id of a lookup record (such as product) from a searchable table of values. This widget allows filtering results and should be preferred for selecting among large number of records. It has the same properties as multi item search editor.

Schema Select Editor

SchemaSelectEditor provides ability to select path of data elements from a json schema, typically used in UI design interface. This widget has the following special properties:

Property	Definition	Example	Default
props.schemaId	ID of the json schema to use (for already created schemas)	product	-
props.schemaIdPath	Json path for selecting ID of the json schema to use from current item or object	data.schema	-
props.schemaSpec	Json schema specification to use	{"id": {"title":"ID"}}	-

If none of the schema properties are provided, this editor assumes it is used within a UI design editor and uses UI item's id, schema and schemaPath properties to retrieve the right schema data.

Other Widgets

Switch Editor

SwitchEditor provides ability to enter true/false values with a switch. This widget has the following special properties:

Property	Definition	Example	Default
props.inline	Whether label should be above or inline with the Switch	true	false
props.defaultValue	Default to display if value is not set for the editor yet	true	false
props.dom	Additional dom properties to pass on to Switch component	-	-

Date Time Editor

DateTimeEditor provides ability to select date/time with time zone information and returns a value based on level selected (i.e. quarter, month, day or time) using DatePicker. This widget has the following special properties:

Property	Definition	Example	Default
props.level	Level of date to be selected	day	time
props.placeholder	Text to display as placeholder	Select date	-
props.dom	Additional dom properties to pass on to DatePicker component	-	-

Values expected and returned for different date levels are as follows:

Level	Value
time	Epoch time in ms
day	yyyymmdd without time zone
month	yyyymm without time zone
quarter	yyyyq without time zone

Color Editor

ColorEditor provides ability to pick colors and return their hex code using SketchPicker. This widget has the following special properties:

Property	Definition	Example	Default
props.dom	Additional dom properties to pass on to SketchPicker component	-	-

Media Editor

MediaEditor provides ability to pick images and videos using their url paths. It also allows management of media files through embedded file system editor. All media related editors share the following properties:

Property	Definition	Example	Default
props.media	Media type to display (video, image, iframe, embed, custom, auto)	video	auto
props.baseUrl	Base url to use as prefix for media paths	https://my.cdn.com	-
props.withBase	Whether baseUrl should be automatically stored with path or not	true	false
props.prefix	Prefix to add & store with file path	/images/	-
props.fileSystem	File system to connect through API gateway for file management	fs_cdn	-
props.dedicated	Whether user should access a dedicated folder on the file system	true	false
props.thumbExtensions	List of file extensions to show as thumbnails from the file system	-	['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp']
props.paginated	Whether the file list is loaded lazily in pages (in case folders include too many files)	true	false
props.controls	Whether to display controls for "video" media type	false	true
props.tag	Html tag for "custom" media type	model-viewer	-
props.attributes	Html attributes for "custom" media type	{"camera-controls": true}	-
props.maxBytes	Maximum bytes allowed for uploads	10000000	-
props.allowedExts	File extensions allowed for uploads	[jpg,png]	-
props.restrictedExts	File extensions not allowed for uploads	[exe,bat]	-
props.allowedRegex	File path regex allowed for uploads	.*-img.jpg	-
props.imageCheck	Image width, height, aspect ratio constraints (applied on selection)	{height: 100, minWidth: 200}	-

This widget also has the following special properties:

Property	Definition	Example	Default
valueProps.dom	Additional dom properties to pass on to wrapper div component	-	-
inputProps.dom	Additional dom properties to pass on to input TextField component	-	-

File Upload

FileUpload provides ability to select a local file using file browser and pass its path as the value. This widget has no special properties.