Is it possible to customize new operators for my project?

[AndresPalacio]

Hi, currently I haven't found a way to implement a new operator for my case isPrime (example) to generate a SpEL. Is there a way to configure this? The following is my current configuration. @ukrbublik

import React, {Component} from 'react';
import {Query, Builder, Utils as QbUtils, Operators} from 'react-awesome-query-builder';
import {Button} from 'react-bootstrap'

import 'react-awesome-query-builder/css/antd.less';
import MaterialConfig from 'react-awesome-query-builder/lib/config/material';

import 'react-awesome-query-builder/lib/css/styles.css';
import 'react-awesome-query-builder/lib/css/compact_styles.css';


const InitialConfig = MaterialConfig; 

Operators.isPrime = {
  label: 'Is Prime',
  labelForFormat: 'Is Prime',
  mongoFormatOp: (field, op, value) => ({[field]: {[op]: value}}),
  jsonLogic: (field, op, value) => ({[op]: [field, value]}),
  reversedOp: 'isNotPrime',
  cardinality: 1,
  formatOp: (field, op, value, valueSrc, valueType, opDef, operatorOptions, isForDisplay) => {
    if (isForDisplay) {
      return `${field} ${op} ${value}`;
    }
    return `${field} ${op} ${value}`;
  },
  sqlFormatOp: (field, op, value) => `${field} ${op} ${value}`,
  valueLabels: [
    {
      label: 'Number',
      placeholder: 'Enter number',
    },
  ],
  textSeparators: [
    {
      label: 'and',
      value: 'and',
    },
  ],
  valueSources: ['value'],
  preferWidgets: ['number'],
};

