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": ""
}