Configurar flexForm

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

Configuración Básica

Una vez configurado el componente flexGrid, para continuar con la configuración del componente flexForm, deberás abrir el archivo php, en nuestro ejemplo, ver_clientes_abm.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. También verás la inicializan de la librería template, con la incorporación del archivo html ver_form.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:

  • id: es una variable que se recibe por POST, enviada cuando el componente es ejecutado desde un action (en el flexGrid) y representa el ID (valor en la base de datos) del registro a modificar
  • id_refresh: es una variable que se recibe por POST, enviada cuando el componente es ejecutado desde cualquier otro componente del flexMind. Representa el ID (del compomente, un objeto javascript) que será "actualizado" una vez ejecutado el formulario (al finalizar el submit)
  • title_s: El el titulo a mostrar, en singular, por ejemplo "Cliente"
  • form_abm: El el ID (del compomente, un objeto javascript)  unico del formulario generado

Acciones

Un formulario tendrá (casi siempre) dos acciones posibles:

  • add: agregar un registro en la tabla de la base de datos
  • update: actualizar la información del registro

Esta acción se define en el parámetro "action", y se define de acuerdo a si se recibe el parámetro "id" (valor en la base de datos del registro a modificar, enviado por el componente flexGrid al hacer clic en "Editar").



Al momento de editar un registro, deberás recuperar TODOS los campos de la tabla en variables, para ello, en la sección de BASE DE DATOS (a la derecha de tu pantalla), buscar la tabla deseada, haz clic derecho sobre la misma. Selecciona "Recuperar todos los campos en variables",


Esto insertará una porción de código de la siguiente manera:


Campos

Los campos de un formulario se definen en la variable "fields". Por defecto, la plantilla incorpora el PRIMER campo de la tabla, que será (obligatoriamente) el ID (llave única) de la tabla. En nuestro ejemplo: id_syspubl01


Para incorporar el resto de los campos, deberás posicionar el cursor al final del string:


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 formulario", luego elige alguno de los formatos


Modifica los datos en caso de ser necesario (por ejemplo, marcando que es requerido) y clic en Insertar:
Esto insertará una porción de código de la siguiente manera:

Existen múltiples formatos, algunos de los cuales generan a su vez otro componente del flexMind, por ejemplo, un flexCombo, Este tipo de campo es utilizado para generar un campo de selección (en html, un "select") con datos almacenados en otra tabla. Siguiendo con nuestro ejemplo, para registrar el TIPO de cliente, utilizaremos este tipo de campo:


En la sección de BASE DE DATOS (a la derecha de tu pantalla), buscar el campo rela_syspubl02, y haz clic derecho sobre el mismo. Selecciona "Insertar a formulario", luego elige "flexCombo"



Completa el formulario de la siguiente forma:



Esto insertará una porción de código de la siguiente manera:


Para tener mas información sobre las opciones del flexCombo, visita la documentación correspondiente.


Al guardar el archivo (y sincronizar, si estas usando la versión PROD) podrás ver el formulario, haciendo clic en AGREGAR o EDITAR:

Al hacer clic en guardar, el framework flexmind realizará la acción en la base de datos (INSERT o UPDATE) y realizará las validaciones necesarias (de acuerdo a las configuraciones de cada campo).


Para tener mas información todos los tipos de campos que puedes usar, visita la documentación correspondiente


Validaciones

Todos los campos definidos en el formulario pasan por una validación propia del framework, algunas definidas automáticamente según el tipo de campo, otras definidas por el programador manualmente.

Validaciones según el tipo de campo (automáticas)

  • Fecha (y/o hora): valida que la fecha posea un formato correcto (dd-mm-YYYY)
  • numéricos: valida que sean números válidos
  • contraseñas: valida la seguridad de la misma

Validaciones definidas por el programador:

  • required: define si es o no obligatorio completar el campo
  • custom: define validaciones especiales como ser: correos electrónicos válidos, direcciones web válidas, etc
  • lengthmin y lengthmax: valida la cantidad de caracteres.
  • unique: valida que el valor del campo no se repita en la tabla



