Nexus – Elemento: Filter Bar

¿Qué es?

Filter Bar es un componente de tipo Data. Es una barra de filtros pensada para usarse en conjunto con queries, combinando búsqueda por texto, filtro por estado y filtro por rango de fechas. Al arrastrarlo al lienzo viene con un ejemplo precargado (buscador, selector “All statuses”, dos campos de fecha y botón “Clear”).

Propiedades

Al seleccionar Filter Bar en el lienzo, el panel derecho muestra “Properties of FilterBar”, organizado en tres pestañas: Content, Style y Behavior.

• Component ID: identificador único del componente, autogenerado (ej. fbr_75d4aef9).
• Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).

Pestaña Content:

• Search Value: valor por defecto del campo de búsqueda.
• Status Value: valor por defecto del filtro de estado.
• Start Date / End Date: valores por defecto del rango de fechas.
• Search Placeholder: texto guía del campo de búsqueda (ej. “Search…”).
• Status Placeholder: texto guía del selector de estado (ej. “All statuses”).
• Status Options (JSON): campo de código donde se definen las opciones del filtro de estado, en el mismo formato que Select (label / value). Cuenta con el editor de código expandido para más comodidad.

Pestaña Style:

• Custom Class: clase CSS personalizada.
• Custom Style: CSS personalizado aplicado directamente a este componente.

Pestaña Behavior:

• Show Search: casilla que muestra u oculta el campo de búsqueda.
• Show Status: casilla que muestra u oculta el filtro de estado.
• Show Date Range: casilla que muestra u oculta los campos de rango de fechas.
• Disabled: casilla que deshabilita todo el componente.
• Delete Component (ícono de papelera, arriba): elimina el componente del lienzo.
• Events & Actions: sistema para definir comportamientos interactivos (por ejemplo, disparar una query al cambiar algún filtro). Ver documentación aparte: Nexus – Events & Actions .

Ejemplo de uso

Para agregar una nueva opción de estado, hay que ubicarse en la última llave } del bloque anterior dentro de Status Options (JSON), agregarle una coma, y pegar el nuevo bloque a continuación:

[
  {
    "label": "Archived",
    "value": "archived"
  },
  {
    "label": "Blocked",
    "value": "blocked"
  }
]

⚠️ Importante: la coma va pegada a la llave } del bloque anterior, no al principio del bloque nuevo.

Con Show Search / Show Status / Show Date Range se puede simplificar la barra mostrando solo los filtros que se necesiten (por ejemplo, ocultar el rango de fechas si no aplica al listado que se está filtrando). Los valores que el usuario ingresa (Search Value, Status Value, Start/End Date) se pueden referenciar luego en una Query para filtrar los datos de una tabla u otro componente de datos.