Power Apps Standards: Diseño de formularios y guía UX

Un buen formulario es como un asistente amable que guía al usuario, le ayuda a no cometer errores y le avisa si algo va mal. Aquí te explico los trucos para conseguirlo.

1. Ponle «Guardarraíles» a tus Campos de Texto

Cuando un campo solo debe contener números (como un año o una cantidad), no dejes que el usuario pueda escribir letras.

• Ponlo en modo numérico: En las propiedades del campo de texto, cambia la propiedad Format a Number. Esto hará que en el móvil solo aparezca el teclado numérico y en el ordenador no se puedan escribir letras. Es la forma más fácil de evitar errores.
• Limita la longitud: Ajusta la propiedad MaxLength para que coincida con el límite de caracteres del campo. Puedes poner un número fijo o, mejor aún, preguntarle a tu origen de datos cuál es el límite para ese campo.

Fragmento de código

// En la propiedad MaxLength de un campo de texto para el nombre del proyecto
// Le preguntas a tu origen de datos "Projects" cuál es el largo máximo para el campo "Project Name"
DataSourceInfo(Projects, DataSourceInfo.MaxLength, "Project Name")

2. Revisa los Datos Antes de Enviar ✅

Antes de que el usuario pulse «Enviar», asegúrate de que el formulario está bien rellenado. Esto se llama validación de datos. Comprueba cosas como:

• Que los campos obligatorios no estén vacíos.
• Que los datos tengan el formato correcto (emails con «@», teléfonos con el número de dígitos adecuado, etc.).
• Que los números estén dentro de un rango permitido (ej: una nota del 1 al 10).
• Que los campos de confirmación coincidan (ej: al escribir una nueva contraseña).

Cuando algo está mal, tienes que avisar al usuario. Puedes hacerlo de dos maneras:

1. Después de enviar: El usuario pulsa «Enviar» y solo entonces la app revisa todo y le dice lo que está mal.
2. Antes de enviar (en tiempo real): A medida que el usuario escribe, la app va validando cada campo. Si un campo está correcto, le pones un ✔️ al lado. Es la opción más moderna y amigable.

Para mostrar los errores, usa una o varias de estas estrategias:

• Muestra una lista en la parte superior del formulario con todos los errores.
• Resalta en rojo el borde de los campos que están mal.
• Muestra un mensaje de error justo al lado del campo incorrecto.

¡Error común a evitar! No desactives el botón de «Enviar» sin más. Si lo haces, el usuario no sabrá por qué no puede continuar. Es mejor dejarlo activo y, si lo pulsa, mostrarle los errores que debe corregir.

3. Ten un Plan B para los Errores 🆘

Nunca asumas que un formulario se ha enviado correctamente solo porque el usuario le dio a «Enviar». Pueden pasar cosas: se cae la conexión a internet, la base de datos da un error, etc. A esto se le llama manejo de errores.

• Si usas un control de Formulario: Aprovecha las propiedades OnSuccess (qué hacer si todo va bien) y OnFailure (qué hacer si algo falla).
• Si usas la función Patch: Envuelve tu función Patch dentro de una función IfError. Así, si Patch da un error, puedes capturarlo y actuar en consecuencia.

Regla de oro: Si ocurre un error, muéstrale un mensaje claro al usuario («No se pudo guardar el registro por un problema de conexión. Por favor, inténtalo de nuevo.») y no le saques de la pantalla hasta que el problema se solucione.

4. ¡Evita que se Pierda el Trabajo! 💾

A todos nos ha pasado: estás rellenando un formulario largo, le das sin querer al botón de «Atrás» y pierdes todo tu trabajo. ¡Es frustrante!

Para evitarlo, si el usuario ha modificado algo en el formulario e intenta salir, muéstrale un menú emergente de confirmación. Pregúntale algo como: «Tienes cambios sin guardar. ¿Seguro que quieres salir?», con los botones «Aceptar» y «Cancelar».

5. Usa un Formulario «Camaleón» para Todo 🦎

En lugar de crear una pantalla para «Crear Registro», otra para «Editar Registro» y una tercera para «Ver Registro», usa un único formulario para las tres cosas.

Esto te ahorra muchísimo tiempo de desarrollo y mantenimiento, y te aseguras de que el diseño sea siempre consistente. El formulario es como un actor versátil que puede interpretar tres papeles distintos.

• Si usas un control de Formulario: Es muy fácil. Simplemente usa las funciones NewForm, EditForm y ViewForm para cambiar el «modo» del formulario.
• Si usas la función Patch: Es un poco más manual. Tienes que crear código para cambiar la propiedad DisplayMode de cada control individualmente (de editable a solo vista).