El programador también puede realizar validaciones mas complejas, utilizando el parámetro urlValidator. En este parámetro define el path del archivo php donde el programador podrá ejecutar validaciones especiales. Estas validaciones se ejecutan ANTES del insert o update del formulario.


Para crear validaciones especiales en un flexForm deberás:

  1. Crear un archivo a partir de la plantilla: Clic derecho sobre la carpeta php > clic sobre "Nuevo archivo desde Plantilla" > "validateForm.php"

  2. Completar el formulario (pueden cambiar el nombre del archivo a crear)
  3. Definir el parámetro en el flexForm (ver_clientes_abm.php): 
    1. Ubicar el cursor en el parámetro $ urlValidator
    2. Clic derecho sobre el archivo recién creado
    3. Clic en "Insertar ruta"
    4. Abrir el archivo creado y tomarlo
    5. Editar el archivo agregando las validaciones que necesites.
    6. Siempre, al validar deberás retornar la estructura XML predefinida (la plantilla incluye esta estructura a modo de ejemplo), donde deberás definir principalmente dos variables
      • resulttext: Texto a mostrar, es decir el texto que el usuario final visualizará en la pantalla, donde se explica el error ocurrido
      • resultdebug: Texto interno, solo visible desde la consola del navegador, que puede ayudar al programados a debugear

        NOTA IMPORTANTE: luego de realizar el "echo" del xml, realizar el rollback de la transacción y ejecutar la función agregar_control



Procesos posteriores

Al igual que el parámetro urlValidator, el desarrollador puede definir el parámetro onSubmitExecute para ejecutar un archivo php posterior al INSERT o UPDATE del registro en la base de datos. 

Para crear validaciones posterior al INSERT o UPDATE o simplemente ejecutar otras acciones (como enviar un correo electrónico, agregar logs o procesos especiales), en un flexForm deberás:

  1. Crear un archivo a partir de la plantilla: Clic derecho sobre la carpeta php > clic sobre "Nuevo archivo desde Plantilla" > "onSubmit.php"

  2. Completar el formulario (pueden cambiar el nombre del archivo a crear)
  3. Definir el parámetro en el flexForm (ver_clientes_abm.php): 
    1. Ubicar el cursor en el parámetro onSubmitExecute
    2. Clic derecho sobre el archivo recién creado
    3. Clic en "Insertar ruta"

    4. Abrir el archivo creado y tomarlo
    5. Editar el archivo agregando las validaciones o procesos que necesites.
      NOTA IMPORTANTE: Si necesitas realizar una validación, luego de realizar el "echo" del xml, realizar el rollback de la transacción y ejecutar la función agregar_control



Para resumir, este es el proceso y la secuencia en que se ejecuta un flexForm (cuando guardamos un formulario)


Callbacks

Una vez realizado el submit de un formulario, si la respuesta del proceso fue válida, el componente flexBox puede ejecutar una o varias acciones. Estas acciones son definidas en el parámetro reloadCallback. Por defecto, la plantilla genera un callback que "actualizara" el componente flexGrid.

Como vimos previamente, id_refresh es una variable que se recibe por POST y, en nuestro ejemplo, es enviada por el componente flexGrid. Representa el ID (del compomente flexGrid).


Para comprender esto, te mostramos como se comporta el componente flexGrid al hacer clic en "Agregar"




Si inspeccionamos el código html, podrás ver que el id de la tabla, del componente flexGrid es grid_clientes_id_syspubl01 (definido en el ver_grid.html)




Con este id_refresh, la plantilla arma un callback con el parámetro fflex  definido en grid. Esto significa, que al guardar el formulario, se deberá "actualizar" el componente con id grid_clientes_id_syspubl01 y que ese componente es del tipo grid (flexGrid)

Puedes agregar múltiples callbacks, que realizan múltiples acciones, o acciones nuevas creadas por el desarrollador. Para más información, lee la documentación correspondiente.

Que sigue?

Hasta aquí hemos visto las pasos básicos para crear un módulo con una grilla y un formulario simple. Te recomendamos afianzar estos conocimientos (desarrollando módulos, leyendo la documentación y probando los diferentes parámetros) antes de pasar a los siguientes capítulos, donde veremos diferentes formas de utilizar grillas y formularios con varias tablas asociadas.