Un formulario de BIZUIT, cuenta con una estructura JSON muy simple.

Estructura Principal del JSON de un Formulario

{
"name": {"type": "string"},
"controls": {"type": "string"},
"dataSources": {"type": "string"},
"Version": {"type": "integer"},
"Description": {"type": "string"},
"Category": {"type": "string"},
"Subcategory": {"type": "string"}
}

Dentro de la propiedad controls se coloca en JSON un array de controles. Este JSON al ser colocado dentro de la propiedad controls del Formulario, la cual es de tipo string, debe ser correctamente encodeado, reemplazando en el JSON de los controles las “ por \”.

El primer control que se coloca dentro del array de controles es el control Formulario, el cual tiene la siguiente estructura:

Estructura para controls con un Formulario Vacío

{
  "type": "array",
  "items": [
    {
      "type": "object",
      "properties": {
        "name": {
          "type": "string"
        },
        "component": {
          "type": "string"
        },
        "x": {
          "type": "integer"
        },
        "y": {
          "type": "integer"
        },
        "rows": {
          "type": "integer"
        },
        "cols": {
          "type": "integer"
        },
        "props": {
          "type": "array",
          "items": [
            {
              "type": "object",
              "properties": {
                "class": {
                  "type": "string"
                },
                "name": {
                  "type": "string"
                },
                "title": {
                  "type": "string"
                },
                "label": {
                  "type": "string"
                },
                "value": {
                  "type": "string"
                },
                "tooltip": {
                  "type": "string"
                },
                "tooltipPosition": {
                  "type": "string"
                },
                "font": {
                  "type": "string"
                },
                "align": {
                  "type": "string"
                },
                "fontWeight": {
                  "type": "string"
                },
                "fontColor": {
                  "type": "string"
                },
                "backgroundColor": {
                  "type": "string"
                },
                "fontSize": {
                  "type": "integer"
                },
                "enabled": {
                  "type": "boolean"
                },
                "parentEnabled": {
                  "type": "boolean"
                },
                "visible": {
                  "type": "boolean"
                },
                "vertical": {
                  "type": "boolean"
                },
                "fontEffectLineThrough": {
                  "type": "boolean"
                },
                "fontEffectUnderline": {
                  "type": "boolean"
                },
                "properties": {
                  "type": "array",
                  "items": {
                    "type": "string"
                  }
                },
                "labelValue": {
                  "type": "string"
                },
                "layer": {
                  "type": "integer"
                },
                "validateOnHiddenControl": {
                  "type": "boolean"
                },
                "isSubForm": {
                  "type": "boolean"
                },
                "isMainForm": {
                  "type": "boolean"
                }
              },
              "required": [
                "class",
                "name",
                "title",
                "label",
                "value",
                "tooltip",
                "tooltipPosition",
                "font",
                "align",
                "fontWeight",
                "fontColor",
                "backgroundColor",
                "fontSize",
                "enabled",
                "parentEnabled",
                "visible",
                "vertical",
                "fontEffectLineThrough",
                "fontEffectUnderline",
                "properties",
                "labelValue",
                "layer",
                "validateOnHiddenControl",
                "isSubForm",
                "isMainForm"
              ]
            }
          ]
        },
        "children": {
          "type": "array",
          "items": {
            
          }
        },
        "layerIndex": {
          "type": "integer"
        }
      },
      "required": [
        "name",
        "component",
        "x",
        "y",
        "rows",
        "cols",
        "props",
        "children",
        "layerIndex"
      ]
    }
  ]
}

Controles del Formulario

Los controles que son parte del formulario se colocan dentro de la propiedad children , la cual como vemos es un array de objetos JSON. Estos objetos JSON son los que representan a cada control.

Uso de Propiedades Codificadas

Cuando incluyas un JSON de un Form dentro de un nodo controls y JSON de los controles dentro del nodo children de un formulario, asegúrate de codificar las comillas dobles (por ejemplo, "class" debe escribirse como \”class\”) para mantener la validez del JSON en contextos que procesen estas cadenas de caracteres.

Ejemplo de un JSON válido para un Formulario vacío

{
"name": "EmptyForm",
"controls": "[{\\"name\\": \\"EmptyForm\\", \\"component\\": \\"MainFormComponent\\", \\"x\\": 0, \\"y\\": 0, \\"rows\\": 0, \\"cols\\": 0, \\"props\\": [{\\"class\\": \\"BasicPropertiesComponent\\", \\"name\\": \\"EmptyForm\\", \\"title\\": \\"PROPERTIES.BASIC.TITLE\\", \\"label\\": \\"EmptyForm\\", \\"value\\": \\"\\", \\"tooltip\\": \\"\\", \\"tooltipPosition\\": \\"above\\", \\"font\\": \\"Quicksand\\", \\"align\\": \\"center-container\\", \\"fontWeight\\": \\"inherit\\", \\"fontColor\\": \\"#a06464\\", \\"backgroundColor\\": \\"#FFFFFF\\", \\"fontSize\\": 12, \\"enabled\\": true, \\"parentEnabled\\": true, \\"visible\\": true, \\"vertical\\": false, \\"fontEffectLineThrough\\": false, \\"fontEffectUnderline\\": false, \\"properties\\": [\\"fontColor\\"], \\"labelValue\\": \\"value\\", \\"layer\\": 1, \\"validateOnHiddenControl\\": false, \\"isSubForm\\": false, \\"isMainForm\\": true}]}]",
"dataSources": "[]",
"Version": 2,
"Description": "",
"Category": "",
"Subcategory": ""
}

No olvides que cada parte de este JSON debe cumplir con las estructuras y requisitos especificados para asegurar que el formulario se genere correctamente en BIZUIT.

Estructura de Control Area de Texto

Estructura de Control Botón

Estructura de Control Cabecera

Estructura de Control Caja de Texto