/angular-query-builder

An elegant, easily customizable Formula/Query Builder in Angular.

Primary LanguageJavaScript

ngQueryBuilder | Angular Query Builder

An elegant, easily customizable SQL Query Builder in Angular..

Description

  • An angular directive for Formula/Query Builder.
  • Works well with/without Bootstrap/Foundation.

Dependecies

  • Angular.js
  • jQuery

Installation

Install using bower

bower install ngQueryBuilder
or

Get the queryBuilder.min.js & queryBuilder.css files from dist folder.

Usage

  • Make sure you include the ngQueryBuilder module in you angular app:
angular.module('myApp', ['ngQueryBuilder']);
  • once you've added the module in your app. Use the code below to get the query builder up and running:
<query-builder data="query"                                        // Object in which the query will be reflected 
			columns="columns"               //Columns for building query (Should be Array of Strings | eg - ['NAME', 'AGE', 'GENDER'])
			operations="operations">   //Operations  which are to be applied on columns (Should be Array of Strings | eg - ['<', '>', '='])
</query-builder>

Output JSON


{
	"bracketIds": [3, 2, 1, 1, 2, 3], //Storing Ids for easier repopulation of stored queries
	"expression": "(((0OR1)AND2)AND3)", // Expression corresponding to the query created by the user.
	"operands": { // Stores the variables referenced in the expression above
		"0": {
			"colName": "FirstName",
			"custom": "",
			"operation": "is",
			"type": "basic",
			"value": "Tom"
		},
		"1": {
			"colName": "LastName",
			"custom": "",
			"operation": "==",
			"type": "basic",
			"value": "Cruise"
		},
		"2": {
			"colName": "Age",
			"custom": "",
			"operation": ">",
			"type": "basic",
			"value": "30"
		},
		"3": {
			"colName": "",
			"custom": "someFunction(convertHeightToCms(height))",
			"operation": "",
			"type": "custom",
			"value": ""
		}
	}
}

Customization

  • You can easily customize the look and feel of the query builder by changing the following variables in the queryBuilder.scss file as per your requirement:
$border-color: #EAEAEA; // border color for the dropdown & the list inside the dropdown
$label-background: #444; //background of label showing operators (AND, OR, +, - ,etc)
$text-color: #333; // Color of text
$light-gray: #FAFAFA; // Color of popover header
  • Run gulp sass to get the complied css file from css/multiselectdropdown.css

Demo

visit http://fauzankhan.github.io/angular-query-builder/ to see the Query Builder in action