JavaScript query
Last updated
Last updated
There are cases where you want to orchestrate operations, for instance, after triggering two queries, you want to combine and store their results to a temporary state, and then open a modal. This process can be complicated when chaining several event handlers, and certainly cannot be done in one line of code in {{ }}
. That's where JavaScript (JS) query comes into play. It unleashes the ability to interact with components and queries by writing complex JS queries to achieve the following operations:
Interact with UI components
Trigger queries
Access third-party JS libraries
Customize functions
The following example is for you to quickly understand what JS query is and how it works.
Use return
syntax to return result. For example, the following code returns 3
.
The result returned can also be a object. For example, query2.run()
returns a Promise object.
The return
statement is not necessary for scenarios where you want to omit results.
Use JS queries to access data in your app. Notice that there's no need to use {{ }}
notation.
In JS queries, you can use methods exposed by components to interact with UI components in your app. Such operation is not supported by the inline JS code in {{}}
.
run()
method and callbacksCall run()
method to run other queries, for example:
The return value of query.run()
is a Promise, so you can attach callbacks to handle the successful result or error.
You can pass parametes in the run()
method to decouple query implementation from its parameters.
You can declare functions inside a JS query for better readability.
PocketBlocks supports importing third-party JS libraries and adding predefined JS code, such as adding global methods or variables for reuse either at app-level or workspace-level. You can find the app-level settings in ⚙️ > Other > Scripts and style.
For workspace-level, go to ⚙️ Settings > Advanced.
The input1.setValue()
method (or other component methods) is asynchronous and returns a object. Accessing input1.value
immediately after setting the value of input1
does not return the updated value.
In JavaScript tab, you can add preloaded JavaScript code to define global methods and variables and then reuse them in your app. For importing libraries, see .
For security reasons, several global variables and functions of window are disabled in PocketBlocks. Please report to our if you encounter any issues.