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:

Table

Property	Definition	Example	Default
Value Type	Type of value this widget should display and return	integer	text
Is Multiline	Whether text should be displayed as multiple lines	true	false
Rows	Number of rows to display (if multiline)	5	-

JSON Schema

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:

Table

Property	Definition	Example	Default
Language	Programming language to use for syntax	java	javascript
Theme	Color theme for the editor	-	-
Max Lines	Maximum lines to display	100	-
Min Lines	Minimum lines to display	10	-
Cursor Start	Starting position for the cursor	-	-
Tab Size	Characters for tab	4	-
Enable Wrap	Whether word wrapping should be allowed	true	false
Show Gutter	Whether gutter should be displayed	false	true
Show Print Margin	Whether margin should be displayed	false	true
Highlight Active Line	Whether active line should be colored	false	true

JSON Schema

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:

Table

Property	Definition	Example	Default
DOM	Dom properties to pass on to wrapper div component	-	-

JSON Schema

MarkdownWikipedia

Markdown Language

Label Editor

LabelEditor provides ability to flat values with a TextField. This widget uses the same properties as TextEditor.

Value Display

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

Table

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

JSON Schema

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:

Table

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

JSON Schema

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:

Table

Property	Definition	Example	Default
Options Source	Name of the options list used for selection	status	-
Options List	Actual contents of the options list used for selection	[{"id":"A"}, {"id":"I"}]	-
Placeholder	Text to display as placeholder	Select option	-
Clear Option	Text to display for setting selected value as null	None	-

JSON Schema

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:

Table

Property	Definition	Example	Default
Options Source	Name of the options list used for autocomplete	conditionClass	-
Options List	Actual contents of the options list used for autocomplete	-	-
Value Type	Type of value this widget should display and return	integer	text

JSON Schema

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:

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"}]	-
Size	Grid size of each displayed entry	3	-

JSON Schema

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:

Table

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

JSON Schema

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:

Table

Property	Definition	Example	Default
Inline	Whether label should be above or inline with the Switch	true	false
Default	Default to display if value is not set for the editor yet	true	false

JSON Schema

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:

Table

Property	Definition	Example	Default
Level	Level of date to be selected	day	time
Pplaceholder	Text to display as placeholder	Select date	-
Locale	Date/time locale	-	-
Peek Next Month	Whether to show days from next month	true	false
Show Week Numbers	Whether to show week numbers	true	false
As Modal	Whether to display as modal	true	false

JSON Schema

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:

Table

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

JSON Schema

Slider Editor

SliderEditor provides ability to enter single and {min, max} range type numerical values with a slider. This widget has the following special properties:

Table

Property	Definition	Example	Default
Orientation	Whether the slider should be displayed vertical	vertical	horizontal
Size	Defines width of the slider	small	base
Min	Minimum value to allow	1	0
Max	Maximum value to allow	10	100
Step	Numerical increments on each step	2	1
Is Range	Whether slider requires 2 values or a single value	true	false

JSON Schema

Rating Editor

RatingEditor provides ability to select a numerical values with a rating indicator. This widget has the following special properties:

Table

Property	Definition	Example	Default
Orientation	Whether the rating should be displayed vertical	vertical	horizontal
Min	Minimum value to allow	1	0
Max	Maximum value to allow	10	100
Step	Numerical increments on each star	2	1
Fractions	Fractional increments allowed	0.5	-

JSON Schema

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:

Table

Property	Definition	Example	Default
Media Type	Media type to display (video, image, iframe, embed, custom, auto)	video	auto
Base URL	Base url to use as prefix for media paths	https://my.cdn.com	-
With Base	Whether baseUrl should be automatically stored with path or not	true	false
Prefix	Prefix to add & store with file path	/images/	-
File System	File system to connect through API gateway for file management	fs_cdn	-
Dedicated FS Folder	Whether user should access a dedicated folder on the file system	true	false
Thumbnail Extensions	List of file extensions to show as thumbnails from the file system	-	['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp']
Paginated	Whether the file list is loaded lazily in pages (in case folders include too many files)	true	false
Display Video Controls	Whether to display controls for "video" media type	false	true
Custom Tag	Html tag for "custom" media type	model-viewer	-
Custom Attributes	Html attributes for "custom" media type	{"camera-controls": true}	-
Max Bytes	Maximum bytes allowed for uploads	10000000	-
Allowed Extensions	File extensions allowed for uploads	[jpg,png]	-
Restricted Extensions	File extensions not allowed for uploads	[exe,bat]	-
Allowed File Paths	File path regex allowed for uploads	.*-img.jpg	-
Image Check	Image width, height, aspect ratio (numerical or "w:h") constraints (applied on selection)	{height: 100, minWidth: 200}	-
Rename Pattern	JMESPath pattern for renaming uploaded files automatically	join('', [ file.name.split('.')[0], now(), '.', file.name.split(.)[-1] ])	-

JSON Schema

File upload functionality in media editor also includes the following properties, which are typically used for bulk upload operations (in file pages inside apps):

Table

Property	Definition	Example	Default
From Root	Whether all uploads should be applied on root or the current folder	true	false
Preprocess URL	URL to call before uploading each file	request/rpc/RenameFile	-
Postprocess URL	URL to call after uploading each file	request/rpc/RegisterFile	-
Preprocess Batch URL	URL to call before uploading all selected files (can return "groups" or "files" array)	request/rpc/RenameFiles	-
Postprocess Group URL	URL to call after uploading each group of files	request/rpc/RegisterFilesByGroup	-
Postprocess Batch URL	URL to call after uploading all selected files	request/rpc/RegisterFiles	-
Output Contents	UI to display at the end of upload operation (e.g. displaying successful, failed images)	[ {ui: {props: {} } } ]	-

JSON Schema

This widget also has the following special properties:

Table

Property	Definition	Example	Default
Value DOM	Additional dom properties to pass on to wrapper div component	-	-
Input DOM	Additional dom properties to pass on to input TextField component	-	-

JSON Schema

File Upload

FileUpload provides ability to select a local file using file browser and pass its path as the value. This widget also allows importing records from a file onto the current record with the following special properties:

Table

Property	Definition	Example	Default
Enable Import	Whether widget should import data or not	-	false
Import as Base64	Imports file as a data URL, typically used for uploading media files or documents	-	false
Import Extensions	List of extensions that should be allowed for import	-	csv, json, jsonl, ndjson, xml, xlsx, xls (if not base64)

JSON Schema