Appizap
  • Appizap Overview
  • Build Apps
    • On-boarding Flow
    • Ideas to Apps using AI
    • Create a new app
    • App Configuration
      • App Overview
      • General Settings
      • Domain Settings
      • Version Release & Management
      • App Assets
      • Auth Settings
    • UI Builder
      • Module
      • Menu Navigation
      • Version Logs & Restore
      • Keyboard Shortcuts
    • GUI, Themes & Styles
    • Event handlers
    • Write JavaScript
      • JavaScript within {{ }}
      • JavaScript Query
      • Transformers
      • Temporary State
      • Data Responder
      • Built-in JavaScript Functions
      • Use Third-party Libraries
    • How-to-use
      • Welcome to Appizap!
      • FAQ
  • Appizap Dashboard
    • Your Apps
    • Database
    • Workflows
    • Media & Files
    • Query Library
    • Audit Logger
    • Templates
  • Workspaces
    • Workspace Settings
    • User Authentication
    • User Groups
    • Themes
    • Advanced
  • Appizap Concepts
  • Appizap Studio
    • Data Browser
      • Screen, Modules & Navigations
      • Active Components
      • In-App Modals
      • Data Queries in your App
      • Global Data Variables
    • Layers
    • Screen Settings
    • Debugger
    • Data Queries
    • Widget Library
      • Link
      • Icons
      • Steps
      • Button Group
      • Form Button
      • Grid
      • Responsive Grid Layout
      • Drawer
      • Navigation
      • Cascader
      • Comment
      • Mention
      • Collapsible Container
      • Rich Text Editor
      • Input
      • Modal
      • Text Display
      • Number Input
      • Password
      • List View
      • Date
      • Checkbox
      • Radio
      • Switch
      • Multi Select
      • Dropdown
      • File Upload
      • Phone Number Input
      • Download Pdf Button
      • Image
      • Divider
      • Progress Circle
      • Progress
      • Form
      • JSON Schema Form
      • Container
      • Tabbed Container
      • Table
      • Date Range
      • Time
      • Time Range
      • Toggle Button
      • Segmented Control
      • Rating
      • Timeline
      • Slider
      • Range Slider
      • Control Button
      • File Viewer
      • Image Carousel
      • Lottie Animation
      • Tree
      • Tree Select
      • IFrame
      • Calendar
      • Custom Component
      • Auto Complete
      • Chart
      • Graph Chart
      • Treemap Chart
      • Basic Chart
      • Geo Map Charts
      • Funnel Chart
      • Candlestick Chart
      • Select
      • Audio
      • Caller
      • Text Area
      • Responsive Flex Layout
      • Timer
      • Image Editor
      • AI Component
    • Component Specific Actions
  • Database
    • Connect DB
    • Build Internal DB
      • Arrays
      • Indexes
      • Using JSON Type
      • Cascade Delete
      • Data Load and Import
    • Data Sources
      • Connect Data Sources
        • Big Query
        • ClickHouse
        • CouchDB
        • DynamoDB
        • Elasticsearch
        • MariaDB
        • Microsoft SQL Server
        • MongoDB
        • MySQL
        • Oracle
        • PostgreSQL
        • Redis
        • Snowflake
      • Connect APIs
        • REST API
        • GraphQL
        • Google Sheets
        • S3
        • OpenAPI
        • Firebase
        • WooCommerce
        • OpenAI
        • Athena
        • Lambda
    • Query Library
    • Storage
      • Buckets
      • Uploads
      • Objects
  • Appizap Workflow Builder [Pro]
    • Workflows
      • Create a workflow
      • Nodes
      • Connections
      • Sticky Notes
      • Tags
      • Import and Export
      • Templates
      • Sharing
      • Settings
      • History
      • Find Workflow ID
    • Build Flow Logic
      • Conditional Nodes
      • Data Merging
      • Looping
      • Waiting
      • Sub-Workflow
      • Execution Order
    • Data Handling
      • Data Structure
      • Transforming data
      • Use Code
      • Mapping using UI
      • Data Item Linking
      • Data Pinning
      • Data Editing
      • Data Filtering
      • Data Mocking
      • Binary Data
    • Editor UI
    • Credentials
      • Create and Edit
      • Sharing
    • Integrations
      • Node Types
      • Core Nodes
      • Actions
      • Triggers
      • Credentials
      • Custom API Operations
    • Error Handling
      • Errors related to memory
    • Keyboard Shortcuts
  • Security & Compliance
  • Terms & Conditions
  • Privacy Policy
  • User Guide
    • Getting Started
    • Admin Console
    • Data Maintenance
