Skip to main content

Using Frontend JavaScript

Use bindings {{}} to insert dynamic values into your components

On this page:

  1. Bindings
  2. Refer to Other Components
  3. Working with Complex JavaScript in Bindings

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