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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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 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:
props.domain
Rule domain (for loading available functions, if editor is for the rule engine)
product_discount
-
Last updated