Corfix Form Builder: cómo utilizar el componente de menú desplegable

Este artículo resume los distintos ajustes disponibles para un «componente desplegable» en Corfix. Un componente desplegable (también conocido como «Seleccionar» o «Lista desplegable») permite a los usuarios seleccionar una única opción de una lista predefinida.

Dónde encontrarlo

En el generador de formularios de Corfix, haga clic en un componente desplegable para acceder al panel de configuración. Verá cuatro pestañas:

Visualización
Datos
Validación
Condicional

1. Pestaña «Visualización»

La pestaña «Visualización» controla cómo se muestra el componente «Menú desplegable» al usuario.

Etiqueta:
- Este es el título principal de su lista desplegable que verán los usuarios. Es un campo obligatorio.
- Ejemplo: «Seleccione su función», «Elija un departamento», «Color preferido».
Posición de la etiqueta:
- Determina dónde se muestra la etiqueta principal en relación con el menú desplegable (p. ej., Arriba, Izquierda, Derecha, Abajo).
- Valor predeterminado: Arriba.
Tipo de widget:
- Especifica el elemento HTML subyacente o el método de representación del menú desplegable. «HTML 5» es un elemento web estándar.
Texto de lugar:
- Texto que aparece dentro del campo desplegable antes de que el usuario realice una selección. A menudo sirve como instrucción.
- Ejemplo: «Seleccione una opción...» o «Elija de la lista».
Descripción:
- Proporciona texto explicativo adicional sobre el componente, que suele mostrarse debajo de la etiqueta principal.
- Ejemplo: «Seleccione la categoría más relevante para su consulta».
Texto de ayuda:
- Texto que aparece cuando el usuario pasa el ratón por encima del componente. Resulta útil para ofrecer ayuda rápida o contexto.
Clase CSS personalizada:
- Permite a los usuarios avanzados aplicar estilos personalizados al componente mediante clases CSS.
Ocultar etiqueta:
- Si se marca esta opción, no se mostrará la etiqueta principal del componente.
Edición modal:
- (Los detalles no se ven completamente en la captura de pantalla, pero suele referirse a la edición en una ventana modal emergente).
Incluir en informes:
- Si se marca, los datos de este campo (el valor de la opción seleccionada) se incluirán en los informes.

2. Pestaña «Datos»

La pestaña «Datos» es donde se define la lista de opciones disponibles para el usuario en este menú desplegable.

Tipo de fuente de datos:
- Determina de dónde procede la lista de opciones. «Valores» significa que los introducirá manualmente. Otras opciones pueden incluir la obtención de datos a través de una API u otro componente.
Valor predeterminado:
- La opción que aparece preseleccionada al cargarse el formulario. Los usuarios pueden modificar esta selección.
Valores de la fuente de datos:
- Se trata de una tabla en la que se definen cada una de las opciones de la lista desplegable.
  - Indicador: (La funcionalidad no queda clara a simple vista en la captura de pantalla; probablemente se trate de un uso interno o de funciones avanzadas, como iconos).
  - Etiqueta: El texto visible que aparece en la lista desplegable para cada opción (por ejemplo, «Opción A», «Rojo», «Opción B»).
  - Valor: El valor real de los datos que se guardará cuando se seleccione esta opción concreta. Este es un campo obligatorio. A menudo es recomendable que el valor sea una versión simplificada y legible por máquina de la etiqueta (p. ej., etiqueta «Opción A» → valor «optionA»).
  - Añadir otra: Haga clic en este botón para añadir más opciones a su lista.
Habilitar búsqueda estática:
- Si se marca, permite a los usuarios escribir en el campo desplegable para buscar y filtrar rápidamente las opciones disponibles, lo cual resulta especialmente útil en listas largas.

3. Pestaña «Validación»

La pestaña «Validación» define las reglas para garantizar que la selección del usuario cumpla con requisitos específicos.

Obligatorio:
- Si se marca esta casilla, el usuario deberá seleccionar una opción de la lista antes de enviar el formulario.

4. Pestaña «Condicional»

La pestaña «Condicional» le permite configurar reglas que determinan cuándo debe mostrarse u ocultarse todo este componente desplegable en función de los valores de otros componentes del formulario.

Simple:
- Normalmente se trata de un botón de alternancia o un menú desplegable para elegir entre lógica condicional simple o avanzada.
Este componente debe «Mostrar»:
- Elija si el componente debe «Mostrarse» u «Ocultarse» (opciones implícitas) en función de la condición.
Cuando el componente del formulario:
- Seleccione otro componente de su formulario cuyo valor active la condición.
Tenga el valor:
- Especifique el valor exacto que debe tener el componente del formulario seleccionado para que se cumpla la condición.
Ejemplo: Podría configurar una regla para que el menú desplegable «Software preferido» solo se muestre cuando la casilla «¿Es usted desarrollador?» esté marcada.

Panel de vista previa

El panel de vista previa, situado a la derecha del cuadro de diálogo, le muestra cómo aparecerá visualmente el «menú desplegable» en su formulario. A medida que defina opciones en la pestaña «Datos» o ajuste la configuración de visualización, como la «Etiqueta», verá cómo estos cambios se reflejan de forma inmediata.

Acciones en la parte inferior del cuadro de diálogo:

Guardar: guarda todos los cambios realizados en la configuración del componente de menú desplegable.
Cancelar: descarta cualquier cambio no guardado y cierra el cuadro de diálogo.
Eliminar: Elimina el componente de menú desplegable del formulario.

Prácticas recomendadas para el componente de menú desplegable:

Etiqueta principal clara: utilice una etiqueta concisa que indique a los usuarios qué están seleccionando (por ejemplo, «Seleccionar función», «Nivel de prioridad»).
Opciones significativas: Asegúrese de que cada opción del menú desplegable tenga una «Etiqueta» clara para el usuario y un «Valor» útil para el almacenamiento de datos.
Utilícelo para una única elección: este componente resulta más adecuado cuando los usuarios solo pueden elegir una opción de una lista. Para elecciones múltiples, utilice «Casillas de selección».
Haga que las selecciones esenciales sean obligatorias: si una opción del menú desplegable es obligatoria, marque la casilla «Obligatorio» en la pestaña «Validación».
Habilite la búsqueda para listas largas: si su menú desplegable tiene muchas opciones (por ejemplo, más de 10-15), active la «Búsqueda estática» para ayudar a los usuarios a encontrar su opción más rápidamente.