Object Widgets

Object widgets are used to display and update nested fields (such as main properties of a product).

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

Localized Editor

LocalizedEditor provides ability to display and enter localized (e.g. by language, currency) values as a nested object. This widget has the following special properties:

Property	Definition	Example	Default
props.options	Name of the options list used for populating locales	language	-
props.optionValues	Id-name pairs of options to list	[{"id":"en", "name": "English"}]	-
props.filterValues	List of options to allow for locale selection	[en, de]	-
props.filterValuePath	Json path for applying filter on list of locale options to display	data.regions	-
valueProps.widget	Widget to use for displaying locale specific data	ChipArrayEditor	TextEditor
valueProps.*	Properties to pass on to localized input component	{"dom":{"multiline":true}}	-

Json Editor

JsonEditor provides ultimate flexibility to display and edit complex data structures with a structured UI component and free text combination. This widget has the following special properties:

Property	Definition	Example	Default
props.switch	Whether json/text editors should be switched between or presented together	true	false

Map Editor

MapEditor provides ability to modify map type objects with a table of key-value pairs. This widget has the following special properties:

Property	Definition	Example	Default
props.keyUi	UI component configuration for the key column	{"widget": "TextEditor", "props":{}}	-
props.keyUi.preset	Whether editor should have a predefined list of key entries (uses keyUi options as the list)	true	false
props.valueUi	UI component configuration for the value column	{"widget": "TextEditor", "props":{}}	-
props.flatten	Whether editor should flatten and edit nested objects as well	true	false

Map Object Editor

MapObjectEditor provides ability to modify map type objects with a table of key-value pairs where the value is an object. This widget uses the same properties as Object Table Editor, as well as the following special properties:

Property	Definition	Example	Default
props.keyUi	UI component configuration for the key column	{"widget": "TextEditor", "props":{}}	-
props.keyUi.preset	Whether editor should have a predefined list of key entries (uses keyUi options as the list)	true	false

Contents Editor

ContentsEditor provides ability to display and edit multiple data elements. This editor only displays contents within a single grid, without any tabs or additional layouts applied. This widget has the following special properties:

Property	Definition	Example	Default
props.contents	Complete contents mapping object data paths to widgets and props, similar to grid contents	[{"path":"name", "widget": "TextEditor"}]	-

Grid Contents Editor

GridsEditor provides ability to display and edit multiple data elements. This editor displays contents within multiple grids, but without any tabs. This widget has the following special properties:

Property	Definition	Example	Default
props.grids	Complete grids mapping object data paths to widgets and props	[{"contents": [{"path":"name", "widget": "TextEditor"}]]	-

Media Metadata Editor

ContentsEditor displays an image or video with metadata fields editable, represented by its relative URL path. This widget has the following special properties in addition to those listed in Media Editor:

Property	Definition	Example	Default
props.uiDesign	Complete editor UI configurations for detail contents	{"tabs":[{"tab":"DEFINITION"}]}	-
valueProps.dom	Additional dom properties to pass on to div encapsulating the image	-	-
inputProps.dom	Additional dom properties to pass on to TextField for entering image path	-	-

Dynamic Editor

DynamicParameterEditor provides ability to use a dynamic UI, where displayed widgets and data depend on a specific data value (e.g. parameters required for a business rule). This widget has the following special properties:

Property	Definition	Example	Default
props.source	Name of data source mapping to use for fetching dynamic UI configuration	rule_basket_promotion	-
props.sourcePath	Json path in source data which specifies UI details	data.parameters.conditionParameters	-
props.idPath	Json path in current record, which is used for selecting dynamic UI entry in source	data.rule	-

Dynamic Object Editor

DynamicObjectEditor provides ability to embed and display data in the form of another ObjectEditor. It is typically used for displaying data input by another user for approval. This widget has the following special properties:

Property	Definition	Example	Default
props.refPath	Json path of editor id	data.type	-
props.ref	Static id for the UI editor	product	-

Handlebars Display

HandlebarsDisplay provides ability to render read-only Handlebars templates using UI data, typically used for preview functionality or static messages. This widget has the following special properties:

Property	Definition	Example	Default
props.template	Full static template text to use	<span> Testing </span>	-
props.source	Source to use dynamic templates from	preview_template	-
props.sourceId	Static id for selecting template from the source	test-template	-
props.idPath	Json path of dynamic id for selecting template from the source	data.templateId	-
props.sourcePath	Json path of template text in source records	data.content	-
props.lookups	List of data sources to pass on to template as lookups	{"product-lkp": { source: "product", idPath: "data.product"}}	-
props.asIframe	Whether widget should be rendered as an iframe (or div)	true	false
props.noPrint	Whether widget should allow disable printing	true	false

When not structured as iframe, handlebars displays use shadow #root to isolate its styling, so it will be subject to shadow dom constraints (e.g. not supporting @font-face)

TipTap Editor

TipTapEditor is a WYSIWYG editor, allowing editing and visualization of rich content, which produces JSON output in { type, content, html } form that can be used for platform independent UI generation or direct HTML injection. This widget has the following special properties:

Property	Definition	Example	Default
props.text	Whether to use/generate text only data or structured (object) data instead	true	false

Button Action

ButtonAction is a specialized component, which allows triggering one or more actions from within a UI using buttons. Button actions receive data assigned to this widget. This widget has the following special properties:

Property	Definition	Example	Default
props.buttons	List of buttons to display with UI details	[{title: "Accept", icon: "ok", type: "CallAPI"}]	-

File Manager

FileManagerEditor provides ability to manage a file system, by listing, creating and deleting files and folders. This widget supports all non-media specific properties listed in Media Editor.

Plasmic Editor

PlasmicEditor allows use of Plasmic page builder components embedded inside Rierino editors for both displaying and editing data. This widget has the following special properties:

Property	Definition	Example	Default
props.plasmicComponent	Name of the plasmic component to embed	TextInput	-
props.componentPath	Json path in current record for the name of plasmic component to embed	data.component	-
props.*	Any additional properties to pass on to Plasmic	{"placeholder:"Empty"}	-

Plasmic - The headless page builder for your codebase

Plasmic Page Builder

Plasmic access details can be set using the following environment variables: PLASMIC_PROJECT, PLASMIC_TOKEN, PLASMIC_PREVIEW.

Data Visualization Editor

DVLayoutEditor provides ability to design data visualization layouts, used for embedded dashboards and reports. This widget has no extra properties, as it creates and edits data inline with data visualization data format.

Condition Editor

ConditionEditor is a special component for editing conditional logic for business rules and queries through a user friendly interface. This widget has the following special properties:

Property	Definition	Example	Default
props.domain	Rule domain (for loading available functions, if editor is for the rule engine)	product_discount	-