Formulario básico con inputs, validaciones y botón de envío.
┌────────────────────────────────────────┐
│ Registro de Usuario │
├────────────────────────────────────────┤
│ [Nombre Completo____________] │
│ [Email__________________] [@___] │
│ [Teléfono_______________] │
│ [Fecha Nacimiento____] [Calend] │
│ □ Acepto términos y condiciones │
│ [Registrarse] [Cancelar] │
└────────────────────────────────────────┘
{ "id": 100, "name": "form_RegistroUsuario", "controls": "[{\\"name\\":\\"form_RegistroUsuario\\",\\"component\\":\\"MainFormComponent\\",\\"x\\":0,\\"y\\":0,\\"rows\\":0,\\"cols\\":0,\\"props\\":[{\\"class\\":\\"BasicPropertiesComponent\\",\\"name\\":\\"form_RegistroUsuario\\",\\"label\\":\\"Registro de Usuario\\",\\"font\\":\\"Quicksand\\",\\"fontSize\\":12,\\"fontColor\\":\\"#000000\\",\\"backgroundColor\\":\\"#FFFFFF\\",\\"enabled\\":true,\\"visible\\":true},{\\"class\\":\\"FormPropertiesComponent\\",\\"showMessageOnSuccess\\":true,\\"messageOnSuccess\\":\\"Usuario registrado correctamente. Recibirá un email de confirmación.\\",\\"showMessageOnError\\":true,\\"messageOnError\\":\\"Error al registrar usuario. Verifique los datos.\\",\\"closeOnSuccess\\":true,\\"cols\\":6,\\"rowHeight\\":70,\\"theme\\":\\"bizuit\\",\\"modalType\\":\\"swal\\",\\"themeUseDefaultSettings\\":true},{\\"class\\":\\"CustomCodePropertiesComponent\\",\\"events\\":[]},{\\"class\\":\\"CustomStylesPropertiesComponent\\",\\"cssCode\\":\\"\\"}],\\"children\\":[{\\"name\\":\\"LblTitulo\\",\\"component\\":\\"LabelComponent\\",\\"x\\":0,\\"y\\":0,\\"rows\\":1,\\"cols\\":6,\\"props\\":[{\\"class\\":\\"BasicPropertiesComponent\\",\\"name\\":\\"LblTitulo\\",\\"label\\":\\"Registro de Usuario\\",\\"value\\":\\"Registro de Usuario\\",\\"font\\":\\"Quicksand\\",\\"fontSize\\":20,\\"fontColor\\":\\"#667eea\\",\\"fontWeight\\":\\"bold\\",\\"enabled\\":true,\\"visible\\":true}]},{\\"name\\":\\"TxtNombre\\",\\"component\\":\\"InputTextboxComponent\\",\\"x\\":0,\\"y\\":1,\\"rows\\":1,\\"cols\\":3,\\"props\\":[{\\"class\\":\\"BasicPropertiesComponent\\",\\"name\\":\\"TxtNombre\\",\\"label\\":\\"Nombre Completo\\",\\"value\\":\\"\\",\\"tooltip\\":\\"Ingrese su nombre y apellido\\",\\"enabled\\":true,\\"visible\\":true},{\\"class\\":\\"BindingsPropertiesComponent\\",\\"primaryDataSource\\":{\\"source\\":\\"parameter\\",\\"name\\":\\"NombreCompleto\\",\\"mode\\":\\"bidirectional\\",\\"type\\":\\"Parameter\\",\\"parameterType\\":1}},{\\"class\\":\\"RestrictionsPropertiesComponent\\",\\"required\\":true,\\"dataType\\":\\"String\\",\\"lengthType\\":\\"Variable\\",\\"minLength\\":3,\\"maxLength\\":100},{\\"class\\":\\"ValidationsPropertiesComponent\\",\\"match\\":\\"ANY\\",\\"errorMessage\\":\\"\\",\\"rules\\":[]},{\\"class\\":\\"CustomCodePropertiesComponent\\",\\"events\\":[]}]},{\\"name\\":\\"TxtEmail\\",\\"component\\":\\"InputTextboxComponent\\",\\"x\\":3,\\"y\\":1,\\"rows\\":1,\\"cols\\":3,\\"props\\":[{\\"class\\":\\"BasicPropertiesComponent\\",\\"name\\":\\"TxtEmail\\",\\"label\\":\\"Email\\",\\"value\\":\\"\\",\\"enabled\\":true,\\"visible\\":true},{\\"class\\":\\"BindingsPropertiesComponent\\",\\"primaryDataSource\\":{\\"source\\":\\"parameter\\",\\"name\\":\\"Email\\",\\"mode\\":\\"bidirectional\\"}},{\\"class\\":\\"RestrictionsPropertiesComponent\\",\\"required\\":true,\\"dataType\\":\\"String\\",\\"regexPattern\\":\\"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\\\\\\\.[a-zA-Z]{2,}$\\"},{\\"class\\":\\"ValidationsPropertiesComponent\\",\\"match\\":\\"ANY\\",\\"errorMessage\\":\\"Email inválido\\",\\"rules\\":[]}]},{\\"name\\":\\"TxtTelefono\\",\\"component\\":\\"InputTextboxComponent\\",\\"x\\":0,\\"y\\":2,\\"rows\\":1,\\"cols\\":3,\\"props\\":[{\\"class\\":\\"BasicPropertiesComponent\\",\\"name\\":\\"TxtTelefono\\",\\"label\\":\\"Teléfono\\",\\"value\\":\\"\\",\\"enabled\\":true,\\"visible\\":true},{\\"class\\":\\"BindingsPropertiesComponent\\",\\"primaryDataSource\\":{\\"source\\":\\"parameter\\",\\"name\\":\\"Telefono\\",\\"mode\\":\\"bidirectional\\"}},{\\"class\\":\\"RestrictionsPropertiesComponent\\",\\"required\\":false,\\"dataType\\":\\"String\\",\\"regexPattern\\":\\"^[0-9]{10}$\\"}]},{\\"name\\":\\"DtpFechaNacimiento\\",\\"component\\":\\"DatePickerComponent\\",\\"x\\":3,\\"y\\":2,\\"rows\\":1,\\"cols\\":3,\\"props\\":[{\\"class\\":\\"BasicPropertiesComponent\\",\\"name\\":\\"DtpFechaNacimiento\\",\\"label\\":\\"Fecha de Nacimiento\\",\\"enabled\\":true,\\"visible\\":true},{\\"class\\":\\"BindingsPropertiesComponent\\",\\"primaryDataSource\\":{\\"source\\":\\"parameter\\",\\"name\\":\\"FechaNacimiento\\",\\"mode\\":\\"bidirectional\\"}},{\\"class\\":\\"RestrictionsPropertiesComponent\\",\\"required\\":true,\\"format\\":\\"Short\\",\\"dateTimeMaxValueType\\":\\"Relative\\",\\"dateTimeMaxValueRelativeOperation\\":\\"Subtract\\",\\"dateTimeMaxValueRelativePeriod\\":\\"Years\\",\\"dateTimeMaxValueRelativeValue\\":18}]},{\\"name\\":\\"ChkTerminos\\",\\"component\\":\\"CheckboxComponent\\",\\"x\\":0,\\"y\\":3,\\"rows\\":1,\\"cols\\":6,\\"props\\":[{\\"class\\":\\"BasicPropertiesComponent\\",\\"name\\":\\"ChkTerminos\\",\\"label\\":\\"Acepto los términos y condiciones\\",\\"value\\":\\"false\\"},{\\"class\\":\\"RestrictionsPropertiesComponent\\",\\"required\\":true,\\"dataTypeBooleanControl\\":\\"Boolean\\",\\"checkValue\\":\\"true\\",\\"uncheckValue\\":\\"false\\"},{\\"class\\":\\"ValidationsPropertiesComponent\\",\\"match\\":\\"ALL\\",\\"errorMessage\\":\\"Debe aceptar los términos\\",\\"rules\\":[{\\"name\\":\\"Validar\\",\\"conditions\\":[{\\"controlName\\":\\"ChkTerminos\\",\\"operator\\":\\"equals\\",\\"value\\":{\\"type\\":\\"constant\\",\\"value\\":\\"true\\"}}]}]}]},{\\"name\\":\\"BtnRegistrar\\",\\"component\\":\\"ButtonComponent\\",\\"x\\":2,\\"y\\":4,\\"rows\\":1,\\"cols\\":2,\\"props\\":[{\\"class\\":\\"BasicPropertiesComponent\\",\\"name\\":\\"BtnRegistrar\\",\\"label\\":\\"Registrarse\\"},{\\"class\\":\\"ButtonPropertiesComponent\\",\\"backgroundColor\\":\\"primary\\",\\"classType\\":\\"mat-raised-button\\",\\"icon\\":\\"person_add\\"},{\\"class\\":\\"CustomCodePropertiesComponent\\",\\"basicEvent\\":1,\\"executeValidation\\":true,\\"events\\":[]}]},{\\"name\\":\\"BtnCancelar\\",\\"component\\":\\"ButtonComponent\\",\\"x\\":4,\\"y\\":4,\\"rows\\":1,\\"cols\\":2,\\"props\\":[{\\"class\\":\\"BasicPropertiesComponent\\",\\"name\\":\\"BtnCancelar\\",\\"label\\":\\"Cancelar\\"},{\\"class\\":\\"ButtonPropertiesComponent\\",\\"backgroundColor\\":\\"warn\\",\\"classType\\":\\"mat-stroked-button\\",\\"icon\\":\\"cancel\\"},{\\"class\\":\\"CustomCodePropertiesComponent\\",\\"basicEvent\\":5,\\"events\\":[]}]}]}]", "dataSources": "[{\\"name\\":\\"Parámetros y Variables\\",\\"isPrimary\\":true,\\"primarySchema\\":[{\\"label\\":\\"NombreCompleto\\",\\"type\\":\\"parameter\\",\\"dataType\\":\\"String\\"},{\\"label\\":\\"Email\\",\\"type\\":\\"parameter\\",\\"dataType\\":\\"String\\"},{\\"label\\":\\"Telefono\\",\\"type\\":\\"parameter\\",\\"dataType\\":\\"String\\"},{\\"label\\":\\"FechaNacimiento\\",\\"type\\":\\"parameter\\",\\"dataType\\":\\"Date\\"}],\\"events\\":[]}]", "version": 1, "published": false, "description": "Formulario de registro de usuario simple", "category": "Usuarios", "subcategory": "Registro"}
Formulario complejo con múltiples componentes, data sources SQL y REST API, validaciones cruzadas y lógica personalizada.
┌─────────────────────────────────────────────────────────┐
│ 🏦 SOLICITUD DE CRÉDITO PERSONAL │
├─────────────────────────────────────────────────────────┤
│ ┌─ Datos Personales ─────────────────────────────────┐│
│ │ [Nombre__________] [Apellido__________] ││
│ │ [DNI_______] [Tipo Doc▼] [Fecha Nac___] ││
│ │ [Email___________] [Teléfono__________] ││
│ └────────────────────────────────────────────────────┘│
│ ┌─ Datos del Préstamo ──────────────────────────────┐│
│ │ [Tipo Crédito▼] [Monto $______] [Cuotas__] ││
│ │ [Destino Fondos▼] ││
│ │ ○ Empleado ○ Autónomo ○ Desempleado ││
│ └────────────────────────────────────────────────────┘│
│ ┌─ Productos Seleccionados ─────────────────────────┐│
│ │ │Código│Descripción │Cantidad│Precio│Total │││
│ │ ├──────┼──────────────────┼────────┼──────┼──────┤││
│ │ │PROD1 │Préstamo Personal │ 1 │10000 │10000 │││
│ │ │PROD2 │Seguro de Vida │ 1 │ 500 │ 500 │││
│ │ └──────┴──────────────────┴────────┴──────┴──────┘││
│ └────────────────────────────────────────────────────┘│
│ [📄 Adjuntar DNI] [📄 Adjuntar Recibo] │
│ □ Acepto términos y condiciones │
│ Total: $10,500.00 │
│ [💾 Guardar] [✅ Enviar Solicitud] [❌ Cancelar] │
└─────────────────────────────────────────────────────────┘
Nota: Este JSON está deserializado y formateado para comprensión. En producción debe estar serializado.
{ "id": 200, "name": "form_SolicitudCredito", "version": 1, "published": true, "description": "Formulario completo de solicitud de crédito con validaciones y data sources", "category": "Créditos", "subcategory": "Solicitudes", "controls": [ { "name": "form_SolicitudCredito", "component": "MainFormComponent", "x": 0, "y": 0, "rows": 0, "cols": 0, "props": [ { "class": "BasicPropertiesComponent", "name": "form_SolicitudCredito", "label": "Solicitud de Crédito Personal", "font": "Quicksand", "fontSize": 12, "backgroundColor": "#F5F5F5", "enabled": true, "visible": true }, { "class": "FormPropertiesComponent", "showMessageOnSuccess": true, "messageOnSuccess": "Solicitud enviada correctamente. Número de referencia: [:NumeroSolicitud:]", "messagesParametersOnSuccess": [ {"key": "NumeroSolicitud", "value": "/parameter/SolicitudId"} ], "showMessageOnError": true, "messageOnError": "Error al procesar solicitud. Verifique los datos.", "closeOnSuccess": true, "cols": 6, "rowHeight": 70, "theme": "bizuit", "modalType": "swal" }, { "class": "CustomCodePropertiesComponent", "events": [ { "eventType": "Load", "code": "this.executeDataSource('CargarTiposCredito');\\nthis.executeDataSource('CargarDestinoFondos');" } ] }, { "class": "CustomStylesPropertiesComponent", "cssCode": ".header-gradient { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; color: white; border-radius: 8px 8px 0 0; }" } ], "children": [ // HEADER { "name": "HdrTitulo", "component": "HeaderComponent", "x": 0, "y": 0, "rows": 1, "cols": 6, "props": [ { "class": "BasicPropertiesComponent", "name": "HdrTitulo" }, { "class": "HeaderPropertiesComponent", "title": "Solicitud de Crédito Personal", "subtitle": "Complete todos los datos requeridos", "showLogo": true, "logoUrl": "<https://cdn.example.com/logo.png>", "backgroundColor": "#667eea", "textColor": "#FFFFFF" } ] }, // CONTENEDOR: DATOS PERSONALES { "name": "CntDatosPersonales", "component": "ContainerComponent", "x": 0, "y": 1, "rows": 3, "cols": 6, "props": [ { "class": "BasicPropertiesComponent", "name": "CntDatosPersonales", "label": "Datos Personales", "backgroundColor": "#FFFFFF" }, { "class": "ContainerPropertiesComponent", "borderColor": "#E5E7EB", "borderWidth": 1, "borderStyle": "solid", "borderRadius": 8, "padding": 15 } ], "children": [ { "name": "TxtNombre", "component": "InputTextboxComponent", "x": 0, "y": 0, "rows": 1, "cols": 3, "props": [ { "class": "BasicPropertiesComponent", "name": "TxtNombre", "label": "Nombre", "enabled": true, "visible": true }, { "class": "BindingsPropertiesComponent", "primaryDataSource": { "source": "parameter", "name": "ClienteNombre", "mode": "bidirectional" } }, { "class": "RestrictionsPropertiesComponent", "required": true, "dataType": "String", "minLength": 2, "maxLength": 50 } ] }, { "name": "TxtApellido", "component": "InputTextboxComponent", "x": 3, "y": 0, "rows": 1, "cols": 3, "props": [ { "class": "BasicPropertiesComponent", "name": "TxtApellido", "label": "Apellido" }, { "class": "BindingsPropertiesComponent", "primaryDataSource": { "source": "parameter", "name": "ClienteApellido", "mode": "bidirectional" } }, { "class": "RestrictionsPropertiesComponent", "required": true, "dataType": "String", "minLength": 2, "maxLength": 50 } ] }, { "name": "TxtDNI", "component": "InputTextboxComponent", "x": 0, "y": 1, "rows": 1, "cols": 2, "props": [ { "class": "BasicPropertiesComponent", "name": "TxtDNI", "label": "DNI" }, { "class": "BindingsPropertiesComponent", "primaryDataSource": { "source": "parameter", "name": "DNI", "mode": "bidirectional" } }, { "class": "RestrictionsPropertiesComponent", "required": true, "dataType": "String", "regexPattern": "^[0-9]{8}$" } ] }, { "name": "CmbTipoDocumento", "component": "ComboboxComponent", "x": 2, "y": 1, "rows": 1, "cols": 2, "props": [ { "class": "BasicPropertiesComponent", "name": "CmbTipoDocumento", "label": "Tipo Documento" }, { "class": "BindingsPropertiesComponent", "primaryDataSource": { "source": "parameter", "name": "TipoDocumento", "mode": "bidirectional" } }, { "class": "PopulationPropertiesComponent", "dataOrigin": "Manual", "options": [ {"value": "DNI", "label": "DNI"}, {"value": "Pasaporte", "label": "Pasaporte"}, {"value": "CUIL", "label": "CUIL"} ] }, { "class": "RestrictionsPropertiesComponent", "required": true } ] }, { "name": "DtpFechaNacimiento", "component": "DatePickerComponent", "x": 4, "y": 1, "rows": 1, "cols": 2, "props": [ { "class": "BasicPropertiesComponent", "name": "DtpFechaNacimiento", "label": "Fecha Nacimiento" }, { "class": "BindingsPropertiesComponent", "primaryDataSource": { "source": "parameter", "name": "FechaNacimiento", "mode": "bidirectional" } }, { "class": "RestrictionsPropertiesComponent", "required": true, "format": "Short", "dateTimeMaxValueType": "Relative", "dateTimeMaxValueRelativeOperation": "Subtract", "dateTimeMaxValueRelativePeriod": "Years", "dateTimeMaxValueRelativeValue": 18 } ] }, { "name": "TxtEmail", "component": "InputTextboxComponent", "x": 0, "y": 2, "rows": 1, "cols": 3, "props": [ { "class": "BasicPropertiesComponent", "name": "TxtEmail", "label": "Email" }, { "class": "BindingsPropertiesComponent", "primaryDataSource": { "source": "parameter", "name": "Email", "mode": "bidirectional" } }, { "class": "RestrictionsPropertiesComponent", "required": true, "dataType": "String", "regexPattern": "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\\\.[a-zA-Z]{2,}$" } ] }, { "name": "TxtTelefono", "component": "InputTextboxComponent", "x": 3, "y": 2, "rows": 1, "cols": 3, "props": [ { "class": "BasicPropertiesComponent", "name": "TxtTelefono", "label": "Teléfono" }, { "class": "BindingsPropertiesComponent", "primaryDataSource": { "source": "parameter", "name": "Telefono", "mode": "bidirectional" } }, { "class": "RestrictionsPropertiesComponent", "required": true, "dataType": "String", "regexPattern": "^[0-9]{10}$" } ] } ] }, // CONTENEDOR: DATOS DEL PRÉSTAMO { "name": "CntDatosPrestamo", "component": "ContainerComponent", "x": 0, "y": 4, "rows": 2, "cols": 6, "props": [ { "class": "BasicPropertiesComponent", "name": "CntDatosPrestamo", "label": "Datos del Préstamo", "backgroundColor": "#FFFFFF" }, { "class": "ContainerPropertiesComponent", "borderColor": "#E5E7EB", "borderWidth": 1, "borderStyle": "solid", "borderRadius": 8, "padding": 15 } ], "children": [ { "name": "CmbTipoCredito", "component": "ComboboxComponent", "x": 0, "y": 0, "rows": 1, "cols": 2, "props": [ { "class": "BasicPropertiesComponent", "name": "CmbTipoCredito", "label": "Tipo de Crédito" }, { "class": "BindingsPropertiesComponent", "primaryDataSource": { "source": "parameter", "name": "TipoCreditoId", "mode": "bidirectional" }, "secondaryDataSourceResponse": { "name": "CargarTiposCredito", "item": "Table_0" } }, { "class": "PopulationPropertiesComponent", "dataOrigin": "DataSource", "dataSourceName": "CargarTiposCredito", "valueProperty": "TipoCreditoId", "textProperty": "TipoCreditoNombre" }, { "class": "RestrictionsPropertiesComponent", "required": true }, { "class": "CustomCodePropertiesComponent", "events": [ { "eventType": "Change", "code": "const tipoId = this.getControlValue('CmbTipoCredito');\\nif (tipoId) {\\n this.executeDataSource('ConsultarLimites');\\n}" } ] } ] }, { "name": "TxtMonto", "component": "InputTextboxComponent", "x": 2, "y": 0, "rows": 1, "cols": 2, "props": [ { "class": "BasicPropertiesComponent", "name": "TxtMonto", "label": "Monto Solicitado" }, { "class": "BindingsPropertiesComponent", "primaryDataSource": { "source": "parameter", "name": "MontoSolicitado", "mode": "bidirectional" } }, { "class": "RestrictionsPropertiesComponent", "required": true, "dataType": "Number", "minValue": 1000, "maxValue": 100000, "minValueIncluded": true, "maxValueIncluded": true, "decimalDigits": 2 }, { "class": "FormattingPropertiesComponent", "formatType": "Currency", "currencySymbol": "$", "decimalPlaces": 2, "thousandsSeparator": ",", "decimalSeparator": "." }, { "class": "ValidationsPropertiesComponent", "match": "ALL", "errorMessage": "El monto debe estar entre los límites del tipo de crédito", "rules": [ { "name": "Validar Límite Inferior", "conditions": [ { "controlName": "TxtMonto", "operator": "greaterThanOrEqual", "value": {"type": "control", "value": "LblMontoMinimo"} } ] }, { "name": "Validar Límite Superior", "conditions": [ { "controlName": "TxtMonto", "operator": "lessThanOrEqual", "value": {"type": "control", "value": "LblMontoMaximo"} } ] } ] } ] }, { "name": "TxtCuotas", "component": "InputTextboxComponent", "x": 4, "y": 0, "rows": 1, "cols": 2, "props": [ { "class": "BasicPropertiesComponent", "name": "TxtCuotas", "label": "Cantidad de Cuotas" }, { "class": "BindingsPropertiesComponent", "primaryDataSource": { "source": "parameter", "name": "CantidadCuotas", "mode": "bidirectional" } }, { "class": "RestrictionsPropertiesComponent", "required": true, "dataType": "Number", "minValue": 1, "maxValue": 60, "decimalDigits": 0 } ] }, { "name": "CmbDestinoFondos", "component": "ComboboxComponent", "x": 0, "y": 1, "rows": 1, "cols": 3, "props": [ { "class": "BasicPropertiesComponent", "name": "CmbDestinoFondos", "label": "Destino de los Fondos" }, { "class": "BindingsPropertiesComponent", "primaryDataSource": { "source": "parameter", "name": "DestinoFondosId", "mode": "bidirectional" }, "secondaryDataSourceResponse": { "name": "CargarDestinoFondos", "item": "Table_0" } }, { "class": "PopulationPropertiesComponent", "dataOrigin": "DataSource", "dataSourceName": "CargarDestinoFondos", "valueProperty": "DestinoId", "textProperty": "DestinoNombre" }, { "class": "RestrictionsPropertiesComponent", "required": true } ] }, { "name": "RbSituacionLaboral", "component": "RadioButtonComponent", "x": 3, "y": 1, "rows": 1, "cols": 3, "props": [ { "class": "BasicPropertiesComponent", "name": "RbSituacionLaboral", "label": "Situación Laboral", "vertical": false }, { "class": "BindingsPropertiesComponent", "primaryDataSource": { "source": "parameter", "name": "SituacionLaboral", "mode": "bidirectional" } }, { "class": "PopulationPropertiesComponent", "dataOrigin": "Manual", "options": [ {"value": "Empleado", "label": "Empleado"}, {"value": "Autonomo", "label": "Autónomo"}, {"value": "Desempleado", "label": "Desempleado"} ] }, { "class": "RestrictionsPropertiesComponent", "required": true } ] } ] }, // TABLA DE PRODUCTOS { "name": "TblProductos", "component": "TableComponent", "x": 0, "y": 6, "rows": 3, "cols": 6, "props": [ { "class": "BasicPropertiesComponent", "name": "TblProductos", "label": "Productos Seleccionados" }, { "class": "BindingsPropertiesComponent", "secondaryDataSourceResponse": { "name": "ConsultarProductos", "item": "Table_0" } }, { "class": "TablePropertiesComponent", "canAdd": true, "canEdit": true, "canDelete": true, "canSelect": true, "paginationPageSize": 10, "showPagination": false, "emptyRowsMessage": "No hay productos seleccionados", "rowCountMessage": "Total productos" }, { "class": "ColumnsPropertiesComponent", "columns": [ { "name": "Código", "prop": "codigo", "dataType": "String", "editable": false, "width": 100, "widthUnits": "Pixeles" }, { "name": "Descripción", "prop": "descripcion", "dataType": "String", "editable": false, "width": 40, "widthUnits": "Porcentaje" }, { "name": "Cantidad", "prop": "cantidad", "dataType": "Number", "editable": true, "width": 80, "widthUnits": "Pixeles" }, { "name": "Precio", "prop": "precio", "dataType": "Number", "editable": false, "width": 100, "widthUnits": "Pixeles" }, { "name": "Total", "prop": "total", "dataType": "Number", "editable": false, "width": 100, "widthUnits": "Pixeles" } ] }, { "class": "CustomCodePropertiesComponent", "events": [ { "eventType": "Click", "code": "// Calcular totales cuando se modifica la tabla\\nthis.calcularTotales();" } ] } ] }, // DOCUMENTOS { "name": "DocDNI", "component": "DocumentInputComponent", "x": 0, "y": 9, "rows": 1, "cols": 3, "props": [ { "class": "BasicPropertiesComponent", "name": "DocDNI", "label": "Adjuntar DNI (Frente y Dorso)" }, { "class": "DocumentPropertiesComponent", "allowedExtensions": ["pdf", "jpg", "png"], "maxFileSize": 5242880, "multiple": true, "sendFilesToBIZUITDataSource": true } ] }, { "name": "DocRecibo", "component": "DocumentInputComponent", "x": 3, "y": 9, "rows": 1, "cols": 3, "props": [ { "class": "BasicPropertiesComponent", "name": "DocRecibo", "label": "Adjuntar Último Recibo de Sueldo" }, { "class": "DocumentPropertiesComponent", "allowedExtensions": ["pdf"], "maxFileSize": 5242880, "multiple": false, "sendFilesToBIZUITDataSource": true } ] }, // TÉRMINOS { "name": "ChkTerminos", "component": "CheckboxComponent", "x": 0, "y": 10, "rows": 1, "cols": 6, "props": [ { "class": "BasicPropertiesComponent", "name": "ChkTerminos", "label": "Acepto los términos y condiciones del crédito", "value": "false" }, { "class": "RestrictionsPropertiesComponent", "required": true, "dataTypeBooleanControl": "Boolean", "checkValue": "true", "uncheckValue": "false" }, { "class": "ValidationsPropertiesComponent", "match": "ALL", "errorMessage": "Debe aceptar los términos y condiciones", "rules": [ { "name": "Validar Aceptación", "conditions": [ { "controlName": "ChkTerminos", "operator": "equals", "value": {"type": "constant", "value": "true"} } ] } ] } ] }, // TOTAL { "name": "LblTotal", "component": "LabelComponent", "x": 4, "y": 11, "rows": 1, "cols": 2, "props": [ { "class": "BasicPropertiesComponent", "name": "LblTotal", "label": "Total:", "value": "$0.00", "fontSize": 18, "fontWeight": "bold", "align": "center-end" }, { "class": "BindingsPropertiesComponent", "primaryDataSource": { "source": "variable", "name": "MontoTotal", "mode": "unidirectional" } } ] }, // BOTONES { "name": "BtnGuardar", "component": "ButtonComponent", "x": 1, "y": 12, "rows": 1, "cols": 1, "props": [ { "class": "BasicPropertiesComponent", "name": "BtnGuardar", "label": "Guardar" }, { "class": "ButtonPropertiesComponent", "backgroundColor": "accent", "classType": "mat-stroked-button", "icon": "save" }, { "class": "CustomCodePropertiesComponent", "basicEvent": 4, "executeValidation": false } ] }, { "name": "BtnEnviar", "component": "ButtonComponent", "x": 2, "y": 12, "rows": 1, "cols": 2, "props": [ { "class": "BasicPropertiesComponent", "name": "BtnEnviar", "label": "Enviar Solicitud" }, { "class": "ButtonPropertiesComponent", "backgroundColor": "primary", "classType": "mat-raised-button", "icon": "send" }, { "class": "CustomCodePropertiesComponent", "basicEvent": 1, "executeValidation": true, "selectedSecondaryDatasource": "EnviarSolicitudAPI" } ] }, { "name": "BtnCancelar", "component": "ButtonComponent", "x": 4, "y": 12, "rows": 1, "cols": 2, "props": [ { "class": "BasicPropertiesComponent", "name": "BtnCancelar", "label": "Cancelar" }, { "class": "ButtonPropertiesComponent", "backgroundColor": "warn", "classType": "mat-stroked-button", "icon": "cancel" }, { "class": "CustomCodePropertiesComponent", "basicEvent": 5 } ] } ] } ], "dataSources": [ // PRIMARY DATA SOURCES { "name": "Parámetros y Variables", "isPrimary": true, "primarySchema": [ {"label": "ClienteNombre", "type": "parameter", "dataType": "String"}, {"label": "ClienteApellido", "type": "parameter", "dataType": "String"}, {"label": "DNI", "type": "parameter", "dataType": "String"}, {"label": "TipoDocumento", "type": "parameter", "dataType": "String"}, {"label": "FechaNacimiento", "type": "parameter", "dataType": "Date"}, {"label": "Email", "type": "parameter", "dataType": "String"}, {"label": "Telefono", "type": "parameter", "dataType": "String"}, {"label": "TipoCreditoId", "type": "parameter", "dataType": "Number"}, {"label": "MontoSolicitado", "type": "parameter", "dataType": "Number"}, {"label": "CantidadCuotas", "type": "parameter", "dataType": "Number"}, {"label": "DestinoFondosId", "type": "parameter", "dataType": "Number"}, {"label": "SituacionLaboral", "type": "parameter", "dataType": "String"}, {"label": "SolicitudId", "type": "parameter", "dataType": "Number", "direction": "Out"}, {"label": "MontoTotal", "type": "variable", "dataType": "Number"} ] }, // SQL DATA SOURCE 1 { "name": "CargarTiposCredito", "isPrimary": false, "componentType": "SqlDataSourceComponent", "properties": [ { "class": "SqlDataSourcePropertiesComponent", "name": "CargarTiposCredito", "controllerType": 0, "connectionSource": 1, "connectionString": "DefaultConnection", "query": "SELECT TipoCreditoId, TipoCreditoNombre, TasaInteres FROM TiposCredito WHERE Activo = 1 ORDER BY TipoCreditoNombre", "parameters": [], "executeOnStart": true, "useCache": true, "cacheTime": 300, "requestStructure": "[{\\"label\\":\\"Request\\",\\"children\\":[]}]", "responseStructure": "[{\\"label\\":\\"Response\\",\\"children\\":[{\\"label\\":\\"Table_0\\",\\"type\\":\\"TableComponent\\",\\"columns\\":[{\\"prop\\":\\"TipoCreditoId\\"},{\\"prop\\":\\"TipoCreditoNombre\\"},{\\"prop\\":\\"TasaInteres\\"}],\\"children\\":[{\\"label\\":\\"TipoCreditoId\\",\\"secondaryDataSourceResponse\\":{\\"name\\":\\"CargarTiposCredito\\",\\"item\\":\\"Table_0/TipoCreditoId\\"}},{\\"label\\":\\"TipoCreditoNombre\\",\\"secondaryDataSourceResponse\\":{\\"name\\":\\"CargarTiposCredito\\",\\"item\\":\\"Table_0/TipoCreditoNombre\\"}},{\\"label\\":\\"TasaInteres\\",\\"secondaryDataSourceResponse\\":{\\"name\\":\\"CargarTiposCredito\\",\\"item\\":\\"Table_0/TasaInteres\\"}}]}]}]" } ] }, // SQL DATA SOURCE 2 { "name": "CargarDestinoFondos", "isPrimary": false, "componentType": "SqlDataSourceComponent", "properties": [ { "class": "SqlDataSourcePropertiesComponent", "name": "CargarDestinoFondos", "controllerType": 0, "connectionSource": 1, "connectionString": "DefaultConnection", "query": "SELECT DestinoId, DestinoNombre FROM DestinoFondos WHERE Activo = 1 ORDER BY DestinoNombre", "parameters": [], "executeOnStart": true, "useCache": true, "cacheTime": 300, "requestStructure": "[{\\"label\\":\\"Request\\",\\"children\\":[]}]", "responseStructure": "[{\\"label\\":\\"Response\\",\\"children\\":[{\\"label\\":\\"Table_0\\",\\"type\\":\\"TableComponent\\",\\"columns\\":[{\\"prop\\":\\"DestinoId\\"},{\\"prop\\":\\"DestinoNombre\\"}]}]}]" } ] }, // SQL DATA SOURCE 3 { "name": "ConsultarProductos", "isPrimary": false, "componentType": "SqlDataSourceComponent", "properties": [ { "class": "SqlDataSourcePropertiesComponent", "name": "ConsultarProductos", "controllerType": 0, "connectionSource": 1, "connectionString": "DefaultConnection", "query": "SELECT ProductoId as codigo, ProductoNombre as descripcion, 1 as cantidad, Precio as precio, Precio as total FROM Productos WHERE TipoCreditoId = @TipoCreditoId AND Activo = 1", "parameters": [ { "name": "@TipoCreditoId", "value": null, "direction": 0, "dataType": 1 } ], "executeOnStart": false, "requestStructure": "[{\\"label\\":\\"Request\\",\\"children\\":[{\\"label\\":\\"TipoCreditoId\\",\\"type\\":\\"InputTextboxComponent\\",\\"secondaryDataSourcesRequest\\":[{\\"name\\":\\"ConsultarProductos\\",\\"item\\":\\"TipoCreditoId\\"}]}]}]", "responseStructure": "[{\\"label\\":\\"Response\\",\\"children\\":[{\\"label\\":\\"Table_0\\",\\"type\\":\\"TableComponent\\",\\"columns\\":[{\\"prop\\":\\"codigo\\"},{\\"prop\\":\\"descripcion\\"},{\\"prop\\":\\"cantidad\\"},{\\"prop\\":\\"precio\\"},{\\"prop\\":\\"total\\"}]}]}]" } ] }, // REST API DATA SOURCE { "name": "EnviarSolicitudAPI", "isPrimary": false, "componentType": "RestAPIDataSourceComponent", "properties": [ { "class": "RestAPIDataSourcePropertiesComponent", "name": "EnviarSolicitudAPI", "URL": "<https://api.banco.com/solicitudes>", "method": "POST", "timeout": 30, "addHeaders": true, "headers": [ {"key": "Content-Type", "value": "application/json"}, {"key": "Authorization", "value": "Bearer token-api"} ], "useAuth": true, "authorizationType": "OAuth 2.0", "bearerToken": "", "useBody": true, "bodyType": "raw", "bodySubType": "application/json", "txtBody": "{\\n \\"cliente\\": {\\n \\"nombre\\": @ClienteNombre,\\n \\"apellido\\": @ClienteApellido,\\n \\"dni\\": @DNI,\\n \\"email\\": @Email,\\n \\"telefono\\": @Telefono\\n },\\n \\"credito\\": {\\n \\"tipoId\\": @TipoCreditoId,\\n \\"monto\\": @MontoSolicitado,\\n \\"cuotas\\": @CantidadCuotas,\\n \\"destino\\": @DestinoFondosId\\n }\\n}", "rawParameters": [ {"key": "@ClienteNombre", "value": ""}, {"key": "@ClienteApellido", "value": ""}, {"key": "@DNI", "value": ""}, {"key": "@Email", "value": ""}, {"key": "@Telefono", "value": ""}, {"key": "@TipoCreditoId", "value": ""}, {"key": "@MontoSolicitado", "value": ""}, {"key": "@CantidadCuotas", "value": ""}, {"key": "@DestinoFondosId", "value": ""} ], "executeOnStart": false, "requestStructure": "[{\\"label\\":\\"Request\\",\\"children\\":[{\\"label\\":\\"Properties\\",\\"children\\":[{\\"label\\":\\"bodyraw\\",\\"type\\":\\"TextareaComponent\\"}]}]}]", "responseStructure": "[{\\"label\\":\\"Response\\",\\"children\\":[{\\"label\\":\\"solicitudId\\",\\"type\\":\\"InputTextboxComponent\\",\\"secondaryDataSourceResponse\\":{\\"name\\":\\"EnviarSolicitudAPI\\",\\"item\\":\\"solicitudId\\"}},{\\"label\\":\\"numeroReferencia\\",\\"type\\":\\"InputTextboxComponent\\"},{\\"label\\":\\"estado\\",\\"type\\":\\"InputTextboxComponent\\"}]}]" } ] } ]}
✅ Componentes Utilizados:
✅ Data Sources:
✅ Características Avanzadas: