Introducción

Desde la versión 4.4.2400.24 se integra una nueva solución para diseñar documentos en formato ticket. Esta nueva herramienta es el "Diseñador de documentos" y se encuentra dentro del personalizador de AHORA TPV. 

Con el diseñador también se incorporan nuevos conceptos y funcionalidades importantes para desarrollar modelos (no solo documentos) como son los Orígenes de datos y las Condiciones.

Acceso al diseñador

Si quieres acceder al diseñador, es necesario disponer de un usuario con permisos de administración y activar el personalizador.

Una vez activado, desde el menú del personalizador (1) accedemos a la sección modelos -> documentos (2).

IMPORTANTE: El documento originado con el diseñador se va gestionar como cualquier otro modelo. La única diferencia entre un modelo y un documento es que este último va a ser imprimible.

Estructura del diseñador

En la sección documentos encontramos la estructura habitual del personalizador. En la zona central de la pantalla (1) se visualiza el área de diseño y en la parte lateral derecha  zona de edición (2), donde se encuentran las distintas secciones del editor como son: Datos del modelo, esquema del modelo, componentes, diseño y parametría.

A continuación se explican las distintas secciones en forma de desplegable que se encargarán del proceso de edición de los elementos.

(1) Desplegable de selección de modelo: permite elegir el modelo o documento que se quiere editar. Se mostrarán tanto los modelos/documentos estándar con el símbolo de la rueda dentada o engranaje, como los personalizados con un icono de lápiz. En verde se destaca el modelo que actualmente está activo y en uso en la TPV.

Si desplegamos los modelos disponibles, actualmente podemos encontrar la factura simplificada dentro de los                   modelos estándar, esta puede ser utilizada como modelo base para personalizarla al igual que muchos modelos de               la aplicación.

NOTA: El resto de modelos de documentos se irán integrando mediante entregas semanales según nuestra política de liberación de versiones.

(2) Datos del modelo: Encontramos toda la información referente al modelo.

• Id: identificador del modelo, este podrá ser utilizado en el objeto de los listados de la caja para ser impreso.
• Activado / Desactivado: indica si el modelo está o no activo.
• Tipo/Área: indica el área donde se clasifica el modelo.
• Descripción: la descripción del modelo. Será el nombre que se vea en la lista desplegable de modelos, tanto para seleccionar el modelo a la hora de editarlo, como para seleccionarlo para ser mostrado por un subproceso.
• Descripción extendida: descripción larga del modelo. Únicamente visible en esta ventana.
• Origen de datos: indica la tabla o vista donde obtendrá la información el modelo. Para conocer mas acerca del Origen de datos consulta este artículo "TPV - Orígenes de datos". 
• Filtro: indica el filtro que se usa sobre el origen de datos.
  

(3)  Esquema del modelo: Encontramos una representación en forma de árbol de la estructura del modelo.

En la captura de abajo podemos ver que el modelo está compuesto de un frame principal que contiene unas secciones, subsecciones y una serie de labels e inputs de texto. Si pulsamos sobre un elemento se resaltará en la pantalla de visualización izquierda. También podemos pulsar en el icono de la papelera para eliminar el elemento.

(4)  Componentes del modelo: En este desplegable encontramos una serie de componentes que podremos añadir. Hay que tener en cuenta que las opciones que aparecerán habilitadas se basan en el elemento que tengamos seleccionado de la ventana de visualización izquierda. Esto es, si hemos seleccionado una sección como en la captura de abajo no podremos añadir un frame ya que no es posible añadir componentes "padre" en los componentes "hijos". Tampoco sería posible añadir ningún componente si, por ejemplo, tenemos seleccionado un componente de último nivel, esto es: inputs, labels, selector de fechas etc. 

• Frame ticket: únicamente puede haber un frame en cada modelo.
  • Frame flotante: añade un marco modal  que actuará de contenedor principal del modelo. 
  • Frame: añade un marco incrustado  que actuará de contenedor principal del modelo. 
• Sección: un modelo debe tener, al menos, una sección.
  • Sección: una sección es un espacio dentro de un frame que contiene componentes dentro de él. Es necesaria para poder añadir componentes. Una sección puede contener, a su vez, otras secciones dentro.
