Reply To: Query Builder Custom Operator

[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/