Diseño y Configuración de Formularios

Axol Systems cuenta con una arquitectura de Formularios Dinámicos (forms y view_forms), un entorno visual que permite diseñar, maquetar y personalizar interfaces de captura y edición para cualquier entidad de negocio sin necesidad de programar ni recompilar la aplicación cliente.

Con este sistema es posible crear múltiples variantes de formularios para una misma entidad (por ejemplo, un formulario de alta rápida, un formulario detallado para almacén o un formato de revisión técnica) y asignarlos de forma flexible a las vistas operativas de los usuarios.

---

Acceso al Módulo en Ajustes (FormsConfigView)

Para ingresar al entorno de diseño de formularios:

1. Dirígete a la barra de navegación principal y pulsa en Configuración (icono de engranaje).
2. En el menú lateral de ajustes, selecciona la opción Formularios (FormsConfigView).

flowchart LR
    A["Menú Configuración"] --> B["Módulo Formularios (FormsConfigView)"]
    B --> C["1. Seleccionar Entidad"]
    B --> D["2. Crear / Editar Formulario"]
    B --> E["3. Maquetar Grilla y Campos"]
    B --> F["4. Vincular a Vistas (view_forms)"]

---

Interfaz de Trabajo

La pantalla de configuración de formularios se divide en tres áreas de interacción:

1. Panel Izquierdo (Selector de Entidad y Formularios):
   • Selector de Entidad: Filtra las entidades de negocio registradas en el sistema (por ejemplo, Productos, Clientes, Órdenes de Compra).
   • Lista de Formularios Existentes: Muestra los formularios configurados para la entidad seleccionada, indicando su nombre, cantidad de columnas y vistas asignadas.
   • Botón ”+ Nuevo Formulario”: Crea un formulario en blanco asociado a la entidad activa.
2. Panel Central (Lienzo del Diseñador Visual):
   • Previsualización interactiva de la cuadrícula con los campos distribuidos en sus respectivas columnas.
   • Controles para reordenar, redimensionar y eliminar campos del formulario.
3. Panel Derecho (Parámetros y Propiedades del Formulario):
   • Ajustes globales de maquetación: número de columnas y factor de escala del panel lateral (drawer).
   • Catálogo de propiedades de la entidad disponibles para arrastrar o agregar a la cuadrícula.

---

Dimensionamiento y Maquetación de la Grilla

El diseñador permite controlar la densidad y proporciones del panel lateral donde se mostrará el formulario:

1. Cantidad de Columnas (columns_count)

El selector de cuadrícula permite configurar entre 1 y 6 columnas adaptables:

• 1 Columna: Maquetación vertical clásica. Ideal para pantallas angostas o formularios simples de pocos datos.
• 2 a 3 Columnas: Distribución balanceada recomendada para la mayoría de pantallas operativas de captura.
• 4 a 6 Columnas: Cuadrícula de alta densidad para formularios extensos, maestros de artículos complejos o captura masiva de datos en monitores de alta resolución.

2. Ancho Adaptable del Drawer (drawer_width_factor)

Mediante un control deslizante continuo, puedes calibrar qué proporción de la pantalla abarcará el panel lateral cuando el usuario abra el formulario (valores entre 0.2 y 1.0):

Rango de Factor	Ancho Relativo	Escenario Recomendado
0.3 – 0.4	30% a 40% de pantalla	Paneles compactos para catálogos simples o capturas rápidas, manteniendo visible la tabla de fondo.
0.5 – 0.7	50% a 70% de pantalla	Paneles medianos para registros operativos con 2 o 3 columnas y referencias foráneas.
0.8 – 1.0	80% a pantalla completa	Paneles amplios para formularios maestro-detalle con sub-tablas (objList), partidas o cálculos extensos.

---

Distribución de Campos (layout_config y col_span)

Cada campo añadido al formulario puede ocupar un ancho variable dentro de la cuadrícula mediante la propiedad col_span:

• Expansión por Campo (col_span): Define cuántas columnas de la grilla ocupará el componente. Por ejemplo, en un formulario de 4 columnas, un campo de Código puede tener col_span: 1, la Descripción col_span: 3, y las Observaciones Generales col_span: 4 para abarcar el ancho completo.
• Reordenamiento Intuitivo: Puedes mover los campos arriba o abajo para optimizar el orden natural de captura mediante tabulador (Tab).
• Integración con Directivas Dinámicas: El formulario respeta automáticamente los atributos de cada propiedad configurados en dynamic_values:
  • Campos de solo lectura (only_read: true).
  • Campos ocultos durante la creación pero visibles en edición (visible_in_create: false).
  • Propiedades correlativas automáticas (sequence: true).
  • Expresiones de precarga y tokens (default: "Registrado por {user.name}").

Estructura Técnica de layout_config (JSON)

En la base de datos, la distribución visual del formulario se almacena en el campo layout_config de la tabla forms:

{
  "fields": [
    { "column": "t1c1", "col_span": 2 },
    { "column": "t1c2", "col_span": 2 },
    { "column": "t1c3", "col_span": 4 },
    { "column": "t1c4", "col_span": 1 },
    { "column": "t1c5", "col_span": 3 }
  ]
}

---

Vinculación a Vistas (view_forms)

Una vez diseñado el formulario, debes vincularlo a las vistas de la aplicación donde los usuarios finales lo utilizarán. La tabla relacional view_forms permite configurar:

flowchart TD
    V["Vista de Tabla (views)"] -->|"Vinculación view_forms"| VF{"Configuración de Enlace"}
    VF -->|"is_primary: true"| P["Botón Principal (+ Nuevo)"]
    VF -->|"Formularios secundarios"| D["Menú Desplegable (Otras variantes)"]
    VF -->|"is_edit_default: true"| E["Formulario de Edición por Defecto"]

1. Botón Principal de Creación (is_primary: true)

Establece cuál formulario se abrirá inmediatamente cuando el usuario presione el botón de acción principal de la tabla (por ejemplo, el botón + Nuevo Producto en la barra de herramientas).

2. Variantes en Menú Desplegable

Si una vista tiene más de un formulario vinculado, los formularios complementarios se listan de forma elegante en un menú desplegable (flecha ▼) contiguo al botón principal. Esto permite ofrecer flujos alternativos sin saturar la interfaz:

• Ejemplo: Botón primario: “Alta Estándar”; Menú desplegable: “Alta Rápida por Código de Barras” y “Entrada por Devolución”.

3. Formulario de Edición por Defecto (is_edit_default: true)

Define qué formulario se desplegará cuando el usuario haga doble clic sobre una fila existente en la tabla o pulse la acción de editar. Puedes usar un formulario amplio con todos los campos auditables para edición, mientras que para el alta usas un formulario simplificado.

---

Buenas Prácticas de Diseño

[!TIP] Coherencia de Columnas: En formularios de 4 columnas, utiliza col_span: 2 para pares de campos relacionados (como Nombre y Apellido, o Precio e IVA) y col_span: 4 para campos de texto largo o sub-tablas.

[!NOTE] Captura en Lote: Los formularios renderizados en el drawer incorporan de forma nativa el interruptor “Continuar creando” en la esquina inferior y el atajo de guardado rápido Ctrl + Enter, permitiendo altas consecutivas a gran velocidad.