• Componente: los componentes deben estar dentro de una sección. Una misma sección puede contener varios componentes y componentes web.
  • Input: campo de texto.
  • Ahora menú: menú estándar o personalizado.
  • Título: añade un título.
  • Label: añade una etiqueta.
  • Párrafo: añade un cuadro de texto.
  • Selector de caja: añade un componente de checkbox.
  • Grid: añade un componente de tipo tabla, igual a los utilizados en los buscadores de la TPV para visualizar la información.
  • Tabla: añade una tabla.
  • Desplegable con filtro: añade un desplegable de selección de objetos donde puede asignarse un origen de datos y un filtro. Este filtro debe ser con formato SQL, por ejemplo IdFamila ='0'.
  • Iframe: añade un marco donde pueden ser incrustadas otras páginas html externas a la TPV
• Componente web: los componentes web deben estar dentro de una sección. Una misma sección puede contener varios componentes y componentes web . 
  • Barra de herramientas: añade la barra de herramientas de ahora tpv, es decir, la cabecera de la TPV que contiene el logo, la fecha y hora, el botón Salir etc.
  • Lista Tickets: añade el componente de lista de tickets de ahora tpv
  • Buscador simple: añade el componente de búsqueda de artículos.
  • Desglose ticket: añade la pantalla del desglose de ticket.
  • Buscador de familias: añade el componente de búsqueda por familias.
  • Inserción línea de ticket: añade el componente de introducción de línea del ticket.

(4) Diseño: aquí se puede dar formato a cada uno de los componentes añadidos. Está dividido en dos secciones: distribución y tamaño y fuente

• Distribución: las opciones variarán según el elemento seleccionado. El frame y la sección o secciones del modelo tendrán unas opciones y los componentes otras.
  • Visualización: flexible, en bloque o ninguna. Si se selecciona bloque o ninguna, únicamente se mostrará la opción Desbordamiento.
  • Dirección: horizontal o vertical. Indica si los componentes se van a añadir uno al lado de otro o debajo. 
  • Cobertura: en línea o multilínea. Indica si los componentes se pueden mostrar en más de una línea. 
  • Justificado: hace referencia a la alineación horizontal.
  • Alineación: hace referencia a la alineación vertical. 
  • Desbordamiento: determina qué pasa cuando un componente no cabe en el espacio destinado.
• Tamaño y fuente: en algunas propiedades hay que indicar la unidad de medida: píxeles, % (sobre el tamaño de su contenedor), em, vports y cm. 
  • Ancho y Alto:  tamaño del componente. 
  • Min Ancho y Min Alto:  aunque no necesite tanto tamaño, siempre tendrá, al menos, el indicado aquí.
  • Max Ancho y  Max Alto: no sobrepasará estos valores, aunque sea necesario.
  • Fuente e Índice Z:  tamaño de la fuente y el orden cuando de superpone con otro componente. 
  • Alineación de texto: izquierda, centrado, derecha y justificado.
  • Formato de fuente: negrita, cursiva, subrayado y tachado.
  • Fuente y Fondo:  hace referencia a los colores. Se pueden seleccionar de una caja de colores o indicar el valor en hexadecimal, RGBA o HSLA.
  • Margen:  indica el margen del componente. 
  • Borde:  si tiene borde, su tamaño, estilo y color.
  • Radio: si se van a redondear las esquinas. 
  • Relleno: hace referencia al relleno por todos los lados del elemento. 
    
    
    

(6) Parametría: al seleccionar un elemento y desplegar el apartado de parametría veremos una serie de opciones de configuración del elemento. Las opciones aparecen en función del elemento que vayamos a editar. Por ejemplo, continuando con la captura del input de arriba, vemos que aparecen las siguientes opciones:

• Id: campo identificador del elemento no modificable.
• Requerido: indica si el elemento será obligatorio que contenga valor.
• Solo lectura: indica si el elemento será o no editable.
• Enfocable: indica si se podrá acceder al elemento mediante pulsaciones de tabulador o intro. Esta propiedad está disponible desde la versión 4.4.2300 hotfix 24 y únicamente para componentes de tipo Ahora menú.
• Descripción: indica la descripción del elemento, esta descripción se utiliza para identificar visualmente al componente en otros aspectos de la edición, como por ejemplo, en la sección de "Esquema del modelo".
• Nombre: indica el nombre del elemento que llegará a la base de datos, por ejemplo, en el formulario de alta de cliente si queremos que este input represente el "IdCliente" será en el name donde se tendrá que poner "IdCliente".
• Valor: valor del elemento. Puede ser estático: "00001" o asignar una variable con el signo arroba (@) delante. Continuando con el ejemplo del IdCliente anterior, si en valor indicamos "@IdCliente" obviará el campo name y utilizará el valor con la variable @IdCliente como campo enlazado de los datos de Ahora TPV para la información de la base de datos. También se puede asignar variables de objetos de la aplicación con el formato "@nombreObjeto.NombrePropiedad". Un ejemplo podría ser acceder a la propiedad IdCaja del objeto "Caja". Esto lo haríamos indicando el siguiente valor: "@Caja.IdCaja".
• Label: Texto de la etiqueta del elemento.
• Tipo: Tipo de dato del elemento. (Texto, Número, Cantidad, Descuento, Precio, Teléfono, Email, Código postal, DNI, URL o contraseña). 

