Configurar flexGrid

En esta guía podrás conocer los parámetros básicos para configurar este componente.

Configuración Básica

Una vez creado un módulo (en el capitulo "Como crear un módulo"), al abrirlo podrás visualizar el componente flexGrid:


En la interfaz de desarrollo, deberás marcar el INICIO DE DESARROLLO con cualquier de estos botones:

Para continuar con la configuración del componente, deberás abrir el archivo php, en nuestro ejemplo, ver_clientes.php


Una vez abierto, deberás "tomar" el archivo, de manera que tal que se habilite la EDICIÓN del mismo (y bloquee para que ningún otro programador pueda modificarlo)


Librerías y funciones básicas

Al inicio del código del archivo, podrás visualizar las librerías necesarias (podrás incluir aquí otras librerías, o lib/functions.php, si lo necesitas). También verás la inicializan de la librería template, con la incorporación del archivo html ver_grid.html Para conocer más sobre esta librería, lee el capitulo "templates"



Variables Generales

Las variables generales del componente están en su mayoría predefinidas (y completadas según como creaste el módulo desde la plantilla). Todas estas variables definen parámetros del componente. Para ver la definición de cada uno, te recomendamos documentación correspondiente


Algunas de las principales variables son:

  • idFlex: Es el prefijo de la tabla principal (o maestra), en nuestro ejemplo, "id_syspubl01"
  • title: Título de la grilla
  • title_singular: título en singular, utilizado en el parámetro "asj_delete"
  • modulo: nombre de la carpeta (módulo)
  • sortname: campo por el cual se ordenarán los registros
  • sortorder: ASCENDENTE o DESCENTE
  • url_abm: Dirección del archivo que contiene un componente flexForm (para agregar o modificar registros)
  • rp: cantidad de registros a visualizar por página

A continuación, deberás configurar el colModel

Columnas

El parámetro colModel define las columnas de la tabla que mostrará los registros almacenados en la base de datos. 

Flexmind generará la consulta a la tabla principal (o maestra, definida en el atributo idFlex) de acuerdo a cada columna establecida aquí. Si alguna de las columnas posee un prefijo DISTINTO al de la tabla maestra (idFlex), flexmind genera automáticamente INNER JOIN o LEFT OUTER JOIN a la o las tablas referenciadas (relacionadas)


Por defecto, el archivo se crea con una sola columna (la definida al crear el módulo, en el atributo "campo a mostrar")

{display: 'Nombre', name: 'id_syspubl01', width: 120, sortable: true, align: 'left', sumpage: false, sumtotal: false, agregator: ''},


Para ampliar nuestro ejemplo, hemos agregado nuevos campos a nuestra tabla de ejemplo, y creado otra tabla con relación a la tabla "clientes", con esta estructura
Para agregar nuevas columnas, deberás posicionar el cursor en la siguiente línea:
En la sección de BASE DE DATOS (a la derecha de tu pantalla), buscar el campo que desear mostrar, y haz clic derecho sobre el mismo.Selecciona "Insertar a tabla", luego elige alguno de los formatos (si el campo es tipo varchar, puedes usar no format)


Modifica los datos en caso de ser necesario y clic en Insertar:

