Using Frontend JavaScript
Use bindings {{}} to insert dynamic values into your components
On this page:
Bindings
Bindings allow you to insert dynamic data into your components.
info
Anything inside of {{}}
is evaluated as a JavaScript expression
For example, in a Text widget, we can write: Hi from {{"Superblocks"}}!
. The Text widget is then evaluated to Hi from Superblocks!
Refer to Other Components
You can refer to other components by using the exact same syntax. For example, let's refer to a Table's currently selected row inside of my Text widget:
Here, we are referring to Table1's selected row and referring to the "city" column of the table by doing {{Table1.selectedRow.city}}
Working with Complex JavaScript in Bindings
There are cases where you may want to write more complex JavaScript inside of bindings (i.e. inserting JavaScript that is multiple lines long). To do this, you have to convert your JavaScript into a valid expression. For example, let's say I have a switch statement that I want to use to use as a binding:
switch (Dropdown1.selectedOptionValue) {
case "NEW_YORK":
return "New York";
case "TORONTO":
return "Toronto";
default:
return "No city defined";
}
We can turn this code into a valid binding by wrapping this code inside of a anonymous function and executing it immediately:
{{
(function () {
switch (Dropdown1.selectedOptionValue) {
case "NEW_YORK":
return "New York";
case "TORONTO":
return "Toronto";
default:
return "No city defined";
}
})()
}}
You can use this technique to write any arbitrary JavaScript code inside of bindings!
Examples
- Disable/Enable a button based on data entered into a form


- Customize grid based on a switch statement
- Conditionally format color of table cells
