Name
|
Type
|
Default Value
|
allowDrag
|
boolean
|
false
|
Enables the dragging of conditions inside a group or between groups.
Code examples
Set the allowDrag property.
<smart-query-builder allow-drag></smart-query-builder> Set the allowDrag property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.allowDrag = false;
Get the allowDrag property.
const queryBuilder = document.querySelector('smart-query-builder');
let allowDrag = queryBuilder.allowDrag;
|
animation
|
string
|
'advanced'
|
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Possible values: - 'none' - animation is disabled
- 'simple' - ripple animation is disabled
- 'advanced' - all animations are enabled
Code examples
Set the animation property.
<smart-query-builder animation='none'></smart-query-builder> Set the animation property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.animation = 'simple';
Get the animation property.
const queryBuilder = document.querySelector('smart-query-builder');
let animation = queryBuilder.animation;
|
applyMode
|
string
|
'change'
|
Sets or gets whether changes to the value are applied on change event or immediately.
Possible values:
Code examples
Set the applyMode property.
<smart-query-builder apply-mode='immediately'></smart-query-builder> Set the applyMode property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.applyMode = 'change';
Get the applyMode property.
const queryBuilder = document.querySelector('smart-query-builder');
let applyMode = queryBuilder.applyMode;
|
customOperations
|
{label: string, name: string, hideValue: boolean}[]
|
|
Adds more operations that can be used in the query bilder's conditions structure. Each custom operation can have the following fields: - label - label to be displayed in the operator box. Multiple operations with the same label can exist.
- name - unique name of the operation
- editorTemplate - callback function that creates a custom value editor
- valueTemplate - callback function that displays the value after the edior has been closed
- handleValue - callback function that handles the value returned by the editor when it is closed
- hideValue - a boolean condition that specifies whether the operation requires a value or not
Code examples
Set the customOperations property.
<smart-query-builder custom-operations='[{ label: "Matches /^\d{7}$/g", name: "/^\d{7}$/g", hideValue: true }, { label: "Similar to", name: "similar" }]'></smart-query-builder> Set the customOperations property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.customOperations = [{ label: 'Is valid', name: 'isvalid' }];
Get the customOperations property.
const queryBuilder = document.querySelector('smart-query-builder');
let customOperations = queryBuilder.customOperations;
|
disabled
|
boolean
|
false
|
Enables or disables the element.
Code examples
Set the disabled property.
<smart-query-builder disabled></smart-query-builder> Set the disabled property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.disabled = false;
Get the disabled property.
const queryBuilder = document.querySelector('smart-query-builder');
let disabled = queryBuilder.disabled;
|
dropDownWidth
|
string
|
'100%'
|
Sets or gets the dropdown width of the property and operator editors.
Code examples
Set the dropDownWidth property.
<smart-query-builder drop-down-width='300'></smart-query-builder> Set the dropDownWidth property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.dropDownWidth = '80%';
Get the dropDownWidth property.
const queryBuilder = document.querySelector('smart-query-builder');
let dropDownWidth = queryBuilder.dropDownWidth;
|
fields
|
{label: string, dataField: string, dataType: string, dataType: string, format: any, filterOperations: string[]}[]
|
null
|
Array with filter fields and their settings. The available field settings are: - label - the field's label, as it will appear in the field selection drop down
- dataField - the field's data field
- dataType - the field's data type
- filterOperations - an array of the filter operations applicable to the field; if not set, the default filter operations are applied
- lookup - an object with settings for customizing the field's respective value selection input. It has the following settings:
- autoCompleteDelay - delay between typing in the input and opening the drop down with available options
- dataSource - an array of available options to choose from (appear in a drop down)
- minLength - minimum number of charactes to type in the input before the options drop down is displayed
- readonly - if set to true, the value selection input acts as a drop down list, otherwise it acts as a combo box
Code examples
Set the fields property.
<smart-query-builder fields='[{ "label": "id", "dataField": "id", "dataType": "number", "format": null, "filterOperations": ["=", "anyof"] }, { "label": "Product", "dataField": "productName", "dataType": "string", "format": null }]'></smart-query-builder> Set the fields property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.fields = [{ "label": "id", "dataField": "id", "dataType": "number", "format": null, "filterOperations": ["=", "anyof"] }, { "label": "Product", "dataField": "productName", "dataType": "string", "format": null }];
Get the fields property.
const queryBuilder = document.querySelector('smart-query-builder');
let fields = queryBuilder.fields;
|
fieldsMode
|
string
|
'dynamic'
|
Sets or gets whether new fields can be dynamically added by typing in the field (property) box.
Possible values:
Code examples
Set the fieldsMode property.
<smart-query-builder fields-mode='static'></smart-query-builder> Set the fieldsMode property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.fieldsMode = 'dynamic';
Get the fieldsMode property.
const queryBuilder = document.querySelector('smart-query-builder');
let fieldsMode = queryBuilder.fieldsMode;
|
formatStringDate
|
string
|
'dd-MMM-yy'
|
Sets or gets the format string of the editor of fields with type 'date'.
Code examples
Set the formatStringDate property.
<smart-query-builder format-string-date='dddd-MMMM-yyyy'></smart-query-builder> Set the formatStringDate property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.formatStringDate = 'M/d/yyyy';
Get the formatStringDate property.
const queryBuilder = document.querySelector('smart-query-builder');
let formatStringDate = queryBuilder.formatStringDate;
|
formatStringDateTime
|
string
|
'dd-MMM-yy HH:mm:ss'
|
Sets or gets the format string of the editor of fields with type 'datetime'.
Code examples
Set the formatStringDateTime property.
<smart-query-builder format-string-date-time='h:mm:ss tt'></smart-query-builder> Set the formatStringDateTime property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.formatStringDateTime = 'yyyy-MM-dd hh:mm:ss';
Get the formatStringDateTime property.
const queryBuilder = document.querySelector('smart-query-builder');
let formatStringDateTime = queryBuilder.formatStringDateTime;
|
getDynamicField
|
function | null
|
null
|
A callback function called when a field is added dynamically. Used for configuring settings of the new field. Applicable only when fieldsMode is 'dynamic'.
Code examples
Set the getDynamicField property.
<smart-query-builder get-dynamic-field='getDynamicFieldFunction'></smart-query-builder> Set the getDynamicField property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.getDynamicField = function (field) { return { dataField: field.toLowerCase(), dataType: 'number', filterOperations: ['<', '>'] }; };
Get the getDynamicField property.
const queryBuilder = document.querySelector('smart-query-builder');
let getDynamicField = queryBuilder.getDynamicField;
|
icons
|
object
|
{ '=': 'equals', '<>': 'notequals', '>': 'greaterthan', '>=': 'greaterthanorequal', '<': 'lessthan', '<=': 'lessthanorequal', 'startswith': 'startswith', 'endswith': 'endswith', 'contains': 'contains', 'notcontains': 'notcontains', 'isblank': 'isblank', 'isnotblank': 'isnotblank' }
|
Defines CSS classes to be applied to each of the built-in operations. Icons for these classes are applied in the smart-query-builder style sheet. This property is applicable only if showIcons is set to true.
Code examples
Set the icons property.
<smart-query-builder icons='{ "=": "equals", "<>": "notequals", ">": "greaterthan", ">=": "greaterthanorequal", "<": "lessthan", "<=": "lessthanorequal", "startswith": "startswith", "endswith": "endswith", "contains": "contains", "notcontains": "notcontains", "isblank": "blank", "isnotblank": "notblank" }'></smart-query-builder> Set the icons property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.icons = { '=': 'equals', '<>': 'notequals', '>': 'greaterthan', '>=': 'greaterthanorequal', '<': 'lessthan', '<=': 'lessthanorequal', 'startswith': 'startswith', 'endswith': 'endswith', 'contains': 'contains', 'notcontains': 'notcontains', 'isblank': 'blank', 'isnotblank': 'notblank' };
Get the icons property.
const queryBuilder = document.querySelector('smart-query-builder');
let icons = queryBuilder.icons;
|
locale
|
string
|
'en'
|
Sets or gets the language. Used in conjunction with the property messages.
Code examples
Set the locale property.
<smart-query-builder locale='de'></smart-query-builder> Set the locale property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.locale = 'fr';
Get the locale property.
const queryBuilder = document.querySelector('smart-query-builder');
let locale = queryBuilder.locale;
|
localizeFormatFunction
|
function | null
|
null
|
Callback, related to localization module.
Code examples
Set the localizeFormatFunction property.
<smart-query-builder localize-format-function='function(){return '...'}'></smart-query-builder> Set the localizeFormatFunction property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.localizeFormatFunction = function(){return '...'};
Get the localizeFormatFunction property.
const queryBuilder = document.querySelector('smart-query-builder');
let localizeFormatFunction = queryBuilder.localizeFormatFunction;
|
messages
|
object
|
Please expand entry to see value
|
Defines field names of the filtered element.
Default value:
{
"en": {
"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",
"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",
"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",
"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
"moduleUndefined": "Module is undefined.",
"missingReference": "{{elementType}}: Missing reference to {{files}}.",
"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",
"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
"addCondition": "Add Condition",
"addGroup": "Add Group",
"and": "And",
"notand": "Not And",
"or": "Or",
"notor": "Not Or",
"=": "Equals",
"<>": "Does not equal",
">": "Greater than",
">=": "Greater than or equal to",
"<": "Less than",
"<=": "Less than or equal to",
"startswith": "Starts with",
"endswith": "Ends with",
"contains": "Contains",
"notcontains": "Does not contain",
"isblank": "Is blank",
"isnotblank": "Is not blank",
"wrongParentGroupIndex": "{{elementType}}: Wrong parent group index in '{{method}}' method.",
"missingFields": "{{elementType}}: Fields are required for proper condition's adding. Set \"fields\" source and then conditions will be added as expected.",
"wrongElementNode": "{{elementType}}: Incorect node / node Id in '{{method}}' method.",
"invalidDataStructure": "{{elementType}}: Used invalid data structure in updateCondition/updateGroup method."
}
}
Code examples
Set the messages property.
<smart-query-builder messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","addCondition":"Bedingung hinzufugen","addGroup":"Gruppe hinzufugen","and":"Und","notand":"Nicht und","or":"Oder","notor":"Nicht oder","=":"Gleich","<>":"Ist nicht gleich",">":"Greusser als",">=":"Greusser als oder gleich wie","<":"Weniger als","<=":"Weniger als oder gleich","startswith":"Beginnt mit","endswith":"Endet mit","contains":"Enthalt","notcontains":"Beinhaltet nicht","isblank":"Ist leer","isnotblank":"Ist nicht leer","wrongParentGroupIndex":"{{elementType}}: Falscher ubergeordneter Gruppenindex in der Methode '{{method}}'.","missingFields":"{{elementType}}: Felder sind fur das Hinzufugen der richtigen Bedingung erforderlich. Legen Sie die Quelle fur \"Felder\" fest, und die Bedingungen werden wie erwartet hinzugefugt.","wrongElementNode":"{{elementType}}: Falsche Knoten- / Knoten-ID in der Methode '{{method}}'.","invalidDataStructure":"{{elementType}}: In der Methode updateCondition / updateGroup wurde eine ungultige Datenstruktur verwendet."}}'></smart-query-builder> Set the messages property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","addCondition":"Add Condition","addGroup":"Add Group","and":"And","notand":"Not And","or":"Or","notor":"Not Or","=":"Equals","<>":"Does not equal",">":"Greater than",">=":"Greater than or equal to","<":"Less than","<=":"Less than or equal to","startswith":"Starts with","endswith":"Ends with","contains":"Contains","notcontains":"Does not contain","isblank":"Is blank","isnotblank":"Is not blank","wrongParentGroupIndex":"{{elementType}}: Wrong parent group index in '{{method}}' method.","missingFields":"{{elementType}}: Fields are required for proper condition's adding. Set \"fields\" source and then conditions will be added as expected.","wrongElementNode":"{{elementType}}: Incorect node / node Id in '{{method}}' method.","invalidDataStructure":"{{elementType}}: Used invalid data structure in updateCondition/updateGroup method."}};
Get the messages property.
const queryBuilder = document.querySelector('smart-query-builder');
let messages = queryBuilder.messages;
|
operatorPlaceholder
|
string
|
'Operator'
|
The placeholder text is used in the condition's operator box in case an operator is not selected.
Code examples
Set the operatorPlaceholder property.
<smart-query-builder operator-placeholder='Operator not set'></smart-query-builder> Set the operatorPlaceholder property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.operatorPlaceholder = 'Choose operator...';
Get the operatorPlaceholder property.
const queryBuilder = document.querySelector('smart-query-builder');
let operatorPlaceholder = queryBuilder.operatorPlaceholder;
|
propertyPlaceholder
|
string
|
'Property'
|
The placeholder text is used in the condition's field (property) box in case a field is not selected.
Code examples
Set the propertyPlaceholder property.
<smart-query-builder property-placeholder='Property not set'></smart-query-builder> Set the propertyPlaceholder property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.propertyPlaceholder = 'Choose property...';
Get the propertyPlaceholder property.
const queryBuilder = document.querySelector('smart-query-builder');
let propertyPlaceholder = queryBuilder.propertyPlaceholder;
|
showIcons
|
boolean
|
false
|
Enables or disables the display of the icons.
Code examples
Set the showIcons property.
<smart-query-builder show-icons></smart-query-builder> Set the showIcons property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.showIcons = false;
Get the showIcons property.
const queryBuilder = document.querySelector('smart-query-builder');
let showIcons = queryBuilder.showIcons;
|
theme
|
string
|
''
|
Determines the theme. Theme defines the look of the element
Code examples
Set the theme property.
<smart-query-builder theme='blue'></smart-query-builder> Set the theme property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.theme = 'red';
Get the theme property.
const queryBuilder = document.querySelector('smart-query-builder');
let theme = queryBuilder.theme;
|
unfocusable
|
boolean
|
false
|
If is set to true, the element cannot be focused.
Code examples
Set the unfocusable property.
<smart-query-builder unfocusable></smart-query-builder> Set the unfocusable property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.unfocusable = false;
Get the unfocusable property.
const queryBuilder = document.querySelector('smart-query-builder');
let unfocusable = queryBuilder.unfocusable;
|
value
|
any
|
|
The value is represented by multidimensional array. The array contains group operators with conditions. Each group can contain multiple conditions.
Code examples
Set the value property.
<smart-query-builder value='[[["productCode", "/^\d{7}$/g"], "or", ["id", "isvalid", true]]]'></smart-query-builder> Set the value property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.value = [[['available', '=', true], 'and', ['price', '<', 1300],], 'or', [['produced', '>', new Date(2015, 3, 4)], 'and', ['purchased', '>=', new Date(2020, 4, 23, 15, 33)]]];
Get the value property.
const queryBuilder = document.querySelector('smart-query-builder');
let value = queryBuilder.value;
|
valueFormatFunction
|
function | null
|
null
|
Callback used to format the content of the value fields.
Code examples
Set the valueFormatFunction property.
<smart-query-builder value-format-function='function (value) { return value + '%'; }'></smart-query-builder> Set the valueFormatFunction property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.valueFormatFunction = function (value) { return value + '$'; };
Get the valueFormatFunction property.
const queryBuilder = document.querySelector('smart-query-builder');
let valueFormatFunction = queryBuilder.valueFormatFunction;
|
valuePlaceholder
|
string
|
'Value'
|
The placeholder text is used in the condition's value box in case a value is not set.
Code examples
Set the valuePlaceholder property.
<smart-query-builder value-placeholder='Value not set'></smart-query-builder> Set the valuePlaceholder property by using the HTML Element's instance.
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.valuePlaceholder = 'Choose value...';
Get the valuePlaceholder property.
const queryBuilder = document.querySelector('smart-query-builder');
let valuePlaceholder = queryBuilder.valuePlaceholder;
|
|
Name
|
Type
|
|
change
|
Event
|
|
This event is triggered when the query builder's value is changed.
Code examples
Bind to the change event by type: smartQueryBuilder
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.addEventListener('change', function (event) {
// event handling code goes here.
}
|
dragEnd
|
Event
|
|
This event is triggered when a dragged condition is dropped. This action can be canceled by calling event.preventDefault() in the event handler function.
Code examples
Bind to the dragEnd event by type: smartQueryBuilder
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.addEventListener('dragEnd', function (event) {
// event handling code goes here.
}
|
dragging
|
Event
|
|
This event is triggered when a condition is being dragged.
Code examples
Bind to the dragging event by type: smartQueryBuilder
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.addEventListener('dragging', function (event) {
// event handling code goes here.
}
|
dragStart
|
Event
|
|
This event is triggered when a dragging operation is started in smart-query-builder. This action can be canceled by calling event.preventDefault() in the event handler function.
Code examples
Bind to the dragStart event by type: smartQueryBuilder
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.addEventListener('dragStart', function (event) {
// event handling code goes here.
}
|
itemClick
|
Event
|
|
This event is triggered when some of the query builder's building blocks is clicked.
Code examples
Bind to the itemClick event by type: smartQueryBuilder
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.addEventListener('itemClick', function (event) {
// event handling code goes here.
}
|
propertySelected
|
Event
|
|
This event is triggered when a property (field) has been selected.
Detail:
- label - the selected option's label
- value - the selected option's value
Code examples
Bind to the propertySelected event by type: smartQueryBuilder
const queryBuilder = document.querySelector('smart-query-builder');
queryBuilder.addEventListener('propertySelected', function (event) {
const detail = event.detail,
label = detail.label,
value = detail.value;
// event handling code goes here.
}
|
|
Name
|
Type
|
Return Type
|