Skip to main content

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!

Binding returning a javascript evaluated sting to a text component

info

When using bindings anywhere in Superblocks, you can reference the built in JavaScript Array methods available in the autocomplete.

Connect databases, REST APIs, GraphQL APIs, and more

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.

Use the expand editor into bottom tab button for larger writing space

Once popped out, you can adjust the height of the bottom panel to further increase the space for writing code.

View of the editor popped out for more space

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​

Use code to disable UI elements

Full code snippet below

{{(function() {
    if (DatePicker1.selectedDate && Input1.value && Dropdown1.selectedOptionValue) {
        return false;
    } else {
        return true;
    }
})()}}

Disable UI elements until form validation succeeds

Customize grid based on a switch statement​

Use javascript to customize components

Full code snippet below

{{(function() {
    if (currentCell.dateOfBirth === "") {
        return "<b>DOB</b>: <i>Unknown</i>";
    } else {
        return "<b>DOB</b>: "+currentCell.dateOfBirth;
    }
})()}}

Conditionally coloring text

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​

Using code to conditionally color table rows

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:

Reference values from components in properties via bindings

Here, we are referring to Table1's selected row and referring to the "city" column of the table by doing {{Table1.selectedRow.city}}