Controles de interfaz de usuario
Los controles son elementos de la UI que determinan cómo aparecen los datos, el texto, las imágenes y otra información en los formularios del usuario para la pantalla y la entrada del usuario. Cada tipo de control tiene un aspecto único y proporciona diferentes funciones para los usuarios. El sistema asigna un control predeterminado cuando define un campo nuevo. Por ejemplo, los clientes deben crear un perfil para suscribirse para un programa de recompensas. Debe definir un campo de fecha para que los clientes ingresen o seleccionen su fecha de nacimiento. El sistema asigna un control de Fecha y hora en el campo de fecha de nacimiento.
Los controles no están necesariamente asociados con los datos. Por ejemplo, una vez que los clientes han creado un perfil correctamente, pueden verlo y editarlo. Debe crear un control del botón que permita a los clientes editar su información de perfil; no hay datos asociados con el control del botón.
Validación de datos con controles
Los controles ofrecen el enfoque más común para la validación. Puede validar la entrada del usuario con controles aprovechando los tipos de control, campos requeridos y configuración editable.
Tipos de control
Usar el tipo de control correcto para un propósito específico garantiza que los usuarios ingresen valores válidos. La siguiente tabla muestra ejemplos de casos de uso para diferentes tipos de control.
| Caso de uso | Tipo de control | Cómo el control ayuda a la validación |
|---|---|---|
| Los usuarios deben ingresar una fecha que incluya el día, el mes y el año. | Fecha y hora | Seleccionar una fecha de un ícono de calendario garantiza que los usuarios ingresen una fecha en un formato válido. |
| Los usuarios deben seleccionar uno de tres tipos de préstamos posibles. El usuario debe ver todos los tipos en el formulario. | Radio button | Limita las opciones a un conjunto de valores válidos y permite a los usuarios seleccionar solo un valor. Puede usar radio buttons cuando solo hay una cantidad pequeña de opciones (por ejemplo, menos de cinco). |
| Los usuarios deben seleccionar uno de 10 tipos de sillas de oficina de una lista. No es necesario que las opciones se muestren en el formulario. | Lista desplegable | Limita los valores válidos a los que aparecen en la lista. Una lista desplegable presenta las opciones únicamente cuando los usuarios hacen clic en el control; esto ayuda a reducir el desorden en el formulario. |
| Los usuarios deben seleccionar el país en el que residen desde una lista. El usuario puede ingresar el texto en el control para ayudarse a encontrar el país correcto. | Autocompletar | Cuando los usuarios ingresan uno o más valores en el control, el control filtra las opciones disponibles. Esto ayuda a los usuarios a encontrar una opción en una lista si hay una gran cantidad de opciones posibles (por ejemplo, más de 20). |
| Los usuarios seleccionan una opción para adquirir un seguro de viaje adicional. | Checkbox | Los usuarios pueden seleccionar la checkbox o dejarla en blanco. Esta opción garantiza que la propiedad verdadero/falso sea verdadero (seleccionado) o falso (no seleccionado). |
Configuración editable
Puede utilizar la configuración editable en los controles para limitar los valores de entrada a formatos válidos. La configuración es específica para el tipo de control. Por ejemplo, puede especificar que los usuarios no puedan ingresar fechas como texto; los usuarios deben seleccionar una fecha del ícono de calendario. Es una práctica recomendada hacer que los usuarios especifiquen fechas usando un ícono de calendario, para garantizar que la fecha ingresada coincida con el formato esperado por la aplicación. También puede especificar el mínimo y el máximo de caracteres permitidos en un control de entrada de texto.
Campos requeridos
Configurar un control como campo requerido garantiza que el usuario ingrese un valor. Si no hay ningún valor, los usuarios reciben un error cuando intentan enviar un formulario. En el ejemplo del perfil del programa de recompensas, usted decide configurar el campo Fecha de nacimiento como campo requerido. Si los usuarios no ingresan una fecha en el campo, aparece un mensaje de error cuando intentan enviar el formulario. El mensaje de error no aparece si hay una fecha en el campo.
En el centro de la siguiente imagen, deslice la línea vertical para ver la vista de creación de perfil sin una fecha ingresada en el campo requerido y con una fecha ingresada en el campo requerido.
Nota: Asegúrese de que los usuarios completen correctamente los formularios en una aplicación ofreciendo instrucciones breves. Con etiquetas, texto de ayuda y marcadores de posición, puede definir qué tipo de entrada va en cada control, lo que reduce el tiempo requerido para completar el formulario. Para obtener más información sobre cómo editar un control, consulte Cómo agregar texto a los controles.
Compruebe sus conocimientos con la siguiente actividad.
This Topic is available in the following Module:
If you are having problems with your training, please review the Pega Academy Support FAQs.
¿Quiere ayudarnos a mejorar este contenido?