Skip to main content

KeyValue (ALPHA)

BusinessEnterprise
Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The KeyValue widget shows a label with a value under it. Users can select the value but cannot change it. Use it to show record details, such as a customer's email or an order total.

The KeyValue widget is a read-only Input widget. It starts with Readonly turned on. If you turn Readonly off in the property pane, the widget turns into an editable input widget of the matching data type.

Widget type: WDS_KEY_VALUE_WIDGET

KeyValue widget in a Responsive app
KeyValue widget

Loading and empty states​

  • While its data loads for the first time, the widget shows a loading placeholder.
  • When the value is empty and nothing is loading, the widget shows "No data to display."
  • When data reloads and the widget already has a value, it keeps showing the old value until the new one arrives.

Content properties​

These properties appear in the Content tab of the property pane. The list below shows the properties you see while Readonly is on.

Type​

Data type string​

Sets the type of data the value holds. Options: Single-line text (default), Multi-line text, Number, Password, Email, Phone number, Currency, Date.

When you change the data type in the property pane, the widget turns into the input widget for that type. For example, Email turns it into the email input widget.

Data​

Value string | number​

Sets the value the widget shows. Bind it to your data, for example {{AnvilTable1.selectedRow.email}}. The value updates when the bound data changes.

When Data type is Number, the value must be a number.

Label​

Text string​

Sets the label above the value. Default: Label.

General​

Allow autofill boolean​

Lets the browser fill in the value. This property shows only when Data type is Email or Password.

Visible boolean​

Controls whether the widget is visible. Default: on.

Readonly boolean​

Lets users select the value but not change it. Default: on.

If you turn it off in the property pane, the widget turns into an editable input widget of the matching data type. That widget has more properties, such as validation and events.

Animate loading boolean​

Controls the loading animation of the widget. Default: on.

Style properties​

These properties appear in the Style tab of the property pane.

Icon​

Icon string​

Shows an icon in the field. The value must be an icon name from the icon list.

This property is hidden when Data type is Multi-line text.

Position string​

Sets which side of the field the icon is on. Options: left (default), right.

Values for code: left, right.

This property shows only when you set an Icon, and is hidden when Data type is Multi-line text.

Reference properties​

Reference properties let you read the widget's state in bindings and code, for example {{KeyValue1.text}}. You cannot set them directly.

text string​

The parsed value. When Data type is Number, this is a number, or null if the value is empty or not a number.

Example:

{{KeyValue1.text}}

rawText string​

The value as a string, before parsing.

Example:

{{KeyValue1.rawText}}

value string | number​

The same value as text.

Example:

{{KeyValue1.value}}

isValid boolean​

Shows whether the value passes the widget's checks for its data type. For example, with Email, it is false if the value is not a valid email address.

Example:

{{KeyValue1.isValid}}

isVisible boolean​

Shows whether the widget is visible.

Example:

{{KeyValue1.isVisible}}

isDisabled boolean​

Shows whether the widget is disabled.

Example:

{{KeyValue1.isDisabled}}

isReadOnly boolean​

Shows whether the widget is read-only.

Example:

{{KeyValue1.isReadOnly}}

Methods​

Methods let you change the widget's properties from code, for example in a JS Object.

setVisibility (param: boolean): Promise​

Shows or hides the widget.

Example:

KeyValue1.setVisibility(false)

setValue (param: string): Promise​

Sets the value the widget shows.

Example:

KeyValue1.setValue("jane@example.com")

setReadOnly (param: boolean): Promise​

Sets whether the value is read-only.

Example:

KeyValue1.setReadOnly(true)

setDisabled (param: boolean): Promise​

Sets whether the widget is disabled.

Example:

KeyValue1.setDisabled(true)

setRequired (param: boolean): Promise​

Sets whether a value is required.

Example:

KeyValue1.setRequired(true)