Embedding Active Query Builder in a Single-Page Application

Last modified: 2 years ago

Here are the basic steps and things you should take care of embedding Active Query Builder in your SPA app.

1. Preparing a boilerplate

Visual Studio 2019 and higher contains the boilerplates for some client frameworks like Angular and React.js. Here, you only need to select a project template while creating a new project. Others like Vue.js require manual preparation, so you should start with an empty project.

2. Adding Active Query Builder to your project

To begin with add the following references to your .NET Core project:

ActiveQueryBuilder.Core.NETCore.dll
ActiveQueryBuilder.Web.Server.NETCore.dll
ActiveQueryBuilder.Web.Core.NETCore.dll

You might need other references to get connected to different .NET DB providers.

Get the component's server-side connected to your app via the Startup.cs file.

- Add these lines to the ConfigureServices method:

    services.AddSession();
    services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
    services.AddScoped<IQueryBuilderInstanceFactory, QueryBuilderFactory>(); // the factory to create QueryBuilder instances

    services.AddActiveQueryBuilder();

- Add these lines to the Configure method:

    app.UseSession();
    app.UseActiveQueryBuilder();

These lines register the component's modules in the DI container and include the component into the HTTP request handling pipeline.

3. Creating a factory to create and initialize server-side instances of the component

    public class QueryBuilderFactory : IQueryBuilderInstanceFactory
    {
        private readonly IQueryBuilderService _qbService;

        public QueryBuilderFactory(IQueryBuilderService qbService)
        {
            _qbService = qbService;
        }

        public QueryBuilder Create(string name) // name of the instance (instance Id)
        {
            var qb = _qbService.Create(name);

            // specify the right instance of the syntax provider to define proper 
            // SQL syntax rules for your database server.
            // Using the Generic syntax provider is the worst option!
            qb.SyntaxProvider = new GenericSyntaxProvider();

            // Put your code to load metadata instead of the following line. 
            // There are plenty of ways to do this.
            qb.MetadataLoadingOptions.OfflineMode = true; 

            qb.MetadataStructure.Refresh();

            return qb;
        }
    }

In the controller, you can get access to the right instance of QueryBuilder object using the IQueryBuilderService.Get(instanceId) method.

4. Setting up the client-side

Mount the component to your page with the following code:

import AQB from './aqb.client';

  componentDidMount() {
    this.name = 'MyAQB'; // AQB instance Id

    window.AQB = AQB;

    AQB.Web.UI.QueryBuilder(this.name, this.querybuilder);
    AQB.Web.UI.ObjectTreeView(this.name, this.treeview);
    AQB.Web.UI.SubQueryNavigationBar(this.name, this.navbar);
    AQB.Web.UI.Canvas(this.name, this.canvas);
    AQB.Web.UI.StatusBar(this.name, this.statusbar);
    AQB.Web.UI.Grid(this.name, this.grid);
    AQB.Web.UI.SqlEditor(this.name, this.sql);

    AQB.Web.UI.autoInit();
  }

Please review the respective demo project for your client framework to set up the component client-side.

5. Additional: setting up token-based query builder instantiation

Regularly, Active Query Builder stores the client state using the ASP.NET Session mechanism. But relying on sessions may be undesirable in projects with complex architecture. Having the Enterprise edition of Active Query Builder, you can redefine the client state storage mechanism to save the state wherever you want, including saving it on the client, making your server stateless.

- Creating a token-based stage storage provider.

- Building a stateless server for Active Query Builder ASP.NET Edition.

- React.Js token-based demo

Active Query Builder support area