📖 Introducción

Bizuit Web Forms es un sistema de construcción dinámica de formularios basado en Angular 14+ que permite la creación programática de interfaces de usuario mediante especificaciones JSON. Este documento describe el formato JSON completo para la integración con Bizuit.

¿Qué es un Formulario en Bizuit?

Un formulario en Bizuit Web Forms es una especificación JSON que define:

  1. Estructura visual: Controles, layout, posicionamiento
  2. Comportamiento: Eventos, validaciones, interacciones
  3. Datos: Bindings con fuentes de datos, parámetros, variables
  4. Estilo: Temas, colores, fuentes, CSS personalizado

Arquitectura del Sistema

┌─────────────────────────────────────────────────┐
│           FORMULARIO JSON                       │
├─────────────────────────────────────────────────┤
│  • id, name, version                            │
│  • controls: "[...]"  (JSON string)            │
│  • dataSources: "[...]" (JSON string)          │
│  • metadata (createdDate, published, etc.)     │
└─────────────────────────────────────────────────┘
                    │
                    ├──→ controls (deserialized)
                    │    ┌──────────────────────────┐
                    │    │  MainFormComponent       │
                    │    │   • props: [...]         │
                    │    │   • children: [...]      │
                    │    └──────────────────────────┘
                    │              │
                    │              └──→ Controles hijos
                    │                   • InputTextboxComponent
                    │                   • ButtonComponent
                    │                   • TableComponent
                    │                   • ...
                    │
                    └──→ dataSources (deserialized)
                         ┌──────────────────────────┐
                         │ Primary Data Sources     │
                         │  • Parámetros y Variables│
                         │  • Actividades Anteriores│
                         ├──────────────────────────┤
                         │ Secondary Data Sources   │
                         │  • SQL Data Source       │
                         │  • REST API Data Source  │
                         │  • Bizuit Server DS      │
                         └──────────────────────────┘

🏗️ Estructura JSON de Alto Nivel

Objeto Raíz del Formulario

{  "id": 1936,  "name": "form_UIA1",  "controls": "[{...}]",  "dataSources": "[{...}]",  "version": 1,  "createdDate": "2025-08-06T16:46:51.983",  "createdUser": "admin",  "published": false,  "description": "Descripción del formulario",  "category": "Categoría",  "subcategory": "Subcategoría",  "activityName": "UIA1",  "processName": "MiProceso",  "processVersion": "1.0",  "updatedDate": "2025-08-06T16:47:01.411",  "originalName": "form_UIA1",  "formId": 1936}

Propiedades del Objeto Raíz

Propiedad Tipo Obligatorio Descripción
id / formId number ✅ Identificador único del formulario en base de datos
name string ✅ Nombre técnico del formulario (identificador C#)
controls string ✅ JSON string con la definición de controles (serializado)
dataSources string ✅ JSON string con las fuentes de datos (serializado)
version number ✅ Versión del formulario (incremental)
createdDate string ❌ Fecha de creación (ISO 8601)
createdUser string ❌ Usuario que creó el formulario
published boolean ✅ Si el formulario está publicado
description string ❌ Descripción del formulario
category string ❌ Categoría para organización
subcategory string ❌ Subcategoría
activityName string ❌ Nombre de la actividad BPMN asociada
processName string ❌ Nombre del proceso BPMN
processVersion string ❌ Versión del proceso BPMN
updatedDate string ❌ Fecha de última actualización
originalName string ❌ Nombre original (para versionado)

⚠️ IMPORTANTE: controls y dataSources son strings que contienen JSON, es decir, están doblemente serializados.

// Incorrecto"controls": [{...}]  // ❌ Array directo// Correcto"controls": "[{...}]"  // ✅ String que contiene JSON