Widgets

Different widgets allow displaying and editing different data types and formats.

Widgets define the visual components which build up the editor screens. Each widget has a unique look and feel, and is able to work with certain types of data.

There are 5 categories of widgets:

• Value Widgets: Used for editing simple values such as text, numbers and boolean values

• Array Widgets: Used for editing arrays of values or objects

• Object Widgets: Used for editing Json objects

• Indirect Widgets: Used for editing data that is not within current element's scope

• Atom Widgets: Used for display of simple data with traditional html elements

While all widgets have their own properties, most also support use of the following:

Property	Definition	Example	Default
props.label	Text label to display above the widget	Name	-
props.description	Descriptive text to display on hover of info icon	This is the product name field	-
props.example	Example value to display on hover of info icon	Cool Product	-
props.default	Default value used if no value is entered to be displayed on hover of info icon (informational only)	Missing Name	-
props.snapshot	Whether widget should be read-only, as a snapshot (true for simple read-only entries "styled" for formatted read-only entries)	styled	-
props.validated	Whether JSON schema of widget data should be	true	-
props.collapse	Whether the widget should allow expand/collapse ("collapsed" or "expanded" to allow and start with a specific state)	collapsed	-
containerProps.style	CSS inline styling to apply to widget container	{border: "1px solid"}	-
containerProps.label.style	CSS inline styling to apply to widget's label wrapper	-	-
containerProps.input.style	CSS inline styling to apply to widget's input wrapper	-	-

Sourced Widgets

Certain widgets load data from sources (such as options for a drop-down), and support the following common properties:

Property	Definition	Example	Default
props.source	Name of data source mapping to use for fetching list of records	attribute	-
props.sourceFilters	Mapping, path (or JMES pattern) pairs of record value based filters to apply on data source requests	[{mapping: "productid", path: "id"}]	-
props.filterField	Path of data source records to apply static filter on	status	-
props.filterValue	Local filter to apply on the received list	'A'	-
props.filterValues	List of local filters to apply on the received list	['A', 'B']	-
props.filterValuePath	Json path for record field to use apply on the received list	data.category	-
props.sortFields	List of received fields to sort results on	['data.priority']	-