How to integrate multiple values using rule templates in Angular Query Builder?

Introduction

In applications that require complex query building capabilities, the Syncfusion Angular Query Builder component provides a powerful UI to create and manage rules. This article will guide you through customizing the rule templates to enhance the user experience by allowing multiple value fields for rules.

Customizing Rule Templates

The user interface can be customized to meet the requirements of your application by utilizing the rule template. For instance, you can incorporate a dropdown menu to select fields, eliminate unnecessary columns for simplicity, and establish a default operator. Additionally, we have included the ability to input multiple values for a rule.

<e-column field="Name" label="Name" type="string">
  <ng-template #ruleTemplate let-data>
    <div class="e-rule e-rule-template">
      <div class="e-rule-filter">
        <ejs-dropdownlist (change)="fieldChange($event)" [fields]="data.fields" [dataSource]="data.columns" [value]="data.rule.field">
        </ejs-dropdownlist>
      </div>
      <div class="e-rule-value e-value e-custom-value">
        <ejs-textbox id="{{data.ruleID}}_textbox1" [value]="data.rule.custom.firstName" (change)="valueChange1($event)"></ejs-textbox>
        <ejs-textbox id="{{data.ruleID}}_textbox2" [value]="data.rule.custom.lastName" (change)="valueChange2($event)"></ejs-textbox>
      </div>
      <button class="e-removerule e-rule-delete e-css e-btn e-small e-round">
        <span class="e-btn-icon e-icons e-delete-icon"></span>
      </button>
    </div>
  </ng-template>
</e-column>

Customizing the ‘value’ Key in Query Builder

The ‘value’ key in the Query Builder is essential for SQL generation and UI updates. To customize this key, you can use the ‘custom’ property within your rules. Here’s an example of how to implement this:

importRules: any = {
  'condition': 'and',
  'rules': [{
      'label': 'Employee ID',
      'field': 'EmployeeID',
      'type': 'number',
      'operator': 'equal',
      'value': 1001
    },
    {
      'label': 'Name',
      'field': 'Name',
      'type': 'string',
      'operator': 'equal',
      'value': 'Nancy Davolio',
      'custom': { firstName: 'Nancy', lastName: 'Davolio' }
    }
  ]
};

actionBegin(args: ActionEventArgs): void {
  if (args.requestType === 'template-initialize') {
    args.rule.operator = 'equal';
    if (isNullOrUndefined((args.rule as any).custom)) {
      (args.rule as any).custom = { firstName: '', lastName: ''};
      args.rule.value = 'Name';
    }
  }
}

Additional References

• Syncfusion Query Builder Documentation: Syncfusion Query Builder
• Angular Sample Link: StackBlitz Example

Please note that the code snippets provided in this article are based on Angular framework and may need to be adapted for other frameworks or versions.

Conclusion

I hope you enjoyed learning how to integrate multiple values using rule templates in Angular Query Builder.

You can refer to our Angular QueryBuilder feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular QueryBuilder example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!