Allow Rendering UI Elements for Customized JSON Fields in Import Rules and allow to render an additional UI element for each rule

[Karthikeyan Karthikeyan]

 

Hello Syncfusion Team,

I am working with the QueryBuilder component and have a requirement to include additional, custom fields within the rules  array of my importRules  JSON object. In my specific scenario, I need to include a fieldId as a unique identifier for each rule.

Currently, my importRules structure looks like this:
var importRules = {

'condition': 'and',

'rules': [

      { 'label': 'Transaction Type', 

       'field': 'TransactionType',

       'type': 'string', 

       'operator': 'equal', 

       'value': 'Expense',

       'fieldId':  '1'  // My desired custom field  }, 

    { 'label': 'Payment Mode', 

     'field': 'PaymentMode',

     'type': 'string', 

    'operator': 'equal', 

    'value': 'Cash',

    'fieldId': '2'  // My desired custom field   } ]  };

While I can include this fieldId in my JSON, the QueryBuilder component doesn't inherently recognize or provide any UI for it. I would like to request a feature that would allow the QueryBuilder to render an additional UI element (ideally a textbox) for each rule

Sample :https://stackblitz.com/edit/tx67auif?file=index.html,index.js

Therefore, my feature request is to explore the possibility of enhancing the QueryBuilder to allow developers to define and render custom UI elements (like textboxes) for these additional, user-defined fields present in the importRules JSON and allow the QueryBuilder to render an additional UI element (ideally a textbox) for each rule .

Thank you for considering this enhancement .I believe it would be a valuable addition to the QueryBuilder component.

Sincerely,
Karthikeyan R

[Karthikeyan Karthikeyan]

Hello Syncfusion Team, I previously posted about QueryBuilder component  issue and haven't seen a solution yet. Any updates?

[Mohamed Mahadeer Sabarmydeen]

We understand your requirement to include additional custom fields, such as fieldId, within each rule of the importRules JSON object in the Query Builder component and to render corresponding UI elements dynamically.

The current implementation of the Query Builder supports customizing the rule UI using templates. As demonstrated in your sample, you've correctly leveraged the template property to define a custom UI for a specific field using the value-template-create event. This approach allows you to inject additional UI elements such as Textbox, NumericTextBox or Checkbox based on custom fields like fieldId.

We have attached sample based on your scenario, please refer the following sample for your reference.

Sample: https://stackblitz.com/edit/tx67auif-dttjquqv?file=index.html,index.js

In the code provided, the NumericTextBox is rendered by accessing rule.custom.fieldId, which is the recommended pattern for binding additional data. To ensure consistent functionality for multiple rules, you can use the custom property inside each rule object. This enables you to pass any user-defined metadata alongside standard rule definitions and render associated UI elements accordingly.

Here’s a brief clarification for best practices:

• Use the custom property to store any additional metadata per rule.
• In the actionBegin event handler, under the value-template-create request type, extract and use this metadata to render any desired UI component.

• Ensure each custom element is uniquely identified using the ruleID to avoid collision during dynamic rendering.

[Karthikeyan Karthikeyan]

Hello Syncfusion Team,

Thank you for the previous suggestion regarding the use of templates and the custom property for handling additional data in imported rules. While that approach is helpful for pre-defined rules, my current requirement is to integrate a custom field, fieldId, directly into the QueryBuilder's rule creation interface as a default element, similar to how "Field," "Operator," and "Value" are presented.

However, I am encountering an error when attempting to add a new rule using the QueryBuilder's UI with the adapted code. Specifically, I am getting the following error in my browser's console (or within the StackBlitz environment if I'm testing there): " Cannot read properties of undefined (reading 'fieldId')   "

sample code given by you :  https://stackblitz.com/edit/tx67auif-dttjquqv?file=index.html,index.js

Detailed Explanation of the Request:

When a user adds a new condition in the QueryBuilder, I would like to see an additional input element (ideally a textbox) alongside the dropdown for "Field," the dropdown for "Operator," and the input for "Value." This new textbox would be specifically for entering or displaying the fieldId for the rule being created or edited.

Desired Behavior:

1)UI Integration: When a new rule is added, the UI should present a textbox for the user to input a fieldId. This should be visually consistent with the other rule components.

2)Data Generation: When the QueryBuilder generates the JSON representation of the rules (either on initialization with getRules or when rules are added/modified), this fieldId should be included as a direct property of each rule object, alongside field, operator, and value.

Current Limitations:

The current templating mechanism, primarily addresses the display of custom data that is already present in the importRules. It doesn't inherently modify the default UI structure for rule creation or automatically include a new top-level property like fieldId in the generated JSON for newly created rules.

Use Case:

Having fieldId as a default part of the rule creation process would allow users to directly associate a unique identifier with each rule as they build their queries, making it more intuitive and integrated into the query building workflow.

[Karthikeyan Karthikeyan]

Hello Syncfusion Team, I previously posted about QueryBuilder component  issue and haven't seen a solution yet. Any updates?

[Yohapuja Selvakumaran]

Hi Karthikeyan,

Thank you for reaching out and sharing your requirement.

As we previously said, We would like to inform you that if you would like to include additional fields, such as fieldId, in the QueryBuilder, you can achieve this by customizing the rule UI using the value template and handling additional data through the custom property of each rule. This allows you to dynamically render input controls (e.g., TextBox, NumericTextBox) tied to custom fields.

Sample:
https://stackblitz.com/edit/tx67auif-4fktkso8

However, we would like to inform you that it is currently not feasible to include an additional field as a native part of the default QueryBuilder rule structure, alongside the standard Field, Operator, and Value elements. The current design of the component does not support directly inserting new UI elements into the default rule layout.

That said, we understand the value of your use case, and we recommend continuing with the templating approach, which gives you flexibility to render custom inputs and manage their data manually.

Please let us know if you'd like further assistance implementing this, or if you have any additional questions. We’re happy to help.

Regards,

Yohapuja S