Frontend JavaScript
Browser based JavaScript can be written on the frontend directly inside Application UI components:
- Disable/enable a button based on data entered into a form
- Customize a grid's layout with a switch statement
- Conditionally format color of table cells
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!
info
When using bindings anywhere in Superblocks, you can reference the built in JavaScript Array methods available in the autocomplete.

Pop Out Editor
The Pop Out Editor allows you to click a button inside a component property's text block to expand the editor into a tab in the bottom panel. This gives you more room to write code for things like Run JS triggers.

Once popped out, you can adjust the height of the bottom panel to further increase the space for writing code.
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 you have a switch statement that you want 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!
{{(function () {
<your_javascript_code_here>
})()
}}
Disable/Enable a button based on data entered into a form
Full code snippet below
{{(function() {
if (DatePicker1.selectedDate && Input1.value && Dropdown1.selectedOptionValue) {
return false;
} else {
return true;
}
})()}}
Customize grid based on a switch statement
Full code snippet below
{{(function() {
if (currentCell.dateOfBirth === "") {
return "<b>DOB</b>: <i>Unknown</i>";
} else {
return "<b>DOB</b>: "+currentCell.dateOfBirth;
}
})()}}
Full code snippet below
{{(function() {
switch (currentCell.house) {
case "Gryffindor":
return "#ae0001";
case "Slytherin":
return "#2a623d";
case "Ravenclaw":
return "#000A90";
case "Hufflepuff":
return "#FFDB00";
default:
return "black";
}
})()}}
Conditionally format color of table cells
Full code snippet below
{{currentRow.price > 200 ? "green" : "yellow"}}
Referencing 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}}