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: