Skip to main content
Version: 2.13.0

Query Panel

The Query Panel, located at the bottom of the app-builder, allows you to create and manage queries for interacting with connected Default and Global datasources. It provides the capability to perform API requests, query databases, and apply transformations or data manipulation using JavaScript and Python.

The Query Panel consists of two sections:

  • The Query Manager on the right side, which displays a list of all the created queries.
  • The Query Editor, used to configure the selected query.
App Builder: Query Panel

Query Manager

Query Manager will list all the queries that has been created in the application. Query Manager helps in managing the queries that have been created, you can add, edit, delete, duplicate, search, sort and filter through them.

App Builder: Query Panel

Add

Add button is used to add new query in the application. When Add button is clicked, a menu will open with a list of options for creating a query from Default datasources such as Rest API, ToolJet Database, JavaScript Code, Python Code or from connected Global Datasources.

App Builder: Query Panel

Sort/Filter

On the top of Query Manager, there is button to Sort or Filter queries. The following options are there:

Filter:

  • By Datasource

Sort:

  • Name: A-Z
  • Name: Z-A
  • Type: A-Z
  • Type: Z-A
  • Last modified: oldest first
  • Last modified: newest First
App Builder: Query Panel

On the top of the query manager is search box that can be used to search for a specific query.

App Builder: Query Panel

Delete

Delete button will delete the selected query, the button will only show up when you hover over the query name. When you click on the delete button, a confirmation dialog will open to confirm the deletion of the query.

App Builder: Query Panel

Duplicate

Duplicate button will duplicate the selected query, the button will only show up when you hover over the query name. The duplicate query will be named as <query name>_copy.

App Builder: Query Panel

Rename

Rename button is used to rename the selected query, the button will only show up when you hover over the query name. When you click on the rename button, the query name becomes editable and you can change the name of the query.

App Builder: Query Panel

Query Editor

Query editor used to configure the query parameters, preview or transform the data return by the query.

info

The changes made in the query panel will be saved automatically.

App Builder: Query Panel

Topbar

On the top of the query panel there are a few options:

Query Name

The name of query is displayed on the top of the query panel. You can click on it to make it editable and change the name of the query.

App Builder: Query Panel

Preview

Preview button is used to preview the data returned by the query. The data will be displayed on the preview section present at the bottom of the query panel. This helps in debugging the query and see the data returned by the query without triggering the query in the app.

The Preview of data is returned in two different formats: Raw & JSON. You can click on the clear button to clear the preview data.

App Builder: Query Panel

Run

Run is used to trigger the query, running the query will interact with the application unlike Preview.

App Builder: Query Panel

Query Parameters

Query Parameters are essential values that must be provided in a query for the server to generate a response. These parameters encompass endpoints, methods, or operations. It's important to note that the specific set of Query Parameters varies for each datasource.

App Builder: Query Panel

Datasource

The primary and default parameter found in all queries is Datasource. This option allows you to choose the appropriate datasource for your query.

In cases where multiple datasources of the same type are connected, you can easily switch the query's datasource using the dropdown menu.

App Builder: Query Panel

Transformation

Transformations can be enabled on queries to transform the query results. ToolJet allows you to transform the query results using two programming languages JavaScript & Python. Check the detailed documentation on Transformations.

App Builder: Query Panel

Settings

App Builder: Query Panel

Run this query on application load?

Enabling this option will execute the query every time the app is loaded.

Request confirmation before running the query?

Enabling this option show a confirmation modal to confirm Yes or No if you want to fire that query.

Show notification on success?

Enabling this option show a success toast notification when the query is successfully triggered.

You can provide a custom success message and notification duration in milliseconds.

Events

Event handlers can be added to queries for the following events:

  • Query Success
  • Query Failure
info

Learn more about Event Handlers and Actions.

App Builder: Query Panel