Esto insertará una porción de código de la siguiente manera:
Así podrás agregar todas las columnas necesarias, incluso campos de otras tablas (siempre y cuando este correctamente relacionadas.


Flexmind, al detectar un prefijo de tabla DISTINTO del prefijo de idFlex (tabla principal o maestra) realizará un JOIN a esa tabla en forma automática. Puedes configurar varios parámetros para realizar este JOIN, que podrás encontrar en la documentación:


Algunos de los parámetros mas usados son:

  • format aplicar diferentes formatos (fechas, horas, enlaces, mostrar imágenes, etc)
  • width: modifica el ancho por defecto de la columna
  • sortable: definir si el usuario puede "reordenar" la información a partir de este campo,
  • sumtotal: sumar los registros (serán mostrados al final:


Para continuar con nuestro ejemplo, en la tabla TIPOS DE CLIENTE hemos creado (desde el gestor de base de datos) un registro con los siguientes datos:

En la tabla CLIENTES, hemos creado estos clientes


Al actualizar nuestro módulo en esta instancia, podremos ver la información de la base de datos:



Filtros y Buscadores

Filtros

El componente incluye dos filtros fijos (que el usuario final del sistema NO puede modificar). El primer filtro se forma a través de tres parámetros:

queryDefault: valor buscado, para realizar una búsqueda por defecto (filtro)

qoperDefault: operador para realizar la búsqueda por defecto  (igual, mayor a, etc)

qtypeDefault: campo de la tabla de la BD sobre el cual se realizará el filtro.


Estos parámetros generan un filtro fijo (solo por UN campo en la BD). Como ejemplo, si quisiéramos que este módulo SOLO muestre los registros del tipo CONSUMIDOR FINAL, podríamos definir estos parámetros:

queryDefault= "1"
qoperDefault = "eq" // >> IGUAL
qtypeDefault= "rela_syspubl02"

Esto generará un filtro de los clientes, mostrando solo los registros donde rela_syspubl02 sea igual a UNO (1). Como veremos más adelante, al establecer estos parámetros, los datos (rela_syspubl02 = 1) es "enviado" en todas las acciones y botones que se definan en el componente


El segundo filtro fijo consta de un solo parámetro: filterDefault. En este parámetro se puede definir un filtro que se colocará en el "where" de la consulta a la base de datos. Por ejemplo: filterDefault= syspubl01_activo=1 and rela_syspubl02<>1. Este parámetro no es enviado en las acciones y botones que se definan en el componente


Buscadores

El componente incluye dos tipos de buscador que el usuario puede utilizar:

Buscador simple (searchItems): se encuentra al pie de la tabla y oculto. Este buscador permite realizar búsquedas solo de a un campo a la vez. En el código podrás agregar varios campos utilizando esta estructura (en la variable searchItems)


{display: 'Id', name: '$  idFlex'},

Donde display es el nombre a visualizar en el componente, y name el es nombre del campo en la base de datos, por el cuál se realizará una búsqueda. A modo de ejemplo, agregamos la búsqueda por APELLIDO:

El resultado de esto se visualizará de esta forma:



Buscador avanzado (searchAdvanceItems): se encuentra arriba de la tabla y visible. Este buscador permite realizar búsquedas por más de un campo a la vez.


Para agregar campos (fields) al buscador, deberás posicionar el cursor dentro de la variable (string) searchAdvanceItems 

 


En la sección de BASE DE DATOS (a la derecha de tu pantalla), busca el campo que desear utilizar, y haz clic derecho sobre el mismo. Selecciona "Insertar a buscador", luego elige alguno de los formatos (si el campo es tipo varchar, puedes usar varchar)



Modifica los datos en caso de ser necesario y clic en Insertar:
Esto insertará una porción de código de la siguiente manera:

Al guardar el archivo (y sincronizar, si estas usando la versión PROD) y actualizar el módulo en esta instancia, podremos ver el componente de la siguiente manera:




Botones

Estos botones se posicionan en la parte superior de la tabla, y se ejecutan asociados a ninguno, uno o varios registros del flexGrid. Ejemplo de botones son: Agregar un nuevo registro, borrar varios registros, desactivar varios registros. etc. También incluyen botones para exportar la información en diferentes formatos:

Estos botones vienen predefinidos en la plantilla, pero puedes agregar otros según tus necesidades. Estos botones deberán estar correctamente ubicados dentro del análisis de privilegios (alta baja o modificación). Por ejemplo, dentro del privilegio de ALTA, podan encontrar este boto:

$buttons.="{name: 'Agregar', bclass: 'add', onpress: false, action: 'show', url: '$url_abm', disabled:false}, ";

NOTA 1: La variable $url_abm esta definida al comienzo, en las variables generales, y hace referencia al path del archivo que contendrá el componente flexForm para agregar un nuevo registro.

NOTA 2: el parámetro action = show define que al hacer clic en este botón, se ejecutará el componente flexBox, que mostrará el contenido generado por el archivo definido en el atributo url.


Acciones

Este componente permite definir "acciones", eventos que se ejecutan asociadas a un (1) registro. Las principales acciones utilizadas son de abrir un formulario para modificar un registro, o la acción (previa confirmación) de eliminar un registro. 


Cada acción pueden ubicarse en la columna acciones (por lo general, ubicada al final de la tabla) o en alguna columna determinada de la tabla, y esta representada por un icono (el cual ya esta disponible en el framework). 


Existen acciones que ya están definidas, como por ejemplo, cambiar el estado de una columna (de CERO a UNO o viceversa), cambiar el valor de una celda impactando el cambio automáticamente en la base de datos (funciones "edit in place").


Otras acciones, como enviar informes por correo electrónico o ejecutar procesos más específicos pueden ser fácilmente desarrolladas usando los modelos disponibles en la interfaz de desarrollo.


Tipos de acciones:

  • execute: ejecuta una acción y recarga el flexGrid
  • change: Cambia el valor de un atributo true/false (0/1).
  • openwindow: Abre una nueva ventana del navegador con la url ingresada
  • delete: borra un registro y recarga el flexGrid.
  • show: abre una venta FlexBox con la url ingresada
  • showSubGrid: Carga otro componente flexGrid donde se muestra información relacionada al registro en cuestión.


Que sigue?

Una vez configurado el componente, deberás configurar el componente flexForm (para agregar o modificar registros). Este compomete será visualizado a través de dos formas:

  • Con el botón AGREGAR (button)
  • Con el botón EDITAR (action)

Ambos botones generan un componente flexBox (ventanas tipo popup) donde se ejecutará el archivo php que generará el flexForm