SetValue Command

Changes the value of a component property or binding. Each component has a defined set of dynamic properties that you can change with SetValue. A component can also have named bindings that you can change with the SetValue command.

Properties

The SetValue command has the properties shown in the following table, in addition to the common command properties. Set the type property to SetValue.

In the following table, the "Default" column shows "Required" for properties that must have a value for the command to run. Otherwise it displays the default value, which might be none.

Property Type Default Description
componentId Selector :source The component to update with the new value.
property String Required The name of the property to set.
value String Required The value to set on the property.

The following example sets a value so that the punchline for a joke appears, because an opacity value of 1 means the component is fully visible.

{
  "type": "SetValue",
  "componentId": "jokePunchline",
  "property": "opacity",
  "value": 1
}

The SetValue command runs in fast mode, but without any delay.

componentId

A selector that identifies the component to update with the new value. When not provided, defaults to :source. The :source selector targets the component that issued the SetValue command.

property

The name of the property to change. This can be a built-in component property or a binding defined in the bind property for the component. For a component property, the property must be dynamic. To determine whether a component property is dynamic, see the table of properties for that component. For example, see the table of properties for the Text to identify the dynamic properties of a Text component.

The SetValue command uses the following rules when updating a value:

  1. If the component has a dynamic property with the specified name, the command updates that property with the new value.
  2. Otherwise, if the component has a bind property with the specified name the command updates that bind property with the new value.
  3. When a bound property changes value, all dynamic properties of components that depend on that property are updated.

The following example shows how to update a binding value. Click the text in the simulator and note how the number increments each time. Refresh the page or change viewport profiles to reset the counter.

value

The new value to assign to the specified property. The value evaluates when the command runs, so it can take advantage of existing component properties. In the following example, the SetValue command sets the opacity of the target component to 50% of its actual value.

{
  "type": "SetValue"
  "property": "opacity",
  "value": "${event.target.opacity * 0.5}"
}
Was this page helpful?

Last updated: frontmatter-missing