Por último en la parte inferior derecha del editor encontramos tres botones: Guardar, Eliminar y Clonar.

• El botón Guardar guardará el modelo actual en la base de datos.
• El botón Eliminar solo aparece cuando estemos editando modelos personalizados ya guardados y eliminará el modelo en cuestión.
• El botón Clonar permite crear un modelo totalmente idéntico al actual pero sin estar vinculado al modelo original estándar. Esta utilidad es especialmente útil para partir de un modelo existente a la hora de crear modelos personalizados independientes, ahorrando el trabajo de partir de una pantalla en blanco.

Novedades: Menú Contextual

Otras novedades del diseñador de documentos son las opciones de menú contextual que aparecen al pulsar el botón derecho del ratón sobre un componente del diseño previamente seleccionado.

Estas opciones son: configuración extendida, copiar nodo, cortar nodo, pegar nodo(cuando se ha copiado o cortado aparece habilitada) y eliminar nodo seleccionado.

Se puede copiar o cortar desde un único elemento hasta una sección completa, agilizando así el diseño de nuestros documentos y modelos.

Al pulsar sobre la opción configuración, se abre una ventana con la configuración extendida que permite editar la descripción, el nombre y la etiqueta y también algo muy importante, añadir condiciones que permitirán que se habilite o deshabilite el componente.

NOTA: Para conocer como utilizar las condiciones, puedes consultar el siguiente artículo TPV condiciones.

Novedades 4.4.2400.72: Bordes

En la versión 4.4.2400.72 se introduce la opción de modificar la visualización e impresión de los bordes de los controles de tablas. 

Toda sección del modelo de impresión que puede tener más de una línea se construye usando componentes de tabla editables (Líneas de tickets, Líneas de descuentos, Líneas de IVA's, etc.). Se puede acceder a la edición desde el menú contextual del propio componente, en la opción Configuración.

En la ventana de configuración se ha añadido un nuevo mantenimiento de bordes, permitiendo modificar la apariencia tanto del borde de la tabla, como de la cabecera o de las filas de la misma. De esta forma, se puede eliminar las líneas que ya se imprimen por defecto, o incluso añadir nuevas o cambiarla por líneas discontinuas o punteadas.

El resultado final es la impresión de los modelos con el borde definido en la personalización.

Novedades 5.0.0.4: Tipo de fuente

En la versión 5.0.0.4 se introduce la opción de cambiar el tipo de letra de los documentos imprimibles y se añade tanto en los documentos imprimible como en los Modelos plantillas con la estructura básica .

Para acceder a la edición del tipo de fuente del ticket, tan solo será necesario seleccionar el frame del ticket, que siempre aparecerá como primer elemento en el apartado "esquema del modelo".

Una vez seleccionado, desplegar el apartado Diseño -> Tamaño y fuente. Es entonces cuando podremos localizar el desplegable que contiene los tipos de letra disponibles para el ticket.

Una vez seleccionado el tipo de fuente deseado para el ticket, bastará con guardar el documento (modelo imprimible) para poder imprimirlo con esta letra.

NOTA: Si se requiere de otro tipo de letra que no se encuentre en el desplegable, será necesario contactar con nosotros para una posible integración en el desplegable.

Junto al botón "Nuevo" encontraremos la opción de "Plantillas" el cual al pulsarlo aparecerá una ventana emergente que nos mostrará las plantillas disponibles para el tipo de diseño que queramos crear (Modelos/Documentos). 

Esta opción solo se encuentra disponible cuando no tenemos cargado ningún diseño guardado previamente. 

Ejemplos

Ejemplo 1 condiciones

Un ejemplo rápido de uso de condiciones es el que tiene aplicada la sección del código QR, la aparición de esta sección está condicionada a la activación de parámetro de Tickte BAI.

Ejemplo 2 edición documento estándar

En este ejemplo se va a editar el documento estándar de Factura simplificada. De esta forma partimos de una base para no tener que estar añadiendo y diseñando todas las secciones. En el ejemplo se va a cambiar el tamaño y el color del nombre de la empresa.

Se selecciona el componente que carga el nombre de la empresa, y desde la sección diseño-> Tamaño y fuente se modifica.

Al guardar estos cambios pulsando el botón guardar de la parte inferior, se genera de forma automática un personalizado y se queda en estado activado. De esta fomra nuenca se puede modificar ni eliminar el documento estándar.

IMPORTANTE: El documento estándar de factura simplificada cumple con la normativa legal vigente, mostrando todos los datos requeridos en dicha normativa. La Empresa se exime de cualquier tipo de responsabilidad originado por la eliminación o manipulación de algún campo requerido en esta normativa.

Ejemplo 3 clonar documento

Para clonar un documento se debe seleccionar el documento a clonar y pulsar sobre el botón clonar de la parte inferior de la sección de edición.

Al pulsar sobre este botón, el sistema muestra un aviso en pantalla indicando lo siguiente:

Si vamos al desplegable de modelos, se puede localizar desvinculado de la familia/sección donde se encuentra la factura simplificada y el personalizado de la factura estándar realizado en el ejemplo anterior.

Ejemplo 4 creación documento nuevo

En este ejemplo se va a proceder a la creación de un documento nuevo, un documento de anticipo de cliente desde cero.

En primer lugar se pulsa sobre el botón "+ Nuevo", situado en la parte superior de la zona de edición.

A continuación se deben rellenar los datos del modelo que nos aparecen vacíos (imagen izquierda) y se pueden rellenar así (imagen derecha).

En el origen de datos se ha elegido uno del desplegable de clientes que pertenece al estándar.

También se puede crear uno personalizado si es que lo hemos preparado, pulsando sobre el botón + en la sección origen de datos.

Abre una ventana para introducir el origen de datos nuevo. Se rellenará de la siguiente manera.

NOTA: Para saber mas acerca de los orígenes de datos consulta el siguiente artículo TPV - Orígenes de datos.

Si ya se ha definido un origen de datos y se quieres visualizar o modificar, se pulsa sobre el icono con forma de pieza de puzzle.

Este nos abrirá la configuración del origen d datos.

A continuación vamos a pasar al diseño del documento anticipo, en primer lugar se selecciona el Frame ticket,  hemos pensado en estructurarlo de forma estándar como en una Web, dividiéndolo en tres secciones principales: Cabecera, cuerpo y pie. Dentro de cada una estarán los componentes que servirán para poblarlo de datos.

En la cabecera queremos añadir: el logo, la empresa, la dirección, población el CIF, la fecha del anticipo y la caja. Para ello se añade un componente de imagen, un componente de  título y un label. 

Se puede diseñar todo el documento y a posteriori en la sección de parametría darle los valores, pero para ir viendo resultados en el momento se añadirán los valores de parametría según añadamos el componente.

El primer label se le indica en la sección de parametría el nombre, la descripción y el valor @Empresa. Este valor corresponde al nombre de la empresa en la vista del origen de datos cargado.

El esquema del modelo va tomando esta forma de árbol bien organizado.

Según los datos que hemos planteado añadir en la cabecera, necesitamos 5 label y un componente de tipo input. Vamos a utilizar la funcionalidad que nos da el menú contextual para copiar y pegar y así no tener que ir añadiendo cada label desde la zona de edición, de esta forma ahorramos tiempo y en poco segundos tenemos los 5 labels dentro de nuestra estructura.

En la sección de parametría ya hemos puesto los valores y se muestran en el diseño de esta forma. Ahora solo queda aplicarle el estilo para que los labels no salgan montados en la impresión.

Antes de darle el diseño, vamos a añadir una sección mas en la cabecera y pondremos todos los labels dentro, así le daremos el estilo a la sección y lo aplicará a todos los labels mas rápido. nuestro esquema quedaría así.

En la zona de edición nos dirigimos a Diseño y con la sección seleccionada, aplicamos la siguiente configuración de estilo que hará que los labels se posicionen uno debajo de otro. 

Si se quiere que estén en línea y vayan saltando a la línea de debajo según ocupen espacio se elige esta otra configuración