TPV - Editor de grids

Creado por David Miralpeix, Modificado el Tue, 05 Mar 2024 a las 11:20 AM por Óscar Ortiz

El editor de Grids nos va a permitir modificar la visualización de datos que vemos en el resultado de un buscador que devuelve un formato de tabla. En el siguiente vídeo puedes aprender con un ejemplo práctico: "Visualizar más columnas en el buscador de artículos"



Para acceder al editor de grids basta con seleccionar la opción en el menú del Personalizador AHORA TPV.



En esta nueva ventana podemos ver todas las opciones para configurar las grids que se muestran en la TPV.



A continuación, se detallan cada una de las opciones de la ventana:


  • Id: el campo ID lo añadirá a la izquierda de la descripción una vez se ha seleccionado el objeto en TPV Objeto. Si el Id tiene el prefijo AHOR, sabremos que se trata de una grid estándar. Si, por el contrario, el prefijo es PERS, sabremos que se trata de una grid personalizada.


  • TPV Objeto: aquí encontramos todas las grids ordenadas según el objeto al que pertenecen. Para modificar una de las grids existentes debemos seleccionarla de este desplegable. Una vez seleccionado el objeto, se rellenarán los campos oportunos, según corresponda en cada caso. Las grids estándar se mostrarán junto a un icono de engranaje, para diferenciar a las personalizadas que lo harán junto a un lápiz. En cualquier caso, las grid activas se mostrarán de color verde y las inactivas de color gris. Únicamente puede haber una grid activa para cada objeto.



  • Botón Nuevo: limpia todos los campos dejando el formulario vacío para crear una nueva grid.
  • Descripción: descripción de la grid. Es el nombre que se mostrará en el desplegable TPV Objeto.
  • Etiqueta: texto que se mostrará en la TPV.
  • Área: hace referencia al área a la que pertenece. Esto es útil para buscar la grid en la lista desplegable de TPV Objeto.
  • Objeto listado: hace referencia al objeto de cajas listados con el que se gestiona su impresión. Sólo se pueden asociar rutinas de impresión si el grid tiene asociado un objeto con listados asociados en la configuración de la Caja.
  • Origen de datos: se refiere a la tabla o vista que mostrará los datos en la grid.
  • Filtro: en caso de ser necesario, aquí se indicará el filtro where que se aplicará sobre el origen de datos. Es necesario emplear formato SQL para la confección del filtro.
  • Tipo de visualización: permite seleccionar entre cuatro tipos predefenidos de visualización de la tabla.
    • Minimalista con cabecera: tonos blancos y líneas con sombreados, los filtros de la cabecera no tienen efectos de selección.
    • Minimalista sin cabecera: minimalista, ocultando la cabecera de la tabla.
    • Moderna con cabecera: cabeceras con fondos azules y selección resaltada en naranja. Líneas más amplias y sin sombrear.
    • Moderna sin cabecera: moderna, ocultando la cabecera de la tabla
  • Tipo de selección: sin selección, selección única o multiselección. Esto solo es útil si la grid tiene un objeto listado asociado o un proceso preparado para recibir varios registros. En tal caso, se imprimirán o ejecutará la acción asociada al proceso del menú, con todos los objetos seleccionados.
  • Menú: ahora menú que se mostrará en la cabecera de la grid. Añade a la izquierda de las opciones de impresión los iconos de los procesos del menú seleccionado. 
  • Paginación: si se desea poder paginar, se activará el interruptor y, entonces, se mostrará el número de registros por el que se va a paginar. Si no se pagina, se mostrarán todos los registros directamente , teniendo que hacer uso de la barra de desplazamiento para poder verlos todos. Si se pagina, se tendrá que hacer uso de los botones Primera, Anterior, Siguiente y Última para navegar por las páginas.



  • Activado / Desactivado: este check se activará o desactivará según el estado que queramos que esté nuestra grid. Únicamente se puede tener una grid activa por objeto de TPV. Si se desactiva una grid personalizada se activará, automáticamente la grid estándar. Si, por el contrario, se desactiva directamente la grid estándar, se mostrará un error indicando que no se puede desactivar una grid estándar. El paso correcto es activar, directamente, la grid personalizada que va a sustituir a la estándar.
  • Opciones de la grid
    • Añadir menú:  vincula un ahora menú a la línea. Añade una columna con los iconos de los procesos que tenga el menú. Si en las propiedades del campo se marca como no visible, éste se mostrará únicamente como menú contextual. Si se estima que las grids muestren muchos datos, es recomendable marcar como no visible, ya que se evitará el retraso en la carga debido al renderizado
    • Añadir propiedad:  permite añadir a la grid campos del origen de datos que no hayan sido añadidos todavía.
    • Eliminar propiedad seleccionada: elimina la propiedad (campo o menú) seleccionada. Si se quiere volver a añadir bastará con hacerlo usando la opción de añadir correspondiente.



  • Campos de la grid: aquí se puede ver, en modo de tabla, los campos que se mostrarán en la tabla con sus propiedades que se detallan a continuación:
    • Propiedad: hace referencia a las columnas de la tabla o de la vista del origen de datos. También puede haber un registro que haga referencia al menú de línea añadido en las opciones de la grid.
    • Descripción:  es el texto que se mostrará en la cabecera de la grid. 
    • Anchura: si la anchura es 0, la columna tendrá la anchura predeterminada. Si lo que se desea es no mostrarlo, hay que indicarlo con la propiedad Visible.
    • Tipo dato: muestra información acerca del tipo de dato obtenido en la vista o consulta que se va a mostrar.
    • Editable: no aplicable, incluido para usarlo en futuras versiones del personalizador.
    • Filtrable: si se desea poder filtrar por ese campo, debe estar la casilla de selección activa, mostrando un tic verde. Si no está activa, no se verá la casilla para poder filtrar debajo del nombre de columna.
    • Alineación: las opciones disponibles son izquierda, centro y derecha.
    • Visible: si la casilla de selección está activada mostrará un tic verde y la columna será visible. Si la casilla está desactivada, mostrará un aspa roja y la columna no se mostrará. Si la columna es un menú, éste se mostrará únicamente en el menú contextual de la línea.
    • Campo principal: indica si el campo al que hace referencia es el identificador de la tabla. Solamente puede haber uno activo. Si se ha indicado un listado en el campo objeto listado, será la clave principal de búsqueda del listado. Este campo es importante puesto que será el utilizado en las rutinas de impresión para filtrar los informes asociados. Esto es, si se declara como principal el campo IdPedido, los informes asociados a la tabla deben de poder filtrarse por IdPedido, en caso contrario la impresión dará error.
  • Botón Guardar: guarda los cambios. Si se trata de una grid estándar, creará una nueva personalizada. Si, por el contrario, ya se trataba de una grid personalizada, la actualizará con los cambios realizados.
  • Botón Clonar: se muestra cuando estamos trabajando con cualquier grid guardada. Nos permite crear un personalizado con las mismas propiedades que el actual, pero sin relación con la familia, lo que posibilita tenerlo activo a la vez que el original, ya que no tienen ninguna relación.
  • Botón Eliminar: se muestra cuando estamos trabajando con cualquier grid personalizada. No es posible eliminar una grid activa. Para ello hay que desactivarla, guardar y, entonces, ya permitirá eliminar.


Para entender mejor el funcionamiento, vamos a ver, por ejemplo, la grid de clientes estándar y una personalizada. Como podemos observar, no todos los campos descritos anteriormente necesitan datos.







A continuación, tenemos el resultado de la grid de clientes personalizada, a la que se le ha añadido un menú de cabecera y, en las líneas, se han modificado algunas descripciones, añadido la columna de provincia y un menú personalizado. Además, se ha marcado como no visible la columna NIF y modificado la alineación de la columna correo electrónico. 




NOTA: Como se ha explicado en el botón de clonar, para poder usar, por ejemplo, dos grids de clientes hay que desvincularlas clonando el original. Esto es extensible a todo lo susceptible de ser personalizado.


NOTA: Como se ha comentado en el menú de las líneas de la grid, por temas de rendimiento y re escalado de los elementos visuales es mejor desmarcar la casilla de selección Visible para que no "tarde" en cargar la información, aunque esto queda siempre a elección del usuario que personaliza, en función del producto, tipo de usuario y cantidad de datos a cargar. Desde fábrica recomendamos no mostrar estos menús, ya que en tablas con muchos registros tardará más en cargar la información.


Novedades 4.4.2400.72


En la versión 4.4.2400.72 se introduce la opción de utilizar orígenes de datos en los grids, lo que permite utilizar procedimientos almacenados.


NOTA: A diferencia del uso de una vista en grids, al utilizar un procedimiento almacenado, no se controlan los campos de llegada al añadir una propiedad al grid, por lo que el nombre de las columnas deberá coincidir con las propiedades obtenidas.


Los datos de entorno se recogen en el procedimiento almacenado de la siguiente forma:

SELECT 
  @IdTicket = T.C.value('IdTicket[1]', 'INT')      
FROM @iXML.nodes('./data') T(C)

Los filtros colocados en la cabecera se recogen en el procedimiento almacenado de la siguiente forma:

SELECT 
  @IdTicket = T.C.value('IdTicket[1]', 'INT')      
FROM @iXML.nodes('./data/head') T(C)

NOTA: Solo se volverá a consultar al procedimiento cuando se pulse el botón "recargar" del grid, mientras no se pulse, cualquier cambio realizado en los filtros de las cabeceras estará utilizando los datos de la última vez que se recargó el grid


Los datos devueltos deben tener una estructura concreta para que la TPV los interprete correctamente, por ejemplo, para obtener todas las líneas de un ticket, obtendremos la estructura correcta de esta forma

SET @oXML = (
  SELECT *  FROM vTPV_Tickets_Lineas   
  WHERE  IdTicket = @IdTicket
  FOR XML PATH('data'), ELEMENTS, TYPE)


Color en Filas


Otra novedad incluida en esta versión es la capacidad de cambiar el color de la letra si el origen de datos asociado a la Grid devuelve un campo ColorObj con un color en formato interpretable por HTML (por ejemplo, hexadecimal #008F39).



Es importante respetar la sintaxis del campo devuelto (capitalizada la C y la O) para que el entorno sea capaz de interpretarlo.



¿Le ha sido útil este artículo?

¡Qué bien!

Gracias por sus comentarios

¡Sentimos mucho no haber sido de ayuda!

Gracias por sus comentarios

¡Háganos saber cómo podemos mejorar este artículo!

Seleccione al menos una de las razones
Se requiere la verificación del CAPTCHA.

Sus comentarios se han enviado

Agradecemos su esfuerzo e intentaremos corregir el artículo