Un control de tipo Botón (o Button) 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"
},
{
"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"
},
"backgroundColor": {
"type": "string"
},
"title": {
"type": "string"
},
"classType": {
"type": "string"
},
"icon": {
"type": "string"
},
"width": {
"type": "null"
},
"height": {
"type": "null"
}
},
"required": [
"class",
"backgroundColor",
"title",
"classType",
"icon",
"width",
"height"
]
},
{
"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": "Button",
"component": "MainFormComponent",
"x": 0,
"y": 0,
"rows": 0,
"cols": 0,
"props": [
{
"class": "BasicPropertiesComponent",
"name": "Button",
"title": "PROPERTIES.BASIC.TITLE",
"label": "Button",
"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": "Button1",
"component": "ButtonComponent",
"x": 0,
"y": 1,
"rows": 1,
"cols": 1,
"props": [
{
"class": "BasicPropertiesComponent",
"name": "Button1",
"title": "PROPERTIES.BASIC.TITLE",
"label": "Button1",
"value": "",
"tooltip": "",
"tooltipPosition": "above",
"font": "Quicksand",
"align": "center-container",
"fontWeight": "inherit",
"fontColor": "#FFFFFF",
"backgroundColor": "#FFFFFF",
"fontSize": 9,
"enabled": true,
"parentEnabled": true,
"visible": true,
"vertical": false,
"fontEffectLineThrough": false,
"fontEffectUnderline": false,
"properties": [
"label",
"font",
"align",
"fontWeight",
"fontColor",
"fontSize",
"enabled",
"visible",
"tooltip"
],
"labelValue": "value",
"layer": 1,
"validateOnHiddenControl": false,
"isSubForm": false,
"isMainForm": false
},
{
"class": "ButtonPropertiesComponent",
"backgroundColor": "primary",
"title": "PROPERTIES.BUTTON.TITLE",
"classType": "mat-raised-button",
"icon": "",
"width": null,
"height": null
},
{
"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
}
]
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\\":\\"FormWithButton\\",\\"component\\":\\"MainFormComponent\\",\\"x\\":0,\\"y\\":0,\\"rows\\":0,\\"cols\\":0,\\"props\\":[{\\"class\\":\\"BasicPropertiesComponent\\",\\"name\\":\\"Button\\",\\"title\\":\\"PROPERTIES.BASIC.TITLE\\",\\"label\\":\\"Button\\",\\"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\\":\\"Button1\\",\\"component\\":\\"ButtonComponent\\",\\"x\\":0,\\"y\\":1,\\"rows\\":1,\\"cols\\":1,\\"props\\":[{\\"class\\":\\"BasicPropertiesComponent\\",\\"name\\":\\"Button1\\",\\"title\\":\\"PROPERTIES.BASIC.TITLE\\",\\"label\\":\\"Button1\\",\\"value\\":\\"\\",\\"tooltip\\":\\"\\",\\"tooltipPosition\\":\\"above\\",\\"font\\":\\"Quicksand\\",\\"align\\":\\"center-container\\",\\"fontWeight\\":\\"inherit\\",\\"fontColor\\":\\"#FFFFFF\\",\\"backgroundColor\\":\\"#FFFFFF\\",\\"fontSize\\":9,\\"enabled\\":true,\\"parentEnabled\\":true,\\"visible\\":true,\\"vertical\\":false,\\"fontEffectLineThrough\\":false,\\"fontEffectUnderline\\":false,\\"properties\\":[\\"label\\",\\"font\\",\\"align\\",\\"fontWeight\\",\\"fontColor\\",\\"fontSize\\",\\"enabled\\",\\"visible\\",\\"tooltip\\"],\\"labelValue\\":\\"value\\",\\"layer\\":1,\\"validateOnHiddenControl\\":false,\\"isSubForm\\":false,\\"isMainForm\\":false},{\\"class\\":\\"ButtonPropertiesComponent\\",\\"backgroundColor\\":\\"primary\\",\\"title\\":\\"PROPERTIES.BUTTON.TITLE\\",\\"classType\\":\\"mat-raised-button\\",\\"icon\\":\\"\\",\\"width\\":null,\\"height\\":null},{\\"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": ""
}