Active Query Builder support area

How to use Active Query Builder with React, Angular, Webpack, Electron?

Last modified:

Active Query Builder supports client-side rendering since version 3. The rest of the communication with the server goes through a single server endpoint. This enables using it with modern web frameworks and JavaScript libraries, such as React, Angular as well as utilizing it in Electron and other browser-based development environments.

 

Embedding Active Query Builder into your project

Note that Active Query Builder ASP.NET Edition is not a 100% JavaScript component. It requires an ASP.NET server to parse and generate SQL queries. You can use Linux or Windows server for .NET Core, or Classic ASP.NET server.

You can:

  • get rid of the session and store the clients' state anywhere you want (in the browser local storage, cookies, using tokens or any other custom state storage you can imagine),
  • install the ASP.NET server on another host or even use a web farm,
  • use client-side rendering (which is necessary in this case)

You can read how to set the server up in the following guides:

Embedding in your Angular app

To get Active Query Builder embedded in your Angular app, do the following:

  1. Copy the aqb.client.js file to the "assets" folder.

  2. Link this script as global in the .angular-cli.json file:

    "scripts": ["./assets/aqb.client.js"]

  3. Declare "AQB" as a global variable in the src/typings.d.ts file:

    declare var AQB: any;

  4. Create the "querybuilder" component and put the Active Query Builder HTML markup and the initialization code into it. See the sample in the JavaScript/Scripts/Agular/src/app/querybuilder folder.

  5. Build and run your app ("npm run build").

The project was made using the ng new ProjectName command according to the Angular Quick Start Guide.

 

Embedding in your React app

To get Active Query Builder embedded in your React app, do the following:

  1. Copy the "aqb.client.js" file to the project folder.

  2. Create the QueryBuilderLayout component and put the Active Query Builder HTML markup and the initialization code into it. See the sample in the "Scripts/React/Components/QueryBuilderLayout.js" file.

  3. Instruct to render the QueryBuilderLayout component in your app ("index.js" file).

    import QueryBuilderLayout from './Components/QueryBuilderLayout';

ReactDom.render(, document.getElementById('react-container'));

  4. Build and run your app ("npm run build").

 

Embedding in your Webpack app

To get Active Query Builder embedded in your Webpack app, do the following:

  1. Create the "index.js" file in your frontend source folder and put the Active Query Builder JavaScript initialization code into it. See the sample in the "Scripts/Webpack/index.js" file.

  2. Create the QueryBuilder view on the server and put the Active Query Builder HTML markup code into it and add a link to the "index.js" script to it. See the sample in the "Views/WebpackClientRendering/Index.cshtml" file.

  3. Copy the "aqb.client.js" file to the frontend folder.

  4. Build and run your app ("npm run build").

 

Embedding in your Electron app

To get Active Query Builder embedded in your Electron app, do the following:

  1. Copy the "aqb.client.js" file to the frontend folder.

  2. Create the "renderer.js" file in your frontend source folder and put the Active Query Builder JavaScript initialization code into it. See the sample in the "Scripts/Electron/renderer.js" file.

  3. Create the QueryBuilder view and put the Active Query Builder HTML markup code into it and add a link to the "renderer.js" script to it. See the sample in the "Scripts/Electron/index.html" file.

  4. Build and run your app ("npm run build").

 

Working with the JavaScript (client-side rendering) demo project

Classic ASP.NET and ASP.NET Core

The JavaScript demo project shipped with the AQB installation project is dedicated to this way of using Active Query Builder. Angular, React, Webpack and Electron demo scripts can be found in the following folders:

  • Classic ASP.NET environment: in the "ASP.NET\Samples C#\JavaScript\Scripts" folder.
  • ASP.NET Core environment: in the "ASP.NET Core\Samples C#\JavaScript\wwwroot\js\" folder.

The Same set of projects is available on GitHub:

Angular demo app

The Angular demo app can be found in the "Scripts/Angular" folder inside the JavaScript demo project. From this directory,

  1. Execute the npm install command,

  2. Execute the npm run build command,

  3. Run the JavaScript demo project,

  4. Open the Angular demo page.

 

React demo app

The React demo app can be found in the "Scripts/React" folder inside the JavaScript demo project. From this directory,

  1. Execute the npm install command,

  2. Run the JavaScript demo project,

  3. Execute the npm start command,

  4. Open the http://localhost:8080/ReactClientRendering URL in your browser.

 

Webpack demo app

The Webpack demo app can be found in the "Scripts/Webpack" folder inside the JavaScript demo project. From this directory,

  1. Execute the npm install command,

  2. Run the JavaScript demo project,

  3. Execute the npm start command,

  4. Open the http://localhost:8080/WebpackClientRendering URL in your browser.

 

Electron demo app

The Electron demo app can be found in the "Scripts/Electron" folder inside the JavaScript demo project. From this directory,

  1. Execute the npm install command,

  2. Run the JavaScript demo project,

  3. Execute the npm start command.

Note for using Active Query Builder with Electron in ASP.NET Core: In order to work correctly (without redefining the standard storage provider), you should turn the cookie SameSite option to None:

services.AddSession(options =>
{
    // Prevent SameSite=lax cookie property for Electron
    options.Cookie.SameSite = SameSiteMode.None;
});

 

Hints and Troubleshooting

  • To load and unload Active Query Builder when it's needed, use the code sample from the JavaScript demo project: Deferred Query Builder Creation Demo.
  • To fix the 410 error with the message "Invalid SessionID" while running the frontend and backend on different ports in your local development environment, set the AQB.Web.host property to your backend URL when initializing the front end.
  • To set up CORS, add please allow using it in the Startup.cs -> Configure method as described in this article: How to enable CORS for AQB? 
Is this article helpful for you?
How to work with subqueries in Active Query Builder ASP.NET Edition?
AQB ASP.NET Edition UI Hotkeys