Query Builder Custom Operator

[Joseph Ostreicher]

Do you folks support the “between/notbetween” operator to be added as a custom operator (where it requires two values for the operator) to your query builder?

[yavordashew]

Hi JoeO,
Our Query Builder does not support the exact same operator you mentioned.
But if you need custom operator you can have look at the https://www.htmlelements.com/docs/querybuilder-api/#toc-customoperations_any .
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Joseph Ostreicher]

Hi Yavor, it did review the custom, it didnt seem like one can add a between concept. Are you saying it is possible?
Also, in terms of the licensing, say i get the “Developer License”. Once the app is completed, i can deploy it any number of servers? In other words, you only have a single fee for the product itself?
 
 
 

[yavordashew]

Hi JoeO,
Yes it is possible to add between/ not between operators if you want the query builder to make this type of operation you basically want to filter the value like the following:
In your JS file :
window.Smart(‘#queryBuilder’, class {
get properties() {
return {
allowDrag: true,
fields: [
{ label: ‘Unit Price’, dataField: ‘price’, dataType: ‘number’ ,filterOperations:[ ‘>’, ‘<‘] },
],
showIcons: true,
value: [
[
[‘price’, ‘>’, 1300],
[‘price’, ‘<‘, 1500],
],
]
};
}
});
window.onload = function () {
const queryBuilder = document.getElementById(‘queryBuilder’), filterQueryValue = document.getElementById(‘filterQueryValue’);
filterQueryValue.innerHTML = JSON.stringify(queryBuilder.value, null, ‘\t’);
queryBuilder.addEventListener(‘change’, function () {
filterQueryValue.innerHTML = JSON.stringify(queryBuilder.value, null, ‘\t’);
});
console.log(queryBuilder.value)
};
And in you HTML :
<smart-query-builder id=”queryBuilder”></smart-query-builder>
<div class=”options”>
<div class=”option”>
<div id=”filterQueryValue”></div>
</div>
</div>
If you do it like this the values that will be returned are the values of the ‘Unit Price’ greater than ‘1300’ and less than ‘1500’ or if you want you can make a custom operator with the ‘Between’ and ‘Not Between’ names like so :
window.Smart(‘#queryBuilder’, class {
get properties() {
return {
allowDrag: true,
customOperations: [
{
label: ‘Between’,
name: ‘between’,
hideValue:false,
editorTemplate: function (fieldType, value, fieldData) {
//In the editorTemplate function you can create the ‘template’ for the editor itself.Here is an example if you want to add number input
const input = document.createElement(‘smart-number-input’);
input.placeholder = ‘enter number 1’
const inputContainer = document.createElement(‘div’);
inputContainer.className = ‘container’
inputContainer.appendChild(input);
return inputContainer
},
valueTemplate: function (editor, value) {
console.log(value);
},
handleValue: function (value) {
//This function handles the value returned by the ‘editor’ when it is closed
return console.log(‘Handling ‘,value)
}
},
],
fields: [
{ label: ‘Unit Price’, dataField: ‘price’, dataType: ‘number’ ,filterOperations:[ ‘>’, ‘<‘, ‘between’] // in the filterOperations array you add the name of your custom filter
},
],
showIcons: true,
value: [
[
[‘price’, ‘between’, 15],
[‘price’, ‘between’, 10],
],
]
};
}
});
window.onload = function () {
const queryBuilder = document.getElementById(‘queryBuilder’), filterQueryValue = document.getElementById(‘filterQueryValue’);
filterQueryValue.innerHTML = JSON.stringify(queryBuilder.value, null, ‘\t’);
queryBuilder.addEventListener(‘change’, function () {
filterQueryValue.innerHTML = JSON.stringify(queryBuilder.value, null, ‘\t’);
});
console.log(queryBuilder.value)
};
As for the terms of the licensing if you get the ‘ Developers Licence’ you can use it in unlimited amount of applications, but this fee applies for 12 months period only.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Joseph Ostreicher]

Hi, im trying to understand the use case behind the design of the smart query builder. I know it boils down to my code, but I would like to know what is the conceptional use case. Generally, a query builder groups items by an operator. For example, I might have an entire query using the AND operator, and then groups of items within the query using the OR operator (e.g. Condition = 1 AND 2 AND (3 OR 4 OR 5)). The smart query builder allows setting the operator on a line by line basis, and then allows grouping conditions beneath an AND or OR operator. My question is, if I can throw a mix of ANDs and ORs in a single query, then why add more groups. Furthermore, if I can mix them, then what is the conceptual logic
For example, lets say I have a query such as the below, and my code isn’t evaluating with a specific Operator precedence. Is the last AND tied to the previous line, or to the first AND?
Product = A
AND
Product = B
OR
Product = C
OR
Product = D
AND
Product = E
When comparing the two below queries. Both are the same, except, one mixed all of them into one group. What would essentially be the difference between the two?

https://imgur.com/wlggqqR

[admin]

Hi JoeO,
The purpose of the query builder is to build queries using buttons, inputs and conditions instead of writing them manually. Logically you can achieve the same output with different queries. We hope it fits to your application needs.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts