La pestaña Listado en Pragmatic Studio se utiliza para configurar las propiedades del campo de tipo listado, similar a la configuración del campo Prompt. Aquí se definen las opciones y comportamientos específicos que permiten a los usuarios acceder, visualizar, modificar e incluso crear nuevos registros a través de este campo.



Configuraciones

Modo de funcionamiento

Hay un campo llamado Modo de funcionamiento, el cual tiene dos opciones:

  • Datos externos: Cuando los datos a mostrar en el listado provienen de un datasource que apunta a una base SQL, MongoDB o una función JavaScript.
  • Instancias: Cuando los datos a mostrar en el listado provienen de un datasource que apunta directamente a las instancias de Pragmatic bajo el mismo ambiente en el que el listado se encuentra. Para más información sobre ambientes, consulta la página de Ambientes. Este datasource debe apuntar a la misma base de datos de MongoDB de Pragmatic y a la misma colección de instancias de formulario bajo el mismo ambiente para que funcione correctamente.

Origen de Datos

  • Datasource: Es el campo para seleccionar el datasource con el cual se hará la búsqueda de los datos.

Pestaña Filtros

La configuración de esta pestaña es exactamente la misma que la pestaña Filtros del Prompt. Aquí se definen los filtros que se ejecutarán para realizar la consulta de datos:

  • Título: El título descriptivo del filtro.
  • Tipo: El tipo de dato del filtro, que puede ser número, texto, booleano o fecha.
  • Campo DataSource: El campo de entrada del datasource al cual apuntará el filtro.

Sección Agregar Filtros

Aquí se pueden agregar los filtros necesarios para la consulta.

Sección Filtros

Muestra todos los filtros agregados, permitiendo ordenar, modificar y eliminar los existentes.

Pestaña Grilla

En esta pestaña se definirán las columnas que se mostrarán de los datos de la consulta, además de configurar el comportamiento y las acciones del listado sobre los datos consultados.

Formulario de navegación

Es un combo el cual muestra todos los formularios de Pragmatic. Aquí se selecciona el formulario al cual se quiere navegar a dicha instancia de dicho formulario una vez el usuario presione alguna acción sobre el dato en específico, ya sea si se quiere navegar al modo solo lectura para ver los datos o modificar datos ingresando al modo de ingreso, o crear un nuevo registro.

Sección Acciones

En esta sección están los siguientes campos:

  • Permite crear instancias: Campo para activar la acción de crear instancias cuando el listado se está renderizando. Es un botón que muestra el símbolo +, y cuando se presione sobre dicho botón se creará una nueva instancia del formulario seleccionado en “Formulario de navegación” y se navegará a esta instancia para editar datos.
  • Permite modo readonly: Campo para activar la acción de acceder al modo readonly, es decir, solo lectura para ver datos sin modificarlos.
  • Permite modo editable: Campo para activar la acción de acceder al modo editable, para modificar datos.
  • Permite paginado: Esta opción debe activarse únicamente si el datasource asociado tiene implementados los parámetros LIMIT y OFFSET para paginar los resultados correctamente, de la misma manera que se usa en la pestaña Prompt

Sección Columnas

Muestra las columnas agregadas y permite modificar el orden de visualización.

Cada columna tiene una opción llamada Es parámetro de navegación que muestra un check para activar en el caso de que dicho dato se quiera utilizar para hacer la búsqueda del dato individual una vez se esté en la instancia del formulario de navegación seleccionado. Se accede a los valores seleccionados de los parámetros de navegación bajo el parámetro @parameter.

Por ejemplo, si se selecciona que el campo de salida “id” del datasource sea un parámetro de navegación, entonces la manera de acceder a él desde la instancia de formulario de navegación es con @parameter.id.



Configuración de un Listado

Antes de proceder con la configuración de un Listado, es importante asegurarse de que se utilizará un datasource compatible. Este datasource debe estar correctamente definido con los parámetros de entrada y salida utilizando los otorgados por Pragmatic Studio.

En este caso, se trabajará con un datasource que apunta a una tabla SQL, cuyas columnas son las siguientes:

Por lo que el datasource definiendo algunos filtros sobre dichas columnas sería el siguiente:



Paso 1: Crear formulario individual

El formulario individual es el formulario cuyas instancias serán a las que se navegue cuando el usuario use alguna de las tres acciones disponibles desde el listado, las cuales son el modo de solo lectura, el modo editable y el de crear nuevo registro. Por lo que es necesario primero comenzar por crear este formulario.

Paso 2: Crear campos en formulario individual

Una vez creado el formulario, teniendo en cuenta las columnas de la tabla se crean los siguientes campos.



Paso 3: Crear evento de precarga de datos

El evento de precarga de datos se utilizará para cargar los datos una vez el usuario acceda sobre la instancia de algún registro seleccionado desde el listado. Para conocer más información sobre este evento, ingresa a este enlace.

Paso 4: Crear evento para crear o modificar registro

Se necesita crear un evento el cual se ejecute una vez se presione sobre alguna acción específica de la instancia del formulario individual. El propósito de este evento es que se obtengan los datos registrados por el usuario bajo la instancia y sean enviados a la tabla SQL.

En este caso se quiere que el listado a configurar permita las acciones de lectura, modificación y creación de datos. Por lo que se creará un evento que apunte a la tabla SQL y ejecute un upsert, el cual busca si existe un valor con el mismo identificador enviado por Pragmatic (el campo Id con nombre único banco-id) y en caso de que no exista dicho registro, creará uno nuevo con los datos enviados por el usuario.

Esta estructura permite que los datos ingresados por el usuario en el formulario sean enviados correctamente a la base de datos, utilizando los valores actuales de cada campo según la interacción del usuario.

