🔎JavaScript Query

In situations where you need to coordinate operations, such as triggering multiple queries, merging and storing their results to a dynamic variable, and then opening a modal, the process can become intricate when chaining several event handlers. This complexity cannot be addressed with a single line of code within {{ }}. This is where JavaScript (JS) queries become essential. They enable you to interact with components and queries by crafting complex JS queries to execute these operations.

Combine query outcomes

The SQL query firstQuery retrieves the id, first_name, last_name, and id columns from the users table in a PostgreSQL database.

select id, first_name, last_name, id from users

The SQL query secondQuery fetches the id, city, and name columns from the teams table in a PostgreSQL database.

select id, city, name from teams

1. Make a new JavaScript query - thirdQuery

2. Insert the following code.

return Promise.all([firstQuery.run(), secondQuery.run()]).then(
  data => join(data[0], data[1]),
  error => {}
)

function join(users, teams) {
  return users.map(player => {
   const team = teams.find(t => player.tid === t.tid);
   return { ...player, ...team };
  });
}

This code snippet utilizes the Promise.all() method to gather the results of firstQuery and secondQuery. Subsequently, the join() method merges their outcomes upon successful execution, utilizing the values of the id field.

Return data

Use the return syntax to return a result. For instance, the following code returns 2.

return Math.floor(2.4)

The returned result can also be a Promise object. For instance, getData.run() returns a Promise object.

return getData.run()

Get data

To retrieve data within your app, use JavaScript queries rather than{{}}

var myData = [myInput.value, myQuery.data, uploadedFile.files[0].name];

Control component

In JS queries, you can utilize methods provided by components to interact with UI components in your app. This functionality is not supported by the inline JS code enclosed within {{}}.

/// set the value of myApp to "QuickDEV"
myApp.setValue("QuickDEV");

The myApp.setValue() method (or other component methods) is asynchronous and returns a Promise object. Accessing myApp.value immediately after setting the value of myApp does not return the updated value.

Run query

Call run() method to run other queries, for example:

return getEmployees.run();

The return value of getEmployees.run() is a Promise, so you can attach callbacks to handle the successful result or error.

return getEmployees.run().then(
  data => { // after query runs successfully
      return data[0].name; 
  },
  error => { // after query runs in failure
    message.error("An error occured when loading employees: " + error.message); 
  }
);

Pass in parameters

You can pass parameters in the run() method to separate the query implementation from its parameters.

getEmployees.run({
    param1: value1,
    param2: value2
    ...
});

For example, in SQL query getCompany, you can define companyName and nrOfEmployees as parameters that need to be passed in for its execution.

select * 
  from companies 
 where company_name = {{ companyName }} 
   and number_of_employees > {{ nrOfEmployees }}

Then you can pass in corresponding parameters to getCompany.

getCompany.run({
  company_name: "QuickDEV",
  nrOfEmployees: 50 
}).then(
  data => { // after getCompany runs successfully
    console.log("The result is" + JSON.stringify(data)); 
  },
  error => { // after getCompany runs failed
    console.log("An error occured," + error.message);
  }
);

Declare a function

You can define functions within a JS query to enhance readability.

// Whether the first number is a multiple of the second number
function getSum(num1, num2) {
      return num1 + num2;
   }
   
// Call the moment library to return the current date
function getCurrentDate() {
      return moment().format("DD-MM-YYYY");
}

Add preloaded scripts

QuickDEV allows you to import independent JS libraries and incorporate existing JS code, such as providing globally accessible methods or variables for reuse, at either the application or workspace level. Access app-level options under ⚙️ > Other > Scripts and Style.

For workspace-level, go to ⚙️ Settings > Advanced.

Within the JavaScript tab, you have the option to include preloaded JavaScript code to define global methods and variables, which can then be reused throughout your app.

Restrictions

For security reasons, several global variables and functions of window are disabled in QuickDEV.