En este artículo, te explicaremos paso a paso cómo configurar un formulario con campos dinámicos en la plataforma de Atento. Esta funcionalidad permite que el usuario elija qué información solicitar a un usuario externo mediante un enlace público, personalizando así el formulario según sus necesidades y optimizando la recolección de datos en función de las necesidades específicas. Sigue los siguientes pasos para activar y configurar esta funcionalidad.
1. Activar la funcionalidad «METADATAS_TO_CHECK_HIDDEN_CONDITION»
El primer paso para configurar un formulario con campos dinámicos es solicitar al equipo de soporte de Athento que incluya los metadatos en el contexto de las hidden conditions. Para activar esta funcionalidad, se debe acceder a los settings de la plataforma y marcar el check “METADATAS_TO_CHECK_HIDDEN_CONDITION” en True.
2. Configurar el Formulario
Una vez habilitada la funcionalidad, es hora de configurar el formulario:
- Añadir todos los posibles campos: Incorpora al formulario todos los posibles campos que puedan ser solicitados en el cuestionario. Estos campos representan la información que se podrá requerir del usuario externo.
- Campo multivaluado “Campos a solicitar”: Añade un campo de tipo multivaluado llamado “Campos a solicitar”. Este campo debe tener en su lista desplegable los nombres de los campos que añadiste previamente al formulario. Es importante que uses la etiqueta visible en Etiqueta (nombre del campo) y el nombre interno del campo en Valor.
Recomendamos usar un diccionario para facilitar esta configuración. Así, la etiqueta sería el nombre del campo y el valor sería su nombre interno. Por ejemplo:
Nota: Recuerda que todos los campos que seleccionen deben estar configurados como públicos. Aquí tienes una guía para hacerlo: Cómo hacer que un campo aparezca en el enlace público para creación de documento.
3. Añadir código JavaScript para gestionar la selección de campos
En la configuración avanzada del formulario, debes incluir el siguiente código JavaScript en el campo JavaScript validation. Este script permite activar o desactivar dinámicamente los campos del formulario en función de lo que el usuario seleccione en el campo “Campos a solicitar” y los campos que desmarque el usuario. Reemplaza «metadato_campos_a_solicitar» con el nombre interno del campo multivaluado configurado previamente.
$(document).ready(function () {
const documentTypeName = document.querySelector("#store").getAttribute("data-file-doctype-name");
const metadataCamposASolicitar = 'metadato_campos_a_solicitar';
function todasLabels () {
const elementos = document.querySelectorAll('[id^="metadata_"]:not([id*="CamposSolicitar"])[id$="container"]');
const elementosConLabels = [];
elementos.forEach(elemento => {
const labels = elemento.querySelectorAll('label[id]');
if (labels.length > 0) {
elementosConLabels.push('#' + elemento.id + ' label');
}
});
return elementosConLabels;
}
function marcarLabels () {
const metadataLabels = todasLabels();
for (let j = 0; j < metadataLabels.length; j++) {
const label = metadataLabels[j];
$(label).css('cursor', 'pointer').on('click', function () {
const metadataName = obtenerNombreMetadata(label);
toggleMarcar(metadataName);
});
}
}
function obtenerLabelElemento (metadataName) {
return '#' + metadataName.replace('.', '_') + '-container label';
}
function obtenerNombreMetadata (labelName) {
return labelName.replace("#metadata_", "metadata.").replace("-container label", "");
}
function marcarSolicitar (nombreMetadata, metadatasActivos) {
const solicitados = metadatasActivos;
solicitados.push(nombreMetadata);
set_metadata_value_select(metadataCamposASolicitar, solicitados);
$(obtenerLabelElemento(nombreMetadata)).css('color', 'green');
}
function marcarNoSolicitar (nombreMetadata, metadatasActivos) {
let solicitados = metadatasActivos;
solicitados = solicitados.filter(element => element !== nombreMetadata);
set_metadata_value_select(metadataCamposASolicitar, solicitados);
$(obtenerLabelElemento(nombreMetadata)).css('color', '');
}
function toggleMarcar (metadataName) {
const metadatasActivos = get_metadata_value(metadataCamposASolicitar) || [];
if (metadatasActivos.indexOf(metadataName) !== -1) {
marcarNoSolicitar(metadataName, metadatasActivos);
} else {
marcarSolicitar(metadataName, metadatasActivos);
}
}
function colorearLabels () {
const metadatasActivos = get_metadata_value(metadataCamposASolicitar) || [];
for (let i = 0; i < metadatasActivos.length; i++) {
$(obtenerLabelElemento(metadatasActivos[i])).css('color', 'green');
}
}
colorearLabels();
marcarLabels();
});
4. Configurar hidden conditions
Para que los campos aparezcan o desaparezcan según las selecciones del usuario, debes configurar las hidden conditions de cada campo desde la instancia avanzada del formulario. Utiliza la siguiente condición:
((fil.doctype.name in ['nombre_formulario']) and not(metadata.type.name in metadatas['metadato_campos_a_solicitar']))
Reemplaza “metadato_campos_a_solicitar” por el nombre interno del campo multivaluado configurado en el paso 2 y “nombre_formulario” por el nombre interno del formulario que estás utilizando.
5. Configurar el formulario público
Finalmente, configura el formulario para que pueda ser accesible mediante un enlace público. Aquí te dejamos algunos enlaces útiles para facilitar este proceso:
- Subir documentos o rellenar formularios por usuarios no registrados
- Cómo compartir un formulario con información ya existente en un documento
- Cómo hacer que un documento público sea obligatoria la carga de un binario
Siguiendo estos pasos, podrás configurar un formulario dinámico en Atento que permitirá seleccionar qué información solicitar a usuarios externos a través de un enlace público. Esto te ayudará a optimizar la recolección de datos según tus necesidades específicas.