Learn to change page state using component values in Betty Blocks for interactive web apps.
Input component values shared in page state
There are multiple input components parts of the default Betty Blocks component set. These inputs, such as text input, number input, or checkbox input all have a component option called value. These input values are shared in the state of the page in runtime. This means that at runtime an input writes to that state, and other components (such as a text component) can listen to this piece of state.
What can I use this for?
There are multiple use cases where this feature can be used. Let’s explain the use by showing one abstract example:
- When a checkbox input is true, I want to show another component
Imagine you have a checkbox input on the left that you want to show or hide an alert component on the right. Because you have the checkbox input added to your page, its value is available to use inside other components.
As a result, in the single rule conditional option, you can now select the value of the checkbox input and compare it with the right-hand side value given. The component is visible when the checkbox input’s value is now equal to true. Else, it is not visible.
What inputs are currently supported to write to the state?
Currently, not every input is written to state at the moment. Here you can find a list of support input kinds that do write to state and in which the value can be used inside other components:
-
Text input
-
Text area input
-
Number input
-
Phone number input
-
Decimal input
-
Rating input
-
Email input
-
IBAN input
-
Password input
-
Price input
-
URL input
-
Checkbox input
-
Switch input
All other Input components available in the default Betty Blocks component set, will be supported in the future!
In which component options can I use the input values from the state?
In our component options framework, we have the text and variables option. In this option type, you can make use of the input values. There is a new selection option added (next to data variables and translation keys) that allows you to select any of the available input components from your page. By selecting one of the input components from the list, you are directly referencing its value from the state.