JavaScript within {{ }}

Appizap offers developers the flexibility to leverage JavaScript for accessing and transforming data in their apps, empowering them to create unique and dynamic modules and apps.

When building apps in Appizap, you can use JavaScript (JS) to access and transform data from objects, including components, queries, and global parameters. When writing JavaScript inside SQL editor, component property's input box, table column settings, etc., always remember to enclose all your JS code inside double curly braces, such as {{'hello, ' + currentUser.name}}.

Access data

Objects have globally unique names, such as input1, query1, and table1. You can refer to the properties of the objects in your app by JS code.

Access data in an object

Appizap supports you accessing the data in an object using dot notation (objectName.keyName). For example,{{userInfo.selectedRow.userName}} accesses the userName value in the currently selected row of Table userInfo.

When writing JS in {{ }} to access values in an object, add a . after the object name to trigger an autosuggest menu in case you are not sure about objects' built-in properties or methods.

Access data in an array

You can access the values in an array by index. The index always starts at 0, so you can use array[0] to access the first element of the array.

Transform data

You can leverage built-in JS functions and third-party libraries in {{ }} to transform data, such as filter(), map() and reduce() operations.

Examples

Lowercase a string.

{{input1.value.toLowerCase()}}

Change date format.

{{dayjs(table1.selectedRow.date_column).format('YYYY-MM-DD')}}

Return name from query results.

{{query1.data.map(i => i.name)}}. 

Restrictions

The JS code in {{ }} should be a single-line code, such as .map() or .reduce() combined with an arrow function or a ternary operator.

Examples

{{query1.data.id.length}} // ✅ to reference a value
{{query1.data.map(row => row.id)}} // ✅ .map() + arrow function
{{ num1 > num2 ? num1 : num2 }} // ✅ ternary

The following JS code examples are illegal in {{ }}.

{{ 
    // ❌ you can't write code like this in {{ }}
    const array = query1.data;
    const filterArray = array.filter(it => it.value > 10);
    return filterArray; 
}}

If you wish to orchestrate multiple lines of JavaScript, Appizap supports you writing such code in transformers.

// codes inside a transformer
if (select.value === "1") {  
    return "Option 1";
}
if (select.value === "2") {
    return "Option 2";
}
return "Option 3"; 

View data

Data from queries can be complicated and nested in real cases. Viewing data provides you with the detailed structure of data in objects and helps you understand your data better. Before accessing or transforming data, you may need to view the data and its structure first. Appizap offers three ways to view data.

View query result

By selecting the Run button located in the query editor, the user can initiate the execution of a query.

View data in Data Browser

Data browser located in the left pane displays all of the data inside your app. You can click on the node to expand and view the data structure.

Real-time view

When setting up properties or writing JS code inside an editor, you can view the evaluated result in real-time in a box below your editor.