const config = {
  ...InitialConfig,
  funcs: {
    isPrime: {
      label: 'Is Prime',
      mongoFunc: 'isPrime',
      returnType: 'boolean',
      args: {
        num: {
          type: 'number',
          valueSources: ['value'],
        }
      }
    }
  },
  fields: {
    id: {
      label: 'ID',
      type: 'number',
      valueSources: ['value'],
      preferWidgets: ['number'],
      mainWidgetProps: {
        formatValue: (val) => `${val}`,
        valueLabel: 'ID',
        valuePlaceholder: 'Enter ID',
      },      
      sqlExpr: (field, operator, value, valueSrc, valueType, op, negate) => {
        if (operator === 'equal') return `${field} = ${value}`;
        if (operator === 'not_equal') return `${field} <> ${value}`;
        if (operator === 'less') return `${field} < ${value}`;
        if (operator === 'less_or_equal') return `${field} <= ${value}`;
        if (operator === 'greater') return `${field} > ${value}`;
        if (operator === 'greater_or_equal') return `${field} >= ${value}`;
        if (operator === 'is_empty') return `${field} = '' OR ${field} IS NULL`;
        if (operator === 'is_not_empty') return `${field} <> '' AND ${field} IS NOT NULL`;
        if (operator === 'constains') return `${field} LIKE '%${value}%'`;
        if (operator === 'ends_with') return `${field} LIKE '%${value}'`;
        if (operator === 'starts_with') return `${field} LIKE '${value}%'`;
        
        return undefined;
      }
  },
  fields... 
};
 
// You can load query value from your backend storage (for saving see `Query.onChange()`)
const queryValue = {"id": QbUtils.uuid(), "type": "group"};
 
 
class FormSQL extends Component {
    state = {
      tree: QbUtils.checkTree(QbUtils.loadTree(queryValue), config),
      config: config
    };
    
    render = () => (
      <div>
        <Query
        // create custom operator for Quer       
            {...config} 
            value={this.state.tree}
            onChange={this.onChange}
            renderBuilder={this.renderBuilder}
        />
        {this.renderResult(this.state)}
      </div>
    )
 
    renderBuilder = (props) => (
      <div className="query-builder-container" style={{padding: '10px'}}>
        <div className="query-builder qb-lite">
            <Builder {...props} />
        </div>
      </div>
    )
 

    renderResult = ({tree: immutableTree, config}) => (
      <div className="query-builder-result">
          <div>Query string: <pre>{JSON.stringify(QbUtils.queryString(immutableTree, config))}</pre></div>
          <div>MongoDb query: <pre>{JSON.stringify(QbUtils.mongodbFormat(immutableTree, config))}</pre></div>
          <div>SQL where: <pre>{JSON.stringify(QbUtils.sqlFormat(immutableTree, config))}</pre></div>
          <div>JsonLogic: <pre>{JSON.stringify(QbUtils.jsonLogicFormat(immutableTree, config))}</pre></div>
          <div>SPEL FORMAT: <pre>{JSON.stringify(QbUtils.spelFormat(immutableTree, config))}</pre></div>
      </div>
    )

    
    onChange = (immutableTree, config) => {
      // Tip: for better performance you can apply `throttle` - see `examples/demo`
      this.setState({tree: immutableTree, config: config});
 
      const jsonTree = QbUtils.getTree(immutableTree);
      console.log(jsonTree);
      // `jsonTree` can be saved to backend, and later loaded to `queryValue`
    }
}

export default FormSQL;

[ukrbublik]

Hi.
Is isPrime a function or operator?
Sorry, not clear from your config what's the purpose of isPrime. But you can use spelOp and spelFunc to customize output, see https://github.com/ukrbublik/react-awesome-query-builder/blob/master/CONFIG.adoc

[AndresPalacio]

It is correct, it is an operator and I would like to use it by sending an array, where args would be an array and the method is called isPrime(array). Could you provide me an example of spelOp? Finally, it is the option that I require by sending in spel .isPrime(arg) instead of ==, for example.

[AndresPalacio]

I have this definition of operators to test the creation of operators, It is possible to create the customization of this operator, when I try to use it, the input does not appear, but select func?

  operators: {
        ...InitialConfig.operators,
        is_not_op: {
            label: "Is Not",
            reversedOp: "isOP",
            isNotOp: true,
            cardinality: 0,
            formatOp: (field, op, value, valueSrc, valueType, opDef, operatorOptions, isForDisplay) => {
                return `!(${value})`;
            },
            labelForFormat: "not equal",
            mongoFormatOp: (field, op, value, valueSrc, valueType, opDef, operatorOptions) => {
                return { [field]: { "$ne": value } };
            },
            spelOp:"<>",
            sqlFormatOp: (field, op, values, valueSrc, valueType, opDef, operatorOptions) => {
                return `${field} <> ${values}`;
            },
            jsonLogic: "!=",
            _jsonLogicIsRevArgs: true,
            elasticSearchQueryType: "must_not",
            spelFormatOp: (field, op, values, valueSrc, valueType, opDef, operatorOptions) => {
                return `${field} <> ${values}`;
            },
            
        },
        matches_regex: {
            label: "Matches Regex Prueba ",
            reversedOp: "matches_regex",
            labelForFormat: "matches regex",
            isNotOp: false,
            cardinality: 1,
            jsonLogic: "matches_regex",
            formatOp: (field, op, value, valueSrc, valueType, opDef, operatorOptions, isForDisplay) => {
                return `${field} matches /${value}/`;
            }, 
            mongoFormatOp: (field, op, value, valueSrc, valueType, opDef, operatorOptions) => {
                return { [field]: { "$regex": value, "$options": "i" } };
            },
            spelOp:"matches",
            sqlFormatOp: (field, op, values, valueSrc, valueType, opDef, operatorOptions) => {
                return `${field} matches /${values}/`;
            },
            spelFormatOp: (field, op, values, valueSrc, valueType, opDef, operatorOptions) => {
                if (valueSrc === 'value') {
                    return `(${field}?:'null').toString().matches('.*(${values})$')`;
                } else {
                    return `(${values})?.toString().matches('.*(${field})$')`;
                }
            },
            _jsonLogicIsRevArgs: false,
            valueSources: ["value", "field"],
        
        }

    },