Explicación de la sentencia SQL del evento

En la sentencia SQL que se muestra, se utilizan parámetros como @respuesta("banco-abonoMensual"), @respuesta("banco-nombre"), etc. Estos parámetros hacen referencia a las respuestas que el usuario ingresa en los campos del formulario individual. Cada parámetro utiliza el nombre único del campo para identificar a cuál respuesta se está accediendo.

Por ejemplo, @respuesta("banco-abonoMensual") obtiene el valor que el usuario ingresó en el campo cuyo nombre único es "banco-abonoMensual". Lo mismo aplica para los demás campos utilizados en la sentencia.

  • Si deseas saber más sobre los nombres únicos y cómo se configuran, consulta la propiedad Nombre único.
  • Para más información sobre el uso del parámetro @respuesta, visita la sección @respuesta en la documentación de parámetros.



Paso 5: Crear evento para cargar los datos

Posteriormente, con el objetivo de que la instancia de formulario al momento de navegar se carguen los datos del registro, se debe crear un evento de tipo precarga de datos para obtener y mapear los datos sobre cada campo.

Para este caso también se utilizará la propiedad Nombre único de los campos para indicar los campos a mapear. Si deseas saber más sobre el evento de precarga de datos, consulta la página de Evento de precarga de datos.

En este ejemplo, se está utilizando un parámetro de navegación llamado idBanco, el cual representa el identificador único del banco que se desea consultar. Este parámetro es fundamental para poder cargar los datos específicos de la instancia seleccionada desde el listado.

El parámetro idBanco debe estar definido como un campo de salida en el datasource de búsqueda del listado y, además, debe estar marcado como parámetro de navegación en la configuración de las columnas del listado. De esta manera, cuando el usuario selecciona un registro en el listado, el valor de idBanco se enviará automáticamente al formulario individual, permitiendo que el evento de precarga de datos realice la búsqueda y el mapeo correcto del registro correspondiente.



Paso 6: Asociar eventos al formulario individual

Finalmente, en el formulario individual es necesario asociar los dos eventos creados en los pasos anteriores para que se utilicen correctamente:

  • El evento onLoadBanco debe configurarse para ejecutarse en el momento de carga del formulario, permitiendo así la precarga de los datos del registro seleccionado.
  • El evento onUpsertBanco debe configurarse para ejecutarse en el momento de finalizar del formulario, de modo que los datos ingresados o modificados por el usuario se guarden correctamente en la base de datos.

De esta manera, el formulario individual estará completamente integrado con el listado y la base de datos, asegurando la correcta carga y actualización de los registros.



Paso 7: Crear formulario para mostrar el listado

Finalmente, se debe crear un nuevo formulario que contendrá el campo de tipo listado. Este formulario de ejemplo será utilizado únicamente para mostrar el listado, por lo que no es necesario que tenga acciones disponibles en sus instancias de formulario.

Para lograr esto, se recomienda desactivar las acciones utilizando la opción Ocultar acciones en la configuración general del formulario.

De esta manera, el formulario solo mostrará el listado y no permitirá realizar acciones adicionales sobre las instancias.



Paso 8: Crear sección, subsección y campo de tipo listado

En el formulario creado en el paso anterior, debes agregar una nueva sección y dentro de ella una subsección. Posteriormente, crea un nuevo campo de tipo listado dentro de esa subsección.

Este campo listado será el encargado de mostrar los registros y permitir la navegación, edición y creación de nuevas instancias según la configuración realizada en los pasos anteriores.

Una vez creado, presionar sobre este y navegar a la pestaña Listado de la configuración lateral.



Paso 9: Seleccionar el modo de funcionamiento

Selecciona el tipo de datasource el cual será usado para hacer la consulta en el listado. Si el datasource apunta a la misma base de datos de pragmatic a las instancias de formulario entonces escoge la opción “Instancias”, de lo contrario si el datasource apunta una base de datos externa ya sea de tipo mysql, mongo o una función javascript selecciona la opción “Datos externos”.



Paso 10: Seleccionar Datasource

Selecciona el datasource que se utilizará para la consulta del Listado. Asegúrate de que el datasource tenga parámetros de entrada y salida definidos para poder mapear los filtros de búsqueda y las columnas a mostrar. Para conocer más sobre los datasources, ingresa a este enlace.



Paso 11: Configurar Filtros

  • Navega a la pestaña “Filtros”.
  • En la sección “Agregar Filtro”, define los filtros que se utilizarán para la búsqueda. Especifica los parámetros de entrada para cada filtro y presiona el botón “Agregar” para añadirlo.
  • Opcionalmente, realiza modificaciones adicionales en la sección “Filtros” si es necesario corregir o cambiar el orden de los filtros.



Paso 12: Configurar Grilla

  • Ve a la pestaña “Grilla”.
  • Configura el formulario de navegación al cual se navegará una vez se presione sobre alguna de las acciones.
  • Activa las acciones que se quieren permitir en el listado como Crear instancias, el modo de solo lectura y el modo editable.
  • Activa el paginado si el datasource lo permite. Para más información sobre el paginado, consulta la sección Permite paginado.
  • En la sección “Agregar Columna”, agrega las columnas de los datos a mostrar. Define los parámetros de salida para cada columna, mapeándolos con las columnas del datasource, y presiona el botón “Agregar” para añadir la columna.
  • Opcionalmente, realiza modificaciones adicionales en la sección “Columnas” para ajustar el orden, corregir detalles de las columnas creadas o seleccionar los parámetros de navegación a usar.



Paso 13: Guardar Configuración

Una vez completada la configuración, asegúrate de presionar el botón “Guardar” en el menú lateral de configuración para guardar todos los cambios realizados.