Un control de tipo Cabecera (o Header) de BIZUIT, cuenta con la siguiente estructura JSON
{
"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"
},
{
"type": "string"
},
{
"type": "string"
},
{
"type": "string"
},
{
"type": "string"
},
{
"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"
]
},
{
"type": "object",
"properties": {
"class": {
"type": "string"
},
"name": {
"type": "string"
},
"title": {
"type": "string"
},
"label": {
"type": "string"
},
"logo": {
"type": "string"
},
"headerTitle": {
"type": "string"
},
"headerTitleColor": {
"type": "string"
},
"headerTitleFont": {
"type": "string"
},
"headerTitleFontSize": {
"type": "integer"
},
"headerSubtitle": {
"type": "string"
},
"headerSubtitleColor": {
"type": "string"
},
"headerSubtitleFont": {
"type": "string"
},
"headerSubtitleFontSize": {
"type": "integer"
},
"menuItems": {
"type": "array",
"items": {}
},
"headerComponents": {
"type": "array",
"items": [
{
"type": "object",
"properties": {
"title": {
"type": "string"
},
"component": {
"type": "string"
},
"order": {
"type": "integer"
}
},
"required": ["title", "component", "order"]
},
{
"type": "object",
"properties": {
"title": {
"type": "string"
},
"component": {
"type": "string"
},
"order": {
"type": "integer"
}
},
"required": ["title", "component", "order"]
},
{
"type": "object",
"properties": {
"title": {
"type": "string"
},
"component": {
"type": "string"
},
"order": {
"type": "integer"
}
},
"required": ["title", "component", "order"]
}
]
},
"backgroundColor": {
"type": "string"
},
"logoPadding": {
"type": "object",
"properties": {
"bottom": {
"type": "integer"
},
"top": {
"type": "integer"
},
"left": {
"type": "integer"
},
"right": {
"type": "integer"
}
},
"required": ["bottom", "top", "left", "right"]
},
"headerSubTitlePadding": {
"type": "object",
"properties": {
"bottom": {
"type": "integer"
},
"top": {
"type": "integer"
},
"left": {
"type": "integer"
},
"right": {
"type": "integer"
}
},
"required": ["bottom", "top", "left", "right"]
},
"headerTitlePadding": {
"type": "object",
"properties": {
"bottom": {
"type": "integer"
},
"top": {
"type": "integer"
},
"left": {
"type": "integer"
},
"right": {
"type": "integer"
}
},
"required": ["bottom", "top", "left", "right"]
}
},
"required": [
"class",
"name",
"title",
"label",
"logo",
"headerTitle",
"headerTitleColor",
"headerTitleFont",
"headerTitleFontSize",
"headerSubtitle",
"headerSubtitleColor",
"headerSubtitleFont",
"headerSubtitleFontSize",
"menuItems",
"headerComponents",
"backgroundColor",
"logoPadding",
"headerSubTitlePadding",
"headerTitlePadding"
]
},
{
"type": "object",
"properties": {
"class": {
"type": "string"
},
"title": {
"type": "string"
},
"rules": {
"type": "array",
"items": {}
}
},
"required": ["class", "title", "rules"]
},
{
"type": "object",
"properties": {
"class": {
"type": "string"
},
"cssCode": {
"type": "string"
}
},
"required": ["class", "cssCode"]
},
{
"type": "object",
"properties": {
"class": {
"type": "string"
},
"events": {
"type": "array",
"items": {}
},
"focusOn": {
"type": "null"
},
"basicEvent": {
"type": "integer"
},
"selectedSecondaryDatasources": {
"type": "array",
"items": {}
},
"selectedSecondaryDatasource": {
"type": "string"
},
"selectedColumnTrace": {
"type": "integer"
},
"executeValidation": {
"type": "boolean"
},
"selectedSubForm": {
"type": "string"
},
"subFormSize": {
"type": "object",
"properties": {
"width": {
"type": "integer"
},
"widthUnit": {
"type": "string"
},
"height": {
"type": "integer"
},
"heightUnit": {
"type": "string"
}
},
"required": ["width", "widthUnit", "height", "heightUnit"]
},
"addDocumentsToDataSource": {
"type": "boolean"
},
"selectedDocumentControl": {
"type": "string"
},
"modalType": {
"type": "string"
},
"modalTitle": {
"type": "string"
},
"modalMessage": {
"type": "string"
},
"modalUseOKButton": {
"type": "boolean"
},
"modalUseTimer": {
"type": "boolean"
},
"modalTimeout": {
"type": "integer"
},
"showMessageOnSuccess": {
"type": "boolean"
},
"clearControlsAfterExecute": {
"type": "boolean"
}
},
"required": [
"class",
"events",
"focusOn",
"basicEvent",
"selectedSecondaryDatasources",
"selectedSecondaryDatasource",
"selectedColumnTrace",
"executeValidation",
"selectedSubForm",
"subFormSize",
"addDocumentsToDataSource",
"selectedDocumentControl",
"modalType",
"modalTitle",
"modalMessage",
"modalUseOKButton",
"modalUseTimer",
"modalTimeout",
"showMessageOnSuccess",
"clearControlsAfterExecute"
]
}
]
},
"children": {
"type": "array",
"items": {}
},
"layerIndex": {
"type": "integer"
}
},
"required": [
"name",
"component",
"x",
"y",
"rows",
"cols",
"props",
"children",
"layerIndex"
]
}
Este JSON se coloca dentro del array de objetos JSON del nodo children de un control Formulario
{
"name": "Header1",
"component": "HeaderComponent",
"x": 0,
"y": 0,
"rows": 1,
"cols": 6,
"props": [
{
"class": "BasicPropertiesComponent",
"name": "Header1",
"title": "PROPERTIES.BASIC.TITLE",
"label": "Header1",
"value": "",
"tooltip": "",
"tooltipPosition": "above",
"font": "Quicksand",
"align": "center-container",
"fontWeight": "inherit",
"fontColor": "#000000",
"backgroundColor": "#FFFFFF",
"fontSize": 12,
"enabled": true,
"parentEnabled": true,
"visible": true,
"vertical": false,
"fontEffectLineThrough": false,
"fontEffectUnderline": false,
"properties": [
"label",
"font",
"fontWeight",
"fontColor",
"fontSize",
"visible"
],
"labelValue": "value",
"layer": 1,
"validateOnHiddenControl": false,
"isSubForm": false,
"isMainForm": false
},
{
"class": "HeaderPropertiesComponent",
"name": "",
"title": "PROPERTIES.HEADER.TITLE",
"label": "",
"logo": "",
"headerTitle": "Título",
"headerTitleColor": "#000000",
"headerTitleFont": "Quicksand",
"headerTitleFontSize": 18,
"headerSubtitle": "Subtítulo",
"headerSubtitleColor": "#000000",
"headerSubtitleFont": "Quicksand",
"headerSubtitleFontSize": 16,
"menuItems": [],
"headerComponents": [
{
"title": "Logo",
"component": "logo",
"order": 1
},
{
"title": "Titulo",
"component": "title",
"order": 2
},
{
"title": "Menu",
"component": "menu",
"order": 3
}
],
"backgroundColor": "#e8e8e8",
"logoPadding": {
"bottom": 0,
"top": 0,
"left": 0,
"right": 0
},
"headerSubTitlePadding": {
"bottom": 0,
"top": 0,
"left": 0,
"right": 0
},
"headerTitlePadding": {
"bottom": 0,
"top": 0,
"left": 0,
"right": 0
}
},
{
"class": "FormattingPropertiesComponent",
"title": "PROPERTIES.FORMATTING.TITLE",
"rules": []
},
{
"class": "CustomStylesPropertiesComponent",
"cssCode": ""
},
{
"class": "CustomCodePropertiesComponent",
"events": [],
"focusOn": null,
"basicEvent": 1,
"selectedSecondaryDatasources": [],
"selectedSecondaryDatasource": "",
"selectedColumnTrace": 0,
"executeValidation": true,
"selectedSubForm": "",
"subFormSize": {
"width": 60,
"widthUnit": "percentage",
"height": 60,
"heightUnit": "percentage"
},
"addDocumentsToDataSource": false,
"selectedDocumentControl": "",
"modalType": "swal",
"modalTitle": "",
"modalMessage": "",
"modalUseOKButton": true,
"modalUseTimer": false,
"modalTimeout": 5,
"showMessageOnSuccess": true,
"clearControlsAfterExecute": false
}
],
"children": [],
"layerIndex": 1
}
Es fundamental que todos los nodos del array props se encuentren presentes.
Cuando incluyas un JSON de un control dentro del array 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.
{
"name": "FormWithButton",
"controls": "[{\"name\":\"FormWithHeader\",\"component\":\"MainFormComponent\",\"x\":0,\"y\":0,\"rows\":0,\"cols\":0,\"props\":[{\"class\":\"BasicPropertiesComponent\",\"name\":\"FormWithHeader\",\"title\":\"PROPERTIES.BASIC.TITLE\",\"label\":\"FormWithHeader\",\"value\":\"\",\"tooltip\":\"\",\"tooltipPosition\":\"above\",\"font\":\"Quicksand\",\"align\":\"center-container\",\"fontWeight\":\"inherit\",\"fontColor\":\"#FFFFFF\",\"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},{\"class\":\"FormPropertiesComponent\",\"title\":\"PROPERTIES.FORM.TITLE\",\"showMessageOnSuccess\":true,\"messagesParametersOnSuccess\":[],\"messageOnSuccess\":\"La operación se completó con éxito.\",\"showMessageOnError\":true,\"messageOnError\":\"Ha ocurrido un error.\",\"closeOnSuccess\":true,\"controlType\":\"standard\",\"cols\":6,\"rowHeight\":70,\"themeUseDefaultSettings\":true,\"theme\":\"bizuit\",\"modalType\":\"swal\",\"modalTitle\":\"\",\"modalUseOKButton\":true,\"modalUseTimer\":false,\"modalUseDefaultSettings\":true,\"modalTimeout\":0,\"useRaiseEventAsync\":false,\"processingWaitTime\":5},{\"class\":\"CustomCodePropertiesComponent\",\"events\":[],\"focusOn\":null,\"basicEvent\":1,\"selectedSecondaryDatasources\":[],\"selectedSecondaryDatasource\":\"\",\"selectedColumnTrace\":0,\"executeValidation\":true,\"selectedSubForm\":\"\",\"subFormSize\":{\"width\":60,\"widthUnit\":\"percentage\",\"height\":60,\"heightUnit\":\"percentage\"},\"addDocumentsToDataSource\":false,\"selectedDocumentControl\":\"\",\"modalType\":\"swal\",\"modalTitle\":\"\",\"modalMessage\":\"\",\"modalUseOKButton\":true,\"modalUseTimer\":false,\"modalTimeout\":5,\"showMessageOnSuccess\":true,\"clearControlsAfterExecute\":false},{\"class\":\"CustomStylesPropertiesComponent\",\"cssCode\":\"\"},{\"class\":\"SecurityPropertiesComponent\",\"name\":\"\",\"title\":\"PROPERTIES.SECURITY.TITLE\",\"label\":\"\",\"value\":\"\",\"requiresAuthentication\":false,\"securityList\":[]}],\"children\":[{\"name\":\"Header1\",\"component\":\"HeaderComponent\",\"x\":0,\"y\":0,\"rows\":1,\"cols\":6,\"props\":[{\"class\":\"BasicPropertiesComponent\",\"name\":\"Header1\",\"title\":\"PROPERTIES.BASIC.TITLE\",\"label\":\"Header1\",\"value\":\"\",\"tooltip\":\"\",\"tooltipPosition\":\"above\",\"font\":\"Quicksand\",\"align\":\"center-container\",\"fontWeight\":\"inherit\",\"fontColor\":\"#000000\",\"backgroundColor\":\"#FFFFFF\",\"fontSize\":12,\"enabled\":true,\"parentEnabled\":true,\"visible\":true,\"vertical\":false,\"fontEffectLineThrough\":false,\"fontEffectUnderline\":false,\"properties\":[\"label\",\"font\",\"fontWeight\",\"fontColor\",\"fontSize\",\"visible\"],\"labelValue\":\"value\",\"layer\":1,\"validateOnHiddenControl\":false,\"isSubForm\":false,\"isMainForm\":false},{\"class\":\"HeaderPropertiesComponent\",\"name\":\"\",\"title\":\"PROPERTIES.HEADER.TITLE\",\"label\":\"\",\"logo\":\"\",\"headerTitle\":\"Título\",\"headerTitleColor\":\"#000000\",\"headerTitleFont\":\"Quicksand\",\"headerTitleFontSize\":18,\"headerSubtitle\":\"Subtítulo\",\"headerSubtitleColor\":\"#000000\",\"headerSubtitleFont\":\"Quicksand\",\"headerSubtitleFontSize\":16,\"menuItems\":[],\"headerComponents\":[{\"title\":\"Logo\",\"component\":\"logo\",\"order\":1},{\"title\":\"Titulo\",\"component\":\"title\",\"order\":2},{\"title\":\"Menu\",\"component\":\"menu\",\"order\":3}],\"backgroundColor\":\"#e8e8e8\",\"logoPadding\":{\"bottom\":0,\"top\":0,\"left\":0,\"right\":0},\"headerSubTitlePadding\":{\"bottom\":0,\"top\":0,\"left\":0,\"right\":0},\"headerTitlePadding\":{\"bottom\":0,\"top\":0,\"left\":0,\"right\":0}},{\"class\":\"FormattingPropertiesComponent\",\"title\":\"PROPERTIES.FORMATTING.TITLE\",\"rules\":[]},{\"class\":\"CustomStylesPropertiesComponent\",\"cssCode\":\"\"},{\"class\":\"CustomCodePropertiesComponent\",\"events\":[],\"focusOn\":null,\"basicEvent\":1,\"selectedSecondaryDatasources\":[],\"selectedSecondaryDatasource\":\"\",\"selectedColumnTrace\":0,\"executeValidation\":true,\"selectedSubForm\":\"\",\"subFormSize\":{\"width\":60,\"widthUnit\":\"percentage\",\"height\":60,\"heightUnit\":\"percentage\"},\"addDocumentsToDataSource\":false,\"selectedDocumentControl\":\"\",\"modalType\":\"swal\",\"modalTitle\":\"\",\"modalMessage\":\"\",\"modalUseOKButton\":true,\"modalUseTimer\":false,\"modalTimeout\":5,\"showMessageOnSuccess\":true,\"clearControlsAfterExecute\":false}],\"children\":[],\"layerIndex\":1}],\"layerIndex\":1}]",
"dataSources": "[]",
"Version": 1,
"Description": "",
"Category": "",
"Subcategory": ""
}