The documentation for the Angular Query Builder says that "The expression tree can then be easily transformed to a query in the format the backend supports".
https://ko.infragistics.com/products/ignite-ui-angular/angular/components/query-builder
Are any examples of how this is done available?
Alternatively I would appreciate an example of how the Query Builder expression tree could be used to filter an array of objects in the Angular app. Object property names would match the fields passed to the expression tree.
Hi Mark,
I am glad that you find my suggestions helpful. Thank you for using Infragistics components!
Best regards,
Bozhidara Pachilova
Thanks, it looks like a similar approach to what I was doing so I think we'll be able to do what we need with this.
I am glad that you find the provided examples helpful.
To address your question about persisting the expressions tree, since the JSON format does not support functions, it is expected that some additional handling needs to be performed in order to restore objects including such.
For instance, this is listed as a limitation in the Grid State Persistence topic. Still, the grid itself supports restoring the filtering state with minimal code required as demonstrated in this section of the referenced topic. For a grid column, for instance, IgxFilteringOperand instance has to be assigned to the “filters” property.
A similar approach can be adopted for the saved expression tree of the IgxQueryBuilder component and you are most likely on the right track to achieving it, as you have mentioned already attempting to restore the condition logic on the filtering operands.
However, I am afraid that at the time of writing this there is not built-in API for this, as there is for the grid and the IgxGridState directive. Nevertheless, adopting the approach from the directive, the expression tree object can be reconstructed. For reference, I have created this other sample demonstrating an example implementation.
If you require any further assistance on the matter, please, let me know.
Best regards,Bozhidara Pachilova
Hi,
Thanks for this. I think I'll be able to do what I need with these approaches.
In addition to this, is there a recommended approach to store/retrieve Expression Trees users create and apply to a Query Builder?
I've had some success using JSON.stringify and JSON.parse but I've had to do some additional processing of the reconstructed expression tree before setting the queryBuilder.expressionTree. Mainly reconstructing the operand.condition objects to ensure the logic function is created.
Thank you for posting to Infragistics Community!
I have prepared two StackBlitz samples demonstrating the requested features.
The first one shows a remote filtering scenario. The data source is the online Northwind DB for the ‘Suppliers’ table.
The example is built by following the approach from the Grid Remote Data Operations examples with the service code slightly modified to adapt to the query builder’s expressionTree object.
The sample demonstrates the results fetched from the remote query in a grid.
A small disclaimer I would like to include is that since most of the string query-building logic is defined on application level, please, make sure to thoroughly test it, if adopting and further customizing a similar approach. Of course, the resulting URL has to be adapted as per your own API's specifications.
Addressing your second requirement, this other sample shows the same, only executed over a locally stored array with the ‘Supplier’ table objects. The approach here is quite straightforward, as the exposed by the Ignite UI for Angular library FilteringStrategy could be leveraged outside the grid as well. It provides a convenient way to filter a dataset based on an IFilteringExpressionsTree object. Note, that the query builder’s own expressionTree is of type IExpressionTree and has to be casted to the latter to be passed as an argument to the filter function.
In conclusion, please, check out the referenced resources and let me know if you have any additional questions on the matter.
Best regards, Bozhidara Pachilova Associate Software Developer