Skip to main content

Query Builder

The Query Builder control empowers you to create custom queries for situations requiring server-side filtering, utilizing criteria defined during runtime. By integrating it with your connectors, you can dynamically select and apply queries to your data sources. This advantageously enables dynamic filtering for controls like Table Grid and List controls, ensuring efficient data retrieval based on specific criteria.

Query Builder
Query Builder

Binding Data Options

The Query Builder control offers two data binding options to display.There are different ways in which you can bind data to the Query Builder control.


With the RAW_JSON option, you can directly input the query in RAW_JSON format. This allows for precise control over the query structure, enabling you to define complex filter conditions in detail.


The Query option provides a more intuitive and user-friendly approach to constructing queries. Utilizing the control's visual interface, you can interactively build queries. This visual representation simplifies the process, making it easier to understand and troubleshoot complex queries.

To bind data with the Query Builder control, follow these steps:

  • Define your query for the MySQL connector by creating a variable and using the dynamic variable feature of the Query Builder control to append the WHERE clause to your SQL.

  • Configure the Schema field on the Popup screen to specify the JSON Key-Value format for filtering fields.

  • Optionally, display the SQL and JSON filter generated by the Query Builder control using Text Input controls.

  • Add an on_apply Action to the Apply button and specify navigation back to the screen with the Tablegrid control.

  • Bind data from the connector to the TableGrid control by selecting Tablegrid control > Quick Select > Connector Library.

These steps will enable you to utilize the Query Builder control effectively for filtering and displaying data in your application.


DatabaseSpecifies the type of database (SQL or NoSQL) for sending the query. When using NoSQL, Dynamic Operators can be added.
ThemeDefines the color scheme or theme for the composite control.
SchemaJSON format containing fields available for use in the query builder.

And here's an example of the Schema for a Product data use case:

"label": "Product Name",
"value": "ProductName",
"enum": [
"label": "Sandwich",
"value": "Sandwich"
"label": "Burger",
"value": "Burger"
"label": "All",
"value": ""
"label": "Product ID",
"value": "ProductID"
"label": "Price",
"value": "Price",
"type": "number"
"label": "Prod Quantity",
"value": "Quantity"

Dynamic Operators

The Dynamic Operators feature in the Query Builder control allows you to add custom operators that are not available by default. This enables you to define specific operators for different types of data you use in your application. You can easily customize the operators to support String type data within Studio.

Key Points:

  1. For String type data, the control automatically adds double quotes to the value field in the resolved output JSON query.

  2. For other data types, you must provide a value that is supported in your NoSQL parameter. For instance, the $all operator expects an array type in the value field, so it's essential to provide an array value in the query control.

To add your specific operators, go to the Dynamic Operator section under Properties, and customize the operators to support String type data in Studio.

Dynamic Operator
Dynamic Operator

Whenever you run the form and create queries using the additional operators, you will see them listed for String type data. For example, in the illustration provided, the query is built for the Product ID using the $Exists operator.

By leveraging Dynamic Operators, you gain more flexibility and control over your queries, allowing you to tailor them to the specific needs of your application.

Dynamic Operators Example:


"ProductID": {
"$Exists": true

In this example, the query uses the $Exists operator to check if the Product ID exists in the data.

Query Builder

Control Output

The outputs from the Query Builder control, represented by the placeholders {{querybuilder.Raw_JSON}} and {{querybuilder.Query}}, can be referenced in other controls, data queries, or JavaScript functions using the control's unique name.

querybuilder.Raw_JSONRepresents the query in RAW_JSON format, providing precise control over the query structure.
querybuilder.QueryRepresents the query in a user-friendly format, simplifying the process of building complex queries.


On_applyTriggered when you select the query parameters and click the Apply button to apply the specified filters or search criteria.
On_clearTriggered when you click the clear button to reset or remove any applied filters, returning the data to its original state.