Powered by GitBook
On this page
  • Use JS query to join query results
  • Return data
  • Access data
  • Control component
  • Run query
  • run() method and callbacks
  • Pass in parameters
  • Declare a function
  • Add preloaded scripts
  • Restrictions
  1. Build Apps
  2. Write JavaScript

JavaScript Query

With JS Query, users can leverage the power of JavaScript to navigate through different elements on the app, interact with them in real-time, retrieve and manipulate data.

PreviousJavaScript within {{ }}NextTransformers

Last updated 4 months ago

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 JS query to join query results

SQL query query1 reads id, first_name, last_name and tid fields from table players in a PostgreSQL database.

select id, first_name, last_name, tid from players

SQL query query2 reads tid, city and name fields from table teams in a PostgreSQL database.

select tid, city, name from teams

Use a JS query to left join query1 and query2 on the same tid in the following steps.

  1. Create query3, and choose Run JavaScript Code.

  2. Insert the following code.

    return Promise.all([query1.run(), query2.run()]).then(
      data => join(data[0], data[1]),
      error => {}
    );
    
    function join(players, teams) {
      return players.map(player => {
        const team = teams.find(t => player.tid === t.tid);
        return { ...player, ...team };
      });
    }

    In this code snippet, the Promise.all() method receives the results of query1 and query2, and the join() method joins their results after a successful run based on the values of tid field.

Return data

Use return syntax to return result. For example, the following code returns 3.

return Math.floor(3.4)
return query2.run()

The return statement is not necessary for scenarios where you want to omit results.

Access data

Use JS queries to access data in your app. Notice that there's no need to use {{ }} notation.

var data = [input1.value, query1.data, fileUpload.files[0].name];

Control component

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 {{}}.

// set the value of input1 to "Hello"
input1.setValue("Hello");

Run query

run() method and callbacks

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

return queryByName.run(); // run a query and it returns a Promise

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

return queryByName.run().then(
  data => { // after query runs successfully
      return "hello, " + data.user_fullname; 
  },
  error => { // after query runs in failure
    // use built-in message function to pop up an error message
    messageInstance.error("An error occured when fetching user: " + error.message); 
  }
);

Pass in parameters

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

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

For example, in SQL query query1, you can define name and status as parameters that need to be passed in for its execution.

select * from users 
   where 
     user_name = {{ name }} 
   and
    user_status = {{ status }}

Then you can pass in corresponding parameters to query1.

query1.run({
  name: "Bob",
  status: 0 
}).then(
  data => { // after query1 runs successfully
    console.log("The result is" + JSON.stringify(data)); 
  },
  error => { // after query1 runs failed
    console.log("An error occured," + error.message);
  }
);

Demo

When you have several inputs in an app triggering the same query, passing parameters to this query allows you to reuse it anywhere.

-- query1: 
select id, name, gender, address from users where id={{numberInput1.value}}
-- query2: 
select id, name, gender, address from users where id={{table1.selectedRow.id}}
-- query3: 
select id, name, gender, address from users where id={{select1.value}}
...

Things might get fuzzy when you want to update SQL implementations, because you have to carefully check and update all duplicated queries. Now you can be relieved of this repeated SQL by introducing query parameters.

-- just write the SQL once, and extract its parameter {{id}}: 
select id, name, gender, address from users where id= {{id}}

Then trigger this query in Run JavaScript of event handlers in each of the inputs.

Declare a function

You can declare functions inside a JS query for better readability.

// Whether the first number is a multiple of the second number
function isMultiple(num1, num2) {
      return num1 % num2 === 0;
   }
   
// Call the day.js library to return the current date
function getCurrentDate() {
      return dayjs().format("YYYY-MM-DD");
}

Add preloaded scripts

Appizap 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.

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

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 Use Third-party Libraries.

Restrictions

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

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.

For security reasons, several global variables and functions of window are disabled in Appizap. Please report to our or if you encounter any issues.

Promise
Promise
GitHub
Discord