🟰Data selection & JavaScript

During application development in QuickDEV, JavaScript plays a pivotal role in accessing and manipulating data sourced from various entities like components, queries, and global parameters. Whether you're scripting within the SQL editor, component property input box, table column settings, or elsewhere, it's vital to enclose all JavaScript code within double curly braces. For instance, {{'Welcome ' + currentUser.name}} provides a clear example of this syntax.

Access data

Objects within the application possess globally unique names, such as input1, query1, and table1. These objects' properties can be referenced in your app using JavaScript code.

Access data in an object

QuickDEV facilitates accessing data within an object using dot notation (objectName.keyName). For instance, {{users.selectedRow.userName}} grants access to the userName value within the currently selected row of the Table users.

When writing JavaScript within {{ }}, to access values within an object, append a dot(.) after the object name. This action triggers an autosuggest menu, particularly helpful if you're uncertain about the object's built-in properties or methods.

Example

This GIF illustrates how appending a dot after the object name triggers an autosuggest menu, showcasing the properties of table1.

Access data in an array

Values within an array can be accessed by index, starting from 0. For instance, array1[0] accesses the first element of the array.

Example

The Data property of the Table component is an array of objects. This GIF illustrates how to access the value of first_name in the first element of the data array in table1.

Transform data

Within {{ }}, you can harness built-in JavaScript functions and third-party libraries to transform data, exemplified by operations like filter(), map(), and reduce().

Examples

Lowercase a string: {{input.value.toLowerCase()}} Change date format: {{moment(table.selectedRow.birth_date).format('YYYY-MM-DD')}} Return name from query results: {{queryData.data.map(i => i.name)}}

Restrictions

The JavaScript code within {{ }} should be single-line, comprising expressions like .map() or .reduce(), coupled with an arrow function or a ternary operator.

Examples

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

The following JavaScript code examples are not permitted within {{ }}.

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

If you desire to compose multi-line JavaScript, QuickDEV extends support for crafting such code within transformers.

// codes inside a transformer
if (select.value === "A") {  
    return "Option A";
}
if (select.value === "B") {
    return "Option B";
}
return "Option C"; 

View data

Data from queries can be complex and nested in real-world scenarios. Examining data offers insight into the detailed structure of objects, aiding in better comprehension. Before accessing or transforming data, it's essential to initially view the data and its structure. QuickDEV provides three methods to accomplish this task.

View query result

Upon executing a query within the query editor by clicking the "Run" button, the query result is presented in the format demonstrated below.

View data in Data Browser

The Data Browser, situated in the left pane, showcases all the data within your application. By clicking on the node, you can expand it to view the data structure.

Real-time view

When configuring properties or scripting JavaScript code within an editor, you can observe the evaluated result in real-time within a box located below your editor.