Angular-QueryBuilder icon indicating copy to clipboard operation
Angular-QueryBuilder copied to clipboard

How to create querybuilder which has dynamic fields

Open SathyaramSoni opened this issue 4 years ago • 1 comments

I need the behavior for my project where the conditions is dynamic. It depends on the selection in the first field. And the input fields are customized fields I couldn't find example related to this. Please can you help

SathyaramSoni avatar Jul 20 '20 12:07 SathyaramSoni

@SathyaramSoni I've done something like this, I create a dialog to show the query builder, so in the edit action, I call a function to get the fields from the DB through the rest API and pass to the queryconfig of the component in the UI.

private async getFields(realmCode: string, ruleSetCode: string) { let inputs: CriteriaInput[] = (await this.odinService.getCriteriaInputs(realmCode, ruleSetCode)).content; if (!inputs || inputs.length === 0) { return null; } return inputs.reduce((index, input) => ({ ...index, [input.path]: {name: input.display, type: input.type} }), {}); } public async edit(rule: Rule, criteria: Criteria) { this.isOpen = true; this.rule = rule; this.criteria = criteria ? criteria : this.getNewCriteria(this.rule); this.fields = (await this.getFields(this.rule.realmCode, this.rule.ruleSetCode)); this.formControl = this.formBuilder.control(this.query); this.queryBuilderConfig = {fields: {...this.fields}}; }

rochaalexandre avatar Sep 18 '20 11:09 rochaalexandre