Directrices de diseño de aplicaciones

Diseñar Power Apps eficaces y fáciles de usar es esencial para crear soluciones empresariales impactantes. En esta guía se proporcionan procedimientos recomendados y recomendaciones para diseñar Power Apps, centrarse en controles modernos, diseño de formularios, uso de contenedores, optimización de la galería y creación de componentes reutilizables.

Controles modernos

Los controles modernos en las aplicaciones Canvas representan un avance significativo en el diseño y desarrollo de interfaces de usuario dentro del ecosistema de Microsoft. En función del sistema Fluent Design de Microsoft, estos controles están diseñados para ofrecer una experiencia de usuario rápida, orientada al rendimiento y accesible, a la vez que garantizan una integración sin problemas con las funcionalidades de creación de temas. La introducción de estos controles, que incluyen listas de pestañas, barras de progreso, botones de información, indicadores de progreso y más, subraya un cambio estratégico hacia la creación de aplicaciones más intuitivas, receptivas y visualmente atractivas. Mediante el uso de estos controles modernos, los desarrolladores pueden implementar fácilmente elementos sofisticados de la interfaz de usuario (UI) que son estéticamente agradables y funcionalmente enriquecidos, mejorando la satisfacción y el compromiso general del usuario.

El diseño inherente de estos controles, teniendo en cuenta la tematización, permite una apariencia unificada y consistente en todas las aplicaciones, lo que reduce significativamente el esfuerzo requerido para personalizar las aplicaciones. La capacidad de actualizar automáticamente los estilos de todos los controles según el tema establecido simplifica el proceso de diseño y garantiza que las aplicaciones permanezcan visualmente coherentes en todo momento. Este enfoque se alinea con las necesidades de las empresas modernas que buscan mantener la coherencia de la marca al tiempo que ofrece experiencias digitales de alta calidad. Los controles modernos también enfatizan la accesibilidad y el rendimiento, asegurando que las aplicaciones sean utilizables por una amplia gama de audiencias, incluidas aquellas con discapacidades, alineándose con los principios de diseño inclusivo. Como tal, los controles modernos en las aplicaciones de lienzo no son solo un conjunto de componentes de interfaz de usuario, sino un conjunto de herramientas transformadoras que permite a los desarrolladores crear aplicaciones más eficientes, fáciles de mantener, accesibles y cohesivas que satisfagan las necesidades cambiantes de las empresas y los usuarios por igual.

Diseño de formularios y directrices

En esta sección se proporcionan procedimientos recomendados para diseñar formularios en Power Apps, incluida la organización del formulario, la reutilización de formularios, los modos de formulario y la selección de ubicación del control.

Organizar el formulario

• Divida su formulario en secciones lógicas y agrupe juntos los campos relacionados.
• Trate de mantener su formulario en una sola pantalla. Si es extenso, considere dividirlo en varias pantallas, pasos o pestañas.
• Use un lenguaje claro y sencillo para las etiquetas de campo y evite términos o jerga desconocidos.
• Implemente reglas de validación para garantizar la precisión de los datos. Para los campos obligatorios, indique claramente su obligatoriedad. Valide direcciones de correo electrónico, números de teléfono y otros formatos según sea necesario.

Reutilizar formularios

• Utilice un formulario único para crear nuevos registros, editar registros existentes y mostrar registros en modo de solo visualización.
• Vuelva a usar el mismo formulario para reducir el tiempo de desarrollo y mantenimiento, a la vez que garantiza la coherencia.

Modos de formulario

Establezca el modo de formulario dinámicamente según las acciones del usuario. Por ejemplo:

• Al crear un nuevo registro, configure el formulario en modo "Nuevo".
• Al editar un registro existente, configure el formulario en modo "Editar".
• Al mostrar un registro, configure el formulario en modo "Ver".

Colocación de controles

• Coloque diferentes controles (como galería, formulario de visualización y formulario de edición) en pantallas separadas para que se puedan distinguir.
• Combine estos controles con fórmulas para crear una experiencia de usuario coherente.

Contenedores

A medida que crece la aplicación Canvas para abordar más escenarios empresariales, aumenta el número de controles y necesita organizar los controles en función de su propósito. Una manera to do esto es agrupar los controles. Sin embargo, no siempre se recomienda agrupar controles. El control de lienzo de la aplicación Container alberga un conjunto de controles y tiene sus propias propiedades.

Los contenedores funcionan como espacios vacíos donde puede insertar y organizar controles en relación con la esquina superior izquierda del contenedor. Puede anidar contenedores, lo que le permite crear diseños más complejos y administrar controles relacionados juntos.

Los contenedores son controles reales con sus propias propiedades como Width y BorderColor. Los contenedores afectan el diseño de la aplicación y ayudan a los usuarios que leen la pantalla a entender la estructura de la aplicación.

Si bien puede agregar cualquier control en un grupo, solo debe agregar controles relacionados lógicamente en un contenedor.

La organización de elementos en Power Apps mediante grupos permite a los usuarios aplicar propiedades compartidas a varios elementos. Sin embargo, realizar cambios de propiedad individuales dentro de un grupo puede requerir ajustes manuales. Los grupos no forman parte de la estructura lógica de una aplicación por motivos de accesibilidad porque los lectores de pantalla no pueden reconocerlos. La incapacidad de anidar grupos también dificulta la creación de diseños complejos.

Diseño y pautas de la galería.

El control Galería de Power Apps permite mostrar e interactuar con los datos. Tenga en cuenta los siguientes procedimientos recomendados al diseñar galerías para garantizar un rendimiento óptimo y la experiencia del usuario.

• Evite cambiar los elementos de la galería desde dentro: no modifique la Items propiedad de una galería dentro de los eventos de controles secundarios, como OnChange o OnSelect. Esta acción puede provocar un comportamiento inesperado, especialmente cuando se trata de controles que desencadenan eventos cuando cambian sus valores.

• Tenga cuidado con los controles activados por OnChange: tenga cuidado al usar controles como cuadro combinado, selector de fechas, control deslizante o conmutador en galerías. Estos controles pueden desencadenar el OnChange evento de forma inesperada, lo que puede provocar posibles problemas como bucles infinitos.

• Evaluar el impacto en el rendimiento en la aplicación de revisiones: tenga en cuenta el impacto en el rendimiento al aplicar revisiones o actualizar elementos en una galería, especialmente cuando se trabaja con muchos elementos. La implementación de parches puede ser lenta y la galería podría volver a cargar todos los elementos, lo que afecta al rendimiento.

• Manejar bucles infinitos con cuidado: si la modificación de los datos de la galería desencadena eventos que conducen a bucles infinitos, use controles modernos o controles que no se activen OnChange cuando sus datos cambien para romper el bucle.

• Evitar galerías anidadas: las galerías anidadas pueden provocar problemas de rendimiento y enlaces de datos complejos. Siempre que sea posible, evite anidar galerías. En su lugar, intente diseñar su estructura de datos y utilizar funciones de forma optimizada.

• Usar galerías de alto flexibles: las galerías de alto fijo pueden limitar la visibilidad del contenido, especialmente cuando se trabaja con datos dinámicos. Utilice galerías de altura flexible configurando la propiedad Height en Parent.Height o un valor dinámico basado en sus datos. Esta configuración garantiza que la galería ajuste su altura para dar cabida a distintas cantidades de datos.

  

• Optimizar la carga de datos: al optimizar la carga de datos en Power Apps, capture y muestre solo las columnas necesarias en una galería en lugar de recuperar todo el conjunto de datos.

  Este es un ejemplo de cómo puede lograr esta optimización. Supongamos que tiene una colección denominada ProductSales con varias columnas, pero desea mostrar solo las columnas "ProductName" y "QuantitySold" en una galería.

  // Collection named ProductSales with sample sales data
  
  ClearCollect(ProductSales, 
      Table(
          { ProductName: "Phone", UnitPrice: 499.99, QuantitySold: 100 },
          { ProductName: "Laptop", UnitPrice: 999.99, QuantitySold: 50 },
          { ProductName: "Tablet", UnitPrice: 299.99, QuantitySold: 75 }
      )
  )
  
  // Bind the gallery to display only the "ProductName" and "QuantitySold" columns
  
  Gallery1.Items = ShowColumns(ProductSales, ProductName, QuantitySold)
  

Obtenga más información sobre los procedimientos recomendados de la galería.

Crear componentes reutilizables con Power Apps Component Framework (PCF)

Power Platform permite crear componentes reutilizables a través del marco de componentes de Power Apps (PCF). Obtenga más información en Información general sobre el Marco de Componentes de Power Apps.

Considere la posibilidad de crear componentes de PCF en Power Apps para los escenarios siguientes:

• Elementos complejos de interfaz de usuario: Debe crear elementos o controles complejos de interfaz de usuario que no estén disponibles fácilmente en los controles estándar de Power Apps.

• Controles personalizados para requisitos específicos: la aplicación tiene requisitos específicos que no cumplen los controles predefinidos y debe crear controles personalizados adaptados a sus necesidades.

• Consistent user experience across apps: Desea mantener una experiencia de usuario coherente en varias aplicaciones de Power Apps o entornos encapsulando funcionalidades específicas dentro de un componente PCF.

• Reutilización entre aplicaciones: prevé la necesidad de reutilizar una parte específica de la funcionalidad o el elemento de interfaz de usuario en varias aplicaciones. La creación de un componente PCF permite compilar una vez y reutilizar.

• Inmplementación de la lógica avanzada: Debe implementar cálculos o lógicas empresariales avanzadas que están fuera de las funcionalidades de las fórmulas o funciones estándar en Power Apps.

• Experiencia de usuario mejorada: tiene como objetivo mejorar la experiencia general del usuario mediante la creación de componentes visualmente atractivos e interactivos que no son factibles con los controles predeterminados.

Siguiente paso