Descripción general del componente Angular Query Builder
Angular Query Builder es parte de nuestros Componentes Angular y proporciona una interfaz de usuario enriquecida que permite a los desarrolladores crear consultas complejas de filtrado de datos para un conjunto de datos específico. Con este componente pueden construir un árbol de expresiones y establecer condiciones Y/O entre ellas con editores y listas de condiciones determinadas por el tipo de datos de cada campo. Luego, el árbol de expresiones se puede transformar fácilmente en una consulta en el formato que admite el backend.
El componente IgxQueryBuilderComponent proporciona una forma de crear consultas complejas a través de la interfaz de usuario. Al especificar operadores, condiciones y valores Y/O, el usuario crea un árbol de expresión que describe la consulta.
Angular Query Builder Example
Hemos creado este ejemplo Angular Query Builder para mostrarle las funcionalidades predeterminadas del componente Angular Query Builder. Haga clic en el botón más para agregar condiciones, grupo "y" y grupo "o". Navegue por las barras laterales para desagrupar o eliminar.
Getting Started with Ignite UI for Angular Query Builder
Para comenzar con el componente Ignite UI for Angular Query Builder, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar IgxQueryBuilderModule en el archivo app.module.ts.
// app.module.ts
import { IgxQueryBuilderModule } from 'igniteui-angular';
// import { IgxQueryBuilderModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxQueryBuilderModule],
...
})
export class AppModule {}
Alternativamente, a partir de 16.0.0, puede importar IgxQueryBuilderComponent como una dependencia independiente o usar el token IGX_QUERY_BUILDER_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.
// home.component.ts
import { IGX_QUERY_BUILDER_DIRECTIVES, FilteringExpressionsTree, FieldType } from 'igniteui-angular';
// import { IGX_QUERY_BUILDER_DIRECTIVES, FilteringExpressionsTree, FieldType } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-query-builder #queryBuilder
[fields]="fields"
[(expressionTree)]="expressionTree"
(expressionTreeChange)="onExpressionTreeChange()">
</igx-query-builder>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_QUERY_BUILDER_DIRECTIVES]
/* or imports: [IgxQueryBuilderComponent] */
})
export class HomeComponent {
public expressionTree: FilteringExpressionsTree;
public fields: FieldType [];
public onExpressionTreeChange() {
...
}
}
Ahora que ha importado la Ignite UI for Angular Query Builder, puede comenzar a usar el componente igx-query-builder.
Using the Angular Query Builder
Si inicialmente no se establece ningún árbol de expresión, comience creando un grupo de condiciones vinculadas con AND u OR. Después de eso, se pueden agregar condiciones o subgrupos.
Para agregar una condición, un campo, un operando basado en el tipo de datos del campo y un valor si el operando no es unario. Una vez confirmada la condición, aparece un chip con la información de la condición. Al pasar el cursor sobre el chip o hacer clic en él, tiene la opción de modificarlo o agregar otra condición o grupo inmediatamente después.
Si selecciona más de un chip de condición, aparece un menú contextual con opciones para crear un grupo o eliminar las consultas. Si elige crear un grupo con las condiciones seleccionadas, el grupo recién creado aparecerá donde se colocó la condición seleccionada más alta.
Para seleccionar un grupo, también puede hacer clic en su línea vertical, que está coloreada según la condición de vinculación (AND u OR). Si se selecciona un solo grupo, obtienes un menú contextual con opciones para cambiar su lógica, desagruparlo o eliminarlo.
Puede comenzar a usar el componente configurando la propiedad fields en una matriz que describa el nombre del campo y su tipo de datos. Asignará automáticamente los operandos correspondientes según el tipo de datos. El Generador de consultas tiene la propiedad de entrada expressionTree. Puede usarlo para establecer un estado inicial del control y acceder a la lógica de filtrado especificada por el usuario.
ngAfterViewInit(): void {
const tree = new FilteringExpressionsTree(FilteringLogic.And);
tree.filteringOperands.push({
fieldName: 'ID',
condition: IgxStringFilteringOperand.instance().condition('contains'),
searchVal: 'a',
ignoreCase: true
});
const subTree = new FilteringExpressionsTree(FilteringLogic.Or);
subTree.filteringOperands.push({
fieldName: 'ContactTitle',
condition: IgxStringFilteringOperand.instance().condition('doesNotContain'),
searchVal: 'b',
ignoreCase: true
});
subTree.filteringOperands.push({
fieldName: 'CompanyName',
condition: IgxStringFilteringOperand.instance().condition('startsWith'),
searchVal: 'c',
ignoreCase: true
});
tree.filteringOperands.push(subTree);
this.queryBuilder.expressionTree = tree;
}
expressionTree es una propiedad vinculable de dos vías, lo que significa que se implementa una salida expressionTreeChange correspondiente que se emite cuando el usuario final cambia la interfaz de usuario creando, editando o eliminando condiciones. También se puede suscribir por separado para recibir notificaciones y reaccionar ante dichos cambios.
<igx-query-builder #queryBuilder
[fields]="fields"
[(expressionTree)]="expressionTree"
(expressionTreeChange)="onExpressionTreeChange()">
</igx-query-builder>
Estilismo
Para comenzar a diseñar el Generador de consultas, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
El Generador de consultas toma el color de fondo de su tema, utilizando el parámetro background. Para cambiar el fondo necesitamos crear un tema personalizado:
$custom-query-builder: query-builder-theme(
$background: #FFCD0F
);
Dado que tenemos otros componentes dentro del Generador de consultas, como botones, chips, menús desplegables y entradas, necesitamos crear un tema separado para cada uno:
$custom-button: button-theme(
$disabled-color: gray,
...
);
$custom-button-group: button-group-theme(
$item-background: #292826,
...
);
$custom-input-group: input-group-theme(
$box-background: #4a4a4a,
...
);
$custom-chip: chip-theme(
$background: #FFCD0F,
...
);
$custom-drop-down: drop-down-theme(
$background-color: #292826,
...
);
En este ejemplo solo cambiamos algunos de los parámetros para los componentes enumerados, pero los button-theme, button-group-theme, chip-theme, drop-down-theme y input-group-theme proporcionan muchos más parámetros para controlar sus componentes. estilo respectivo.
El último paso es incluir los mixins de componentes, cada uno con su respectiva temática. También agregaremos algunos estilos para otros elementos dentro del generador de consultas.
@include query-builder($custom-query-builder);
igx-query-builder {
@include button($custom-button);
@include button-group($custom-button-group);
@include input-group($custom-input-group);
@include chip($custom-chip);
@include drop-down($custom-drop-down);
.igx-filter-empty__title {
color: #FFCD0F
}
.igx-query-builder__header {
color: #FFCD0F
}
.igx-filter-tree__expression-actions igx-icon {
color: #FFCD0F
}
.igx-filter-tree__expression-actions igx-icon:hover {
color: #ffe482
}
.igx-filter-tree__expression-actions igx-icon:focus {
color: #ffe482
}
.igx-filter-contextual-menu {
border: 1px solid #FFCD0F
}
.igx-filter-contextual-menu__close-btn {
position: absolute !important;
background: #292826 !important;
border-color: #FFCD0F !important;
}
.igx-input-group__input::placeholder {
color: gray;
}
}
Note
Analizamos la mayoría de los mixins de componentes dentro de igx-query-builder, de modo que estos temas personalizados afectarán solo a los componentes anidados en Query Builder. De lo contrario, otros botones, chips, entradas y menús desplegables de la aplicación también se verían afectados.
Note
Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep:
:host {
::ng-deep {
@include drop-down($custom-drop-down);
@include query-builder($custom-query-builder);
igx-query-builder {
@include button($custom-button);
@include button-group($custom-button-group);
@include input-group($custom-input-group);
@include chip($custom-chip);
.igx-input-group__input::placeholder {
color: gray;
}
.igx-filter-empty__title {
color: #FFCD0F
}
.igx-query-builder__header {
color: #FFCD0F
}
.igx-filter-tree__expression-actions igx-icon {
color: #FFCD0F
}
.igx-filter-tree__expression-actions igx-icon:hover {
color: #ffe482
}
.igx-filter-tree__expression-actions igx-icon:focus {
color: #ffe482
}
.igx-filter-contextual-menu {
border: 1px solid #FFCD0F
}
.igx-filter-contextual-menu__close-btn {
position: absolute !important;
background: #292826 !important;
border-color: #FFCD0F !important;
}
}
}
}
Defining a color palette
En lugar de codificar los valores de color como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores utilizando las funciones igx-palette e igx-color.
igx-palette genera una paleta de colores basada en los colores primarios y secundarios que se pasan:
$yellow-color: #FFCD0F;
$black-color: #292826;
$dark-palette: palette($primary: $yellow-color, $secondary: $black-color);
Y luego con igx-color podemos recuperar fácilmente el color de la paleta.
$custom-query-builder: query-builder-theme(
$background: color($dark-palette, "secondary", 400)
);
$custom-button: button-theme(
$disabled-color: color($dark-palette, "secondary", 100),
...
);
$custom-button-group: button-group-theme(
$item-background: color($dark-palette, "secondary", 400),
...
);
$custom-input-group: input-group-theme(
$box-background: color($dark-palette, "secondary", 200),
...
);
$custom-chip: chip-theme(
$background: color($dark-palette, "primary", 400),
...
);
$custom-drop-down: drop-down-theme(
$background-color: color($dark-palette, "secondary", 400),
...
);
Note
igx-color e igx-palette son funciones potentes para generar y recuperar colores. Consulte el tema Palettes para obtener orientación detallada sobre cómo utilizarlas.
Using Schemas
Yendo más allá con el motor de temas, puede crear una estructura sólida y flexible que se beneficie de los esquemas. Un esquema es una receta de un tema.
Amplíe uno de los dos esquemas predefinidos, que se proporcionan para cada componente, en este caso: light-query-builder, light-button, light-button-group, light-chip, light-input-group y light-drop-down esquemas:
$query-builder-dark-palette: palette($primary: #11bd7b, $secondary: #e32057, $info: $black-color);
$custom-query-builder-schema: extend($_light-query-builder,
(
background:(
color: ("info")
)
)
);
$custom-button-schema: extend($_light-button,
(
disabled-color:(
color: ("secondary", 100)
),
...
)
);
$custom-button-group-schema: extend($_light-button-group,
(
item-background:(
color: ("secondary", 400)
),
...
)
);
$custom-input-group-schema: extend($_light-input-group,
(
box-background:(
color: ("secondary", 200)
),
...
)
);
$custom-chip-schema: extend($_light-chip,
(
background:(
color: ("primary", 400)
),
...
)
);
$custom-drop-down-schema: extend($_light-drop-down,
(
background-color:(
color: ("secondary", 400)
),
...
)
);
Para aplicar nuestros esquemas personalizados, tenemos que extender uno de los globales (light u dark), que básicamente señala los componentes con un esquema personalizado, y luego agregarlo a los respectivos temas de los componentes:
$custom-light-schema: extend($light-schema,(
igx-query-builder: $custom-query-builder-schema,
igx-button: $custom-button-schema,
igx-button-group: $custom-button-group-schema,
igx-input-group: $custom-input-group-schema,
igx-chip: $custom-chip-schema,
igx-drop-down: $custom-drop-down-schema
));
$custom-query-builder: query-builder-theme(
$palette: $query-builder-dark-palette,
$schema: $custom-light-schema
);
$custom-button: button-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
$custom-button-group: button-group-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
$custom-input-group: input-group-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
$custom-chip: chip-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
$custom-drop-down: drop-down-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
No olvide incluir los temas de la misma manera que se demostró anteriormente.
Demo
Note
La muestra no se verá afectada por el tema global seleccionado en Change Theme.
También puede optimizar el desarrollo de su aplicación Angular utilizando WYSIWYG App Builder ™ con componentes de interfaz de usuario reales.
API References
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub