Crear una lista de tabla en Chronoforms8

Para listar los datos y tener un paginador, necesitamos suministrar a la vista Tabla la lista de registros junto con el conteo de registros en nuestra tabla, por lo que en total necesitamos 3 elementos en nuestra página:

1. Acción Leer Datos para leer los registros de la tabla y contarlos
2. La vista Tabla es para mostrar los registros en una lista.

Veamos cómo se configura Leer Datos:

1. Primero necesitamos elegir la tabla de base de datos de la cual leer los registros.
2. Luego necesitamos establecer el Tipo de Lectura en "todos los registros coincidentes con conteo" para obtener una lista de registros y también el conteo total.
3. Luego necesitamos asegurarnos de que nuestra lista de registros sea paginable, ordenable y tenga un límite, digamos 10 registros por página.
4. La configuración ordenable es opcional, pero la he configurado para ordenar por la columna título en la tabla seleccionada:

Luego nuestra vista Tabla necesita configurarse para obtener la lista de registros y el conteo de registros de ambas acciones Leer Datos y mostrar una lista de registros mostrando al menos 1 columna:

1. En la Fuente de Datos ingresaremos el nombre de la acción Leer Datos que es "read_data5", esto instruirá a la tabla para leer la lista de registros y el conteo de registros y otras configuraciones de la acción Leer Datos.
2. Necesitamos añadir al menos una columna de tabla, elegimos la columna título aquí, esta columna siempre tiene un valor en la tabla de base de datos que elegimos

Guarda el formulario y ahora deberías tener una lista de todos los registros en tu tabla, si los registros son más de 10 entonces también tendrás un paginador para navegar la lista de registros.

Creando un Enlace a una Página de Edición en tu Tabla

1- Después de guardar el formulario, la vista tabla tendrá un área nueva llamada "title", añadiremos una vista Nodo de Texto allí para enlazar a una página diferente para editar el registro:

2- Para cada fila hay una variable llamada "row" que tiene un array de todos los nombres de columnas y valores, así que para obtener el valor de la columna "title" podemos usar {var:row.title}

3- Necesitamos que el Nodo de texto enlace a una página diferente, así que habilitaremos el comportamiento "URL de Enlace" y estableceremos la URL Base del Enlace a {url:} para obtener la url de la página actual

4- en los Parámetros de URL necesitamos establecer el nombre de la página del enlace usando "chronopage=edit" y el id de la fila usando "id={var:row.id}", ahora el enlace debería verse así: url-de-la-página-actual&chronopage=edit&id=id-de-la-fila

Nuestra columna título ahora debería mostrar un valor de título enlazado:

Ahora podemos añadir una nueva página a nuestro formulario usando el botón "Nueva Página" en la parte inferior del diseñador:

En el área Opciones de nuestra nueva página:

1- necesitamos establecer el alias de la página en "edit" para que coincida con el enlace que hemos creado

2- también necesitamos dar a nuestra nueva página un nombre de Grupo de Página diferente para que sea accesible usando enlaces directos:

Luego en el área "Carga" de nuestra nueva página de edición necesitaremos una acción Leer Datos para leer el registro del valor id pasado:

1- Elegimos la misma tabla que antes

2- Configuramos Leer Datos para leer un solo registro

3- Habilitamos el comportamiento "Declaración Where"

4- Establecemos la Declaración Where para obtener la fila con la columna "id" que coincida con el valor del parámetro de datos llamado "id"

Nuestra nueva acción Leer Datos se llama "read_data18", si necesitamos probar los valores cargados podemos añadir una vista HTML e intentar mostrar el valor de la columna "title":

Eso debería funcionar como se espera, pero en nuestro caso necesitamos una página de Edición, así que necesitamos tener algunos campos de formulario para editar el registro, añadiremos un solo campo de texto para el título del registro como ejemplo:

1- Debemos habilitar el comportamiento "Fusión de Datos" para cargar los campos con los datos del registro

2- añadimos nuestro campo, 3- lo nombramos "title" para que coincida con el nombre de la columna de la tabla

4- Añadimos un botón para enviar la página "edit"

Hacer clic en el enlace en nuestra tabla ahora debería mostrar el formulario de edición:

Guardando cambios en el registro

Para guardar los cambios realizados en la página de edición, necesitamos añadir una acción Guardar Datos al área "enviar" de la página de edición:

1- Cambia al área "enviar" de la página de edición

2- Añade una acción Guardar Datos

3- Establece el nombre de la tabla a la misma tabla usada en tu aplicación

Luego necesitamos configurar Guardar Datos para actualizar el registro abierto usando una Declaración Where:

1- Habilita el comportamiento Declaración Where

2- Habilita el comportamiento "Modificar Fuente de Datos"

3- establece el valor Where a id={data:id} lo que significa que vamos a actualizar registros donde la columna id coincida con el valor del parámetro id en la url

4- En Modificar Fuente de Datos establece los Datos de la siguiente manera:

Estamos estableciendo nuestra fuente de datos para que sea un array de la columna título igual al valor del campo "title" en nuestro formulario de edición

Finalmente necesitamos redirigir de vuelta a la página de listado después del guardado:

1- Añade una acción Redirigir debajo de la acción Guardar Datos

2- establece la URL base a {url:} para obtener la url actual

3- Habilita el comportamiento "Parámetros de Redirección" y

4- Establece el parámetro chronopage a "page1" que es el alias por defecto de la primera página del formulario donde tenemos nuestra tabla

Guarda el formulario y tu formulario ahora debería guardar las actualizaciones del título y redirigir de vuelta a la lista