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;

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;

Sets or gets whether changes to the value are applied on change event or immediately.

Possible values:

• 'immediately'
• 'change'

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;

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;

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;

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;

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;

Sets or gets whether new fields can be dynamically added by typing in the field (property) box.

Possible values:

• 'dynamic'
• 'static'

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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.
 }
 

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.
 }
 

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.
 }
 

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.
 }
 

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.
 }
 

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.
 }