Compartir a través de


Directrices de diseño de aplicaciones

Controles modernos

Los controles modernos en las aplicaciones de lienzo representan un avance significativo en el desarrollo y diseño de interfaces de usuario dentro del ecosistema de Microsoft. Basados ​​en el sistema Fluent Design de Microsoft, estos controles están diseñados para ofrecer una experiencia de usuario rápida, accesible y orientada al rendimiento, al mismo tiempo que garantizan una integración perfecta con las capacidades 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. Al utilizar estos controles modernos, los desarrolladores pueden implementar fácilmente elementos sofisticados de la interfaz de usuario que son estéticamente agradables y funcionalmente ricos, mejorando la participación y satisfacción 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. Esto se alinea perfectamente con las necesidades de las empresas modernas que buscan mantener la coherencia de la marca y al mismo tiempo ofrecer 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.

Importante

Si bien un subconjunto de los controles modernos en las aplicaciones de lienzo está disponible de forma generalizada (GA), el conjunto de funciones más amplio permanece en vista previa. Le animamos a explorar y proporcionar comentarios sobre estos controles de vista previa. Sin embargo, es importante tener en cuenta que sus características y funcionalidades pueden perfeccionarse en función de los comentarios y pruebas antes de que alcancen la disponibilidad general.

Diseño de formularios y directrices

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.
  • Utilice un lenguaje claro y sencillo para las etiquetas de los campos, evitando 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.
  • Reutilizar el mismo formulario reduce el tiempo de desarrollo y mantenimiento al tiempo 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 la aplicación de lienzo crece en tamaño para abordar más escenarios comerciales, la cantidad de controles continúa creciendo y es necesario organizar los controles según la función que realizan. Una forma sencilla de hacerlo es seleccionar los controles juntos y agruparlos en un grupo. Sin embargo, no siempre se recomienda agrupar controles. El control Container de la aplicación de lienzo puede contener 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. Tiene la flexibilidad de anidar contenedores, lo que permite la creación de diseños más complejos y brinda libertad de diseño.

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.

Organizar elementos en Power Apps usando grupos permite a los usuarios aplicar propiedades compartidas a múltiples elementos. Sin embargo, realizar cambios de propiedades individuales dentro de un grupo puede requerir ajustes manuales. Además, los grupos no tienen presencia en la estructura lógica de una aplicación por motivos de accesibilidad, ya que los lectores de pantalla no pueden reconocerlos. Además, la imposibilidad de anidar grupos dificulta la creación de diseños más complejos.

Evite modificar la propiedad Items de una galería dentro de eventos de controles secundarios como OnChange o OnSelect. Esto puede provocar un comportamiento inesperado, especialmente cuando se trata de ciertos controles que desencadenan eventos cuando cambian sus valores.

Tenga cuidado con los controles activados por OnChange

Tenga cuidado al utilizar controles como cuadro combinado, selector de fecha, control deslizante o de alternancia en galerías. Estos controles pueden desencadenar el evento OnChange inesperadamente, lo que genera problemas potenciales como bucles infinitos.

Impacto en el rendimiento al aplicar parches

Tenga en cuenta el impacto en el rendimiento al aplicar parches o actualizar elementos en una galería, especialmente cuando se trata de una gran cantidad de elementos. La aplicación de parches puede ser lenta y la galería puede recargar todos los elementos, lo que afecta el rendimiento.

Maneja bucles infinitos con cuidado.**

Si la modificación de los datos de la galería desencadena eventos que conducen a bucles infinitos, considere usar controles modernos o controles que no se disparen OnChange cuando sus datos cambian para romper el bucle.

Evitar galerías anidadas

Las galerías anidadas pueden provocar problemas de rendimiento y vinculación de datos compleja.

Siempre que sea posible, evite anidar galerías. En su lugar, intente diseñar su estructura de datos y utilizar funciones de forma optimizada.

Utilice galerías de altura flexible

Las galerías de altura fija pueden dar lugar a una visibilidad limitada del contenido, especialmente cuando se trata de 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. Esto garantiza que la galería ajuste su altura para adaptarse a diferentes cantidades de datos.

Captura de pantalla de Power Apps Studio con la galería de altura flexible en blanco resaltada

Optimizar la carga de datos

Al optimizar la carga de datos en Power Apps, es posible que desee recuperar y mostrar solo las columnas necesarias en una galería en lugar de recuperar todo el conjunto de datos.

A continuación se muestra un ejemplo de cómo puede lograr esto: suponiendo que tiene una colección EmployeeData con varias columnas y desea mostrar solo las columnas "Nombre" y "Departamento" 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 las mejores prácticas de la Galería.

Construyendo componentes reutilizables

Cuándo crear componentes de código personalizados utilizando Power Apps Component Framework (PCF)

Power Platform permite la creación de componentes reutilizables a través de Power Apps Component Framework (PCF). Consulte más detalles aquí.

A continuación se muestran escenarios en los que podría considerar la creación de componentes PCF en Power Apps:

Elementos complejos de la interfaz de usuario

Cuando necesita crear controles o elementos de interfaz de usuario complejos que no están disponibles en los controles estándar Power Apps .

Controles personalizados para requisitos específicos

Cuando su aplicación tiene requisitos específicos que no se cumplen con los controles listos para usar y necesita crear controles personalizados adaptados a sus necesidades.

Experiencia de usuario consistente en todas las aplicaciones

Cuando desee mantener una experiencia de usuario consistente en múltiples Power Apps o entornos encapsulando funcionalidades específicas dentro de un componente PCF.

Reutilizabilidad entre aplicaciones

Cuando anticipa la necesidad de reutilizar una funcionalidad específica o un elemento de interfaz de usuario en varias aplicaciones, la creación de un componente PCF le permite crearlo una vez y reutilizarlo.

Implementar lógica avanzada

Cuando necesite implementar lógica de negocios avanzada o cálculos que están más allá de las capacidades de las fórmulas o funciones estándar de Power Apps.

Experiencia de usuario mejorada

Cuando su objetivo es mejorar la experiencia general del usuario mediante la creación de componentes interactivos y visualmente atractivos que no se pueden lograr con los controles predeterminados.

Siguiente paso