Operators supported by Field of type select

[Shivani-96]

I want to create field of type create on lhs. The problem is, I cannot see any operator like > or < in the operator list. Are these types of operators supported by select field? If yes, can anyone tell how it can be done. If no, what is the workaround.

Sample expression :- MRP > Price.

[ukrbublik]

Please post your config

[Shivani-96]

const config = {
  ...InitialConfig,
     fields: {
     mrp: {
        label: 'MRP',
        type: 'number',
        valueSources: ['value'],
        fieldSettings: {
            listValues: [
              { value: 'price', title: 'Price' },
              { value: 'discount', title: 'Discount' }
            ],
        }
      },
    }
};

On my UI I want an expression like MRP > Price where all the 3 inputs are taken from dropdowns. Is there any way I can achieve this?

Here both MRP and Price are variables which will be taken from respective dropdowns.

[ukrbublik]

Please describe nested fields with !struct as follows:

    mrp: {
       label: 'MRP',
       type: "!struct",
       subfields: {
        price: {
          label: 'Price',
          type: 'number',
        },
        discount: {
          label: 'Discount',
          type: 'number',
        },
       },
     },

Currently, there is only 1 select control to choose a field.
You can change this behavior to render N+ dropdowns (depending on a level of nesting) by providing your custom component in renderField in settings.
But there are different ways to render field dropdown for AntDesign, maybe FieldCascader suits you (if you use antd)?

import { AntdConfig, AntdWidgets } from "@react-awesome-query-builder/antd";
const {
  FieldSelect,
  FieldDropdown,
  FieldCascader,
  FieldTreeSelect,
} = AntdWidgets;

const config = {
  ...InitialConfig,
  fields,
  settings: {
    ...InitialConfig.settings,
     renderField: (props) => <FieldCascader {...props} />,
  }
}

[Shivani-96]

Using the given solution UI looks something like -

It generates an expression like mrp.price > 0

My use case is different -

1. I want an expression like mrp > price .
2. There should be 3 fields. All three of them are dropdowns-

3. The middle dropdown contains list of operators.

Is it possible to add other comparison operators like < or > in the list?

[ukrbublik]

Sorry, I misunderstood you.
You need to extends your types:

import merge from "lodash/merge";

  const types = {
    ...InitialConfig.types,
    select: merge({}, InitialConfig.types.select, {
      widgets: {
        select: {
          operators: [
            "select_equals",
            "select_not_equals",
            "is_null",
            "is_not_null",
            // add your ops
          "less",
          "less_or_equal",
          "greater",
          "greater_or_equal",
          ]
        }
      }
    }),

[Shivani-96]

Do you mind explaining it a bit further? I am not sure where and how to use it.

[ukrbublik]

Put types inside config:

const config = {
  ...InitialConfig,
     fields,
     types,
}

[Shivani-96]

It's working. Thanks a lot! :)