HTML OData Query Builder

Question

I developed an OData web services which exposes my entity framework model, now I need to develop a Query Builder like this,

http://odata.intel.com/QueryBuilder

Are there any HTML or JS plugin I could use, I am open to JQuery or Angularjs, bootstrap or any other plugin available instead of recreating wheel.

Answer 1

1. https://odataquerybuilder.codeplex.com/

var url = 'https://services.odata.org/V4/Northwind/Northwind.svc';
var builder = new Xrm.oData.QueryBuilder(url)
			.setEntity('Orders')
			.setColumns('OrderID,CustomerID,ShipCountry')
			.setExpand('Order_Details')
			.setFilters(new Xrm.oData.FilterInfo({
				filterType: Xrm.oData.FilterTypes.And,
				filterExpressions: [
					"ShipCountry eq 'Sweden'",
					'OrderID lt 10800'
				],
				filters: [
					new Xrm.oData.FilterInfo({
						filterType: Xrm.oData.FilterTypes.Or,
						filterExpressions: [
							"CustomerID eq 'BERGS'",
							'OrderID gt 10700'
						],
						filters: [],
					}),
				]
			}))
			.setOrders([
				new Xrm.oData.OrderColumn({
					column: 'CustomerID',
					order: Xrm.oData.OrderTypes.Asc
				}),
				new Xrm.oData.OrderColumn({
					column: 'OrderID',
					order: Xrm.oData.OrderTypes.Desc
				})
			])
			.setSkip(10)
			.setTop(5);

var queryString = builder.getQueryFiltersPart();
console.log(queryString);

<script src="http://yourjavascript.com/58162111474/odata-querybuilder-0-1-min.js"></script>

Result: $select=OrderID,CustomerID,ShipCountry&$expand=Order_Details&$filter=(ShipCountry eq 'Sweden') and (OrderID lt 10800) and ((CustomerID eq 'BERGS') or (OrderID gt 10700))&$orderby=CustomerID,OrderID desc&$skip=10&$top=5

2. https:// odatasamples.codeplex .com/releases/view/115752

This one generates html ui based on service metadata. You can customize it according to your needs by modifying it. After download and before run, modify "datajs-1.1.1.js", line 2593:

• from

  xhr.open(request.method || "GET", url, true, request.user, request.password; 
  

• to

  xhr.open(request.method || "GET", "https:// cors-anywhere.herokuapp .com/" + url, true, request.user, request.password);

** bug fix (http:// stackoverflow .com/questions/30318371/northwind-odata-service-not-working)

enter image description here