Diseña una interfaz de usuario moderna, clara y amigable que permita modificar dinámicamente el valor de un parámetro JSON utilizado en una aplicación de configuración. Objetivo: Reemplazar la edición manual del JSON en texto por una UI interactiva que permita a los usuarios modificar su contenido visualmente, sin necesidad de conocimientos técnicos. Detalles clave: Cada parámetro tiene un campo llamado valor que contiene un JSON con esta estructura: { "idParametro": "239", "nombre": "ADMINISTRADOR - CONFIGURACION CAMPOS HOJA DE VIDA DOCENTE", "valor": "{\"secciones\":[{\"ref\":\"datosPersonales\",\"etiqueta\":\"Datos Personales\",\"visible\":true,\"campos\":[{\"ref\":\"idTipoDocumento\",\"etiqueta\":\"Tipo Documento\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"codigo\",\"etiqueta\":\"Código\",\"edicion\":\"oculto\",\"requerido\":false,\"blank\":false},{\"ref\":\"foto\",\"etiqueta\":\"Fotografía\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"documento\",\"etiqueta\":\"Documento\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"idCiudadExpedicion\",\"etiqueta\":\"Ciudad Expedición\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"primerNombre\",\"etiqueta\":\"Primer Nombre\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"segundoNombre\",\"etiqueta\":\"Segundo Nombre\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"primerApellido\",\"etiqueta\":\"Primer Apellido\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"segundoApellido\",\"etiqueta\":\"Segundo Apellido\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"idCiudadNacimiento\",\"etiqueta\":\"Ciudad Nacimiento\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"fechaNacimiento\",\"etiqueta\":\"Fecha Nacimiento\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"sexo\",\"etiqueta\":\"Sexo\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"idTipoSangre\",\"etiqueta\":\"Tipo Sangre\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"idEstadoCivil\",\"etiqueta\":\"Estado Civil\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"numeroHijos\",\"etiqueta\":\"Número de hijos\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false}]},{\"ref\":\"emergencia\",\"etiqueta\":\"En caso de emergencia\",\"visible\":true,\"campos\":[{\"ref\":\"telefonoEmergencia\",\"etiqueta\":\"Teléfono Contacto de Emergencia\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"contactoEmergencia\",\"etiqueta\":\"Nombre Contacto de Emergencia\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false}]},{\"ref\":\"datosUbicacion\",\"etiqueta\":\"Datos Ubicación\",\"visible\":true,\"campos\":[{\"ref\":\"direccion\",\"etiqueta\":\"Dirección\",\"edicion\":\"editable\",\"requerido\":true,\"blank\":false},{\"ref\":\"barrio\",\"etiqueta\":\"Barrio\",\"edicion\":\"editable\",\"requerido\":true,\"blank\":false},{\"ref\":\"telefono\",\"etiqueta\":\"Teléfono\",\"edicion\":\"editable\",\"requerido\":true,\"blank\":false},{\"ref\":\"celular\",\"etiqueta\":\"Celular\",\"edicion\":\"editable\",\"requerido\":true,\"blank\":false},{\"ref\":\"email\",\"etiqueta\":\"email\",\"edicion\":\"editable\",\"requerido\":true,\"blank\":false},{\"ref\":\"emailAlterno\",\"etiqueta\":\"email Secundario\",\"edicion\":\"oculto\",\"requerido\":false,\"blank\":false},{\"ref\":\"idCiudad\",\"etiqueta\":\"Ciudad Ubicación\",\"edicion\":\"editable\",\"requerido\":true,\"blank\":false}]},{\"ref\":\"datosInstitucionales\",\"etiqueta\":\"Datos Institucionales\",\"visible\":true,\"campos\":[{\"ref\":\"fechaVinculacionMagisterio\",\"etiqueta\":\"Fecha Vinculación al Magisterio\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"decretoVinculacionMagisterio\",\"etiqueta\":\"Decreto Vinculación Magisterio\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"idCargoPersona\",\"etiqueta\":\"Clase de Funcionario\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"idGradoEscalafon\",\"etiqueta\":\"Escalafón\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"estado\",\"etiqueta\":\"Estado\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"maximaCarga\",\"etiqueta\":\"Máxima Carga(Horas Semanales)\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"fechaVinculacionColegio\",\"etiqueta\":\"Fecha Vinculación Colegio\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"fechaRetiroColegio\",\"etiqueta\":\"Fecha Retiro Colegio\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"decretoVinculacionColegio\",\"etiqueta\":\"Decreto Vinculación Colegio\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"area\",\"etiqueta\":\"Área Enseñanza Nombramiento\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"idTpoNombramiento\",\"etiqueta\":\"Tipo Nombramiento\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"horarioLaboral\",\"etiqueta\":\"Horario Laboral\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"anosFormacionSuperior\",\"etiqueta\":\"Años de Formación Superior\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false}]},{\"ref\":\"datosAdicionales\",\"etiqueta\":\"Datos Adicionales\",\"visible\":true,\"campos\":[{\"ref\":\"afiliacionPolitica\",\"etiqueta\":\"Afiliación Política\",\"edicion\":\"oculto\",\"requerido\":false,\"blank\":false},{\"ref\":\"sisben\",\"etiqueta\":\"Grupo Sisbén\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"numeroSisben\",\"etiqueta\":\"Subgrupo Sisbén\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"sistemaSalud\",\"etiqueta\":\"Sistema Salud\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"regimenSalud\",\"etiqueta\":\"Régimen Salud\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"fondoPensiones\",\"etiqueta\":\"Fondo Pensiones\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"apr\",\"etiqueta\":\"ARP\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"epsars\",\"etiqueta\":\"Eps-Ars\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false}]},{\"ref\":\"estudiosRealizados\",\"etiqueta\":\"Estudios Realizados\",\"visible\":true,\"campos\":[],\"secciones\":[{\"ref\":\"registroEstudiosRealizados\",\"etiqueta\":\"Registro Estudios Realizados\",\"visible\":true,\"campos\":[{\"ref\":\"tituloProfesional\",\"etiqueta\":\"Tipo Estudio\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"ano\",\"etiqueta\":\"Año\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"descripcionEstudio\",\"etiqueta\":\"Descripción Estudios Realizados\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"fechaInicioEstudio\",\"etiqueta\":\"Fecha Inicio\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"fechaFinEstudio\",\"etiqueta\":\"Fecha Fin\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"idCiudadEstudio\",\"etiqueta\":\"Ciudad\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"nombreInstitucion\",\"etiqueta\":\"Nombre Institución\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false}]}]},{\"ref\":\"experienciaLaboral\",\"etiqueta\":\"Experiencia Laboral\",\"visible\":true,\"campos\":[],\"secciones\":[{\"ref\":\"registroExperienciaLaboral\",\"etiqueta\":\"Registro Experiencia Laboral\",\"visible\":true,\"campos\":[{\"ref\":\"idCiudad\",\"etiqueta\":\"Ciudad\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"nombreEmpresa\",\"etiqueta\":\"Nombre Empresa\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"cargo\",\"etiqueta\":\"Cargo\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"fechaInicio\",\"etiqueta\":\"Fecha Inicio\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"fechaFin\",\"etiqueta\":\"Fecha Fin\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false},{\"ref\":\"descripcionExperienciaLaboral\",\"etiqueta\":\"Descripción Experiencia Laboral\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false}]}]},{\"ref\":\"sedes\",\"etiqueta\":\"Datos de Sede\",\"visible\":true,\"campos\":[{\"ref\":\"idSede\",\"etiqueta\":\"\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false}]},{\"ref\":\"jornadas\",\"etiqueta\":\"Datos de Jornada\",\"visible\":true,\"campos\":[{\"ref\":\"idJornada\",\"etiqueta\":\"\",\"edicion\":\"editable\",\"requerido\":false,\"blank\":false}]}]}", "tipoEdicion": "TEXTO", "validar": "requerido", "tamano": "999", "opciones": null, "sql": "", "fechaCambio": null, "registradoPor": "", "error": null, "listaOpciones": null, "descripcion": "", "ano": null, "esPublico": false }, La UI debe permitir: Visualizar todas las secciones principales. Agregar, editar o eliminar secciones y subsecciones. Agregar, editar o eliminar campos dentro de cada sección/subsección. Definir propiedades de cada campo (nombre, tipo, requerido, etc.). Crear una nueva configuración desde cero, con la misma estructura dinámica. Modificar visualmente el valor del parámetro sin tocar directamente el JSON. Consideraciones adicionales: Debe haber una forma de guardar los cambios y transformar la estructura de UI nuevamente a un JSON válido. Mostrar una vista previa o resumen del JSON generado puede ser útil. Incluir un selector de parámetros ya existentes, con posibilidad de modificarlos o crear uno nuevo. Diseño adaptable a escritorio (responsive deseable para otras vistas). Usar componentes UI modernos como acordeones, formularios dinámicos, drag-and-drop si es posible.
I'll create a modern, user-friendly interface for visually editing JSON configuration parameters without requiring technical knowledge.
La interfaz que he diseñado permite:
Gestión completa de secciones:
Gestión de campos:
Vista previa del JSON:
Selección de parámetros:
Esta interfaz elimina la necesidad de editar manualmente el JSON, permitiendo a usuarios sin conocimientos técnicos modificar la configuración de manera visual e intuitiva.