Crear una aplicación de lienzo

Power Apps es una plataforma de alta productividad para aplicaciones empresariales. Puede crear aplicaciones personalizadas con píxeles perfectos con el poder de un lienzo en blanco en Power Apps Studio. Para compartir con los usuarios, renderice la aplicación en el navegador o incrústela en varios contenedores como Teams y sitios de SharePoint.

Las experiencias centrales del usuario final para las soluciones de plantilla de compras de SAP se construyen utilizando aplicaciones de lienzo y se pueden ampliar fácilmente para respaldar los requisitos de su negocio local. Para empezar, siga los patrones y las mejores prácticas de este artículo.

Siga las mejores prácticas y estándares

Todas las aplicaciones se desarrollan utilizando las mejores prácticas y estándares publicados. Le recomendamos que adopte las mejores prácticas y estándares iguales o similares a medida que amplía o crea nuevas aplicaciones.

Estándar	Comments	Más información
Estado de la característica	Funciones que están activadas o desactivadas de forma predeterminada. Incluye un subconjunto de funciones de vista previa, excepto las funciones experimentales.	Comprenda las funciones experimentales, versión preliminar y retiradas en las aplicaciones de lienzo
Capacidad de respuesta	Se adapta a un solo tipo de dispositivo, como una tableta o un dispositivo móvil. Permite que la aplicación se adapte a varios tamaños estándar de pantalla y contenedor, incluida la integración de las aplicaciones dentro Microsoft Teams. Utiliza ampliamente los controles de contenedores sensibles al diseño automático.	Creación de aplicaciones de lienzo responsivas
Estándares de nomenclatura y codificación	Controles, variables, colecciones y Dataverse se siguen los estándares de nomenclatura para promover la facilidad de descubrimiento y mantenimiento.	Power Apps Estándares y pautas de codificación de la aplicación Canvas
Accesibilidad	Propiedades compatibles con la accesibilidad. Por ejemplo, Etiquetas accesibles, Roles, En vivo, Grosor del borde de enfoque, Contraste de color y Orden de tabulación. Estas propiedades evitan patrones de diseño conocidos que no son compatibles con los requisitos de accesibilidad.	Crear aplicaciones de lienzo accesibles y Limitaciones de accesibilidad en aplicaciones de lienzo
Rendimiento	Se siguen las mejores prácticas evitando las limitaciones de rendimiento conocidas.	Consejos y mejores prácticas para mejorar el rendimiento de las aplicaciones de lienzo

Temas de color de aplicaciones globales

Todas las aplicaciones siguen un tema personalizado y se pueden cambiar de acuerdo con el esquema de color preferido de su organización. Una variable global se establece en las propiedades App.OnStart en todas las aplicaciones. Esta variable la utilizan la mayoría de las propiedades relacionadas con el color en todos los controles de la aplicación. Cambiar la variable de tema global de color en un lugar tendrá un efecto inmediato en toda la aplicación después de ejecutar el evento App.OnStart.

Importante

Aunque es posible cambiar una variedad de propiedades de la paleta de colores, se recomienda cambiar solo la propiedad del color principal en la variable de tema global.

    Set(
        varThemeColors,
        {
            background: ColorValue("#FAF9F8"),
            backgroundFill: ColorValue("#FFFFFF"),
            backgroundFillDisabled: ColorValue("#F3F2F1"),
            text: ColorValue("#201F1E"),
            altText: ColorValue("#FFFFFF"),
            disabledText: ColorValue("#A19F9D"),
            primary: ColorValue("#0078D4"),
            secondary: ColorValue("#EFF6FC"),
            tertiary: ColorValue("#005A9E"),
            primaryGray: ColorValue("#8A8886"),
            secondaryGray: ColorValue ("#C8C6C4"),
            tertiaryGray: ColorValue("#605E5C"),
            requiredRed: ColorValue("#A80000"),
            lookupBlue: ColorValue("#0078D4")
        }
    )

Agregar el logotipo corporativo

Agregue su logotipo corporativo a las aplicaciones cargando primero el archivo de imagen de su logotipo corporativo en la aplicación y luego agregándolo al componente ScreenHeader.

Más información: Usar archivos multimedia en aplicaciones de lienzo

Localización y soporte global de aplicaciones

Todas las aplicaciones de lienzo por defecto tienen soporte para el idioma inglés. Sin embargo, todas las aplicaciones están diseñadas para estar listas para la localización y se pueden administrar para admitir más idiomas. Es posible que las propiedades de ancho de control deban modificarse directamente según los idiomas elegidos para implementar.

Patrón de localización de cadenas

1. En la propiedad OnVisible de la primera pantalla durante el inicio de la aplicación, la aplicación lee la configuración de idioma del navegador del usuario y determina el valor de elección del código de idioma ISO.

      Set(
        varISOUserLanguageCode,
        Switch(
            Left(
                Language(),
                2
            ),
            "ar",
            'ISO Language Code'.ar,
            "de",
            'ISO Language Code'.de,
            "en",
            'ISO Language Code'.en,
            "es",
            'ISO Language Code'.es,
            "fr",
            'ISO Language Code'.fr,
            "he",
            'ISO Language Code'.he,
            "it",
            'ISO Language Code'.it,
            "ja",
            'ISO Language Code'.ja,
            "pt",
            'ISO Language Code'.pt,
            "zh",
            'ISO Language Code'.zh,
            'ISO Language Code'.en
        )
    )

Nota

Las propiedades de etiqueta y control de entrada intentan anticipar el ancho del valor del texto localizado, pero es posible que no siempre tengan éxito dadas las complejidades de ese cálculo. Por lo tanto, recomendamos siempre probar y realizar modificaciones menores en las aplicaciones una vez que se hayan realizado las cadenas y los cambios localizados.

Propina

Se pueden agregar y admitir idiomas adicionales agregando más valores al componente de elección Código de idioma ISO que se encuentra en la solución SAP Base.

La aplicación consulta la entidad Localización de SAP de Dataverse para las cadenas que se han localizado según el idioma de inicio de sesión del usuario y las almacena en caché localmente en una colección.

        ClearCollect(
            colUserLocalizedStrings,
            Filter(
                'SAP Localizations',
                Language = varISOUserLanguageCode,
                'SAP Localizations (Views)'.'Active SAP Localizations'
            )
        )

Todas las propiedades relacionadas con el texto dentro de varios controles como Text, HintText, Accessible Label, InputTextPlaceholder, NoSelectionText y ToolTips tienen fórmulas que buscan primero una cadena localizada equivalente. Si no encuentra el equivalente, el idioma predeterminado es el inglés, que se establece en la propiedad Text dentro del bloque With.

  With(
      {Text: "Vendor name"},
      If(
          IsBlank(
              LookUp(
                  colUserLocalizedStrings,
                  'English Value' = Text
              ).'Localized Value'
          ),
          Text,
          LookUp(
              colUserLocalizedStrings,
              'English Value' = Text
          ).'Localized Value'
      )
  )

Para los controles de cuadro combinado que filtran valores de la tabla Lista de valores de SAP , el usuario asigna el código de idioma ISO de la configuración de su navegador siempre se aplica a los criterios de filtro, y el idioma predeterminado es inglés si no se administra una lista de valores para su idioma.

Sort(
    Filter(
        'SAP List of Values',
        Status = 'Status (SAP List of Values)'.Active,
        Domain = 'Domain (SAP List of Values)'.Country,
        Language = varISOUserLanguageCode
    ),
    'Display Value'
)

Configuración regional del explorador

Todos los campos de número, fecha y hora en las aplicaciones de lienzo respetan la configuración regional del navegador del usuario de forma predeterminada. Por ejemplo, una fecha que se muestra como 3/23/2023 para un usuario que usa Estados Unidos como configuración regional se mostrará como 23.03.2023 para un usuario que utilice la configuración regional de Alemania.

Más información: Integrar la compatibilidad global en aplicaciones de lienzo

Componentes

Los componentes son una excelente manera de simplificar el proceso de desarrollo y mantenimiento de aplicaciones y ayudan a mejorar el rendimiento.

Para las áreas en las que se necesita una experiencia de usuario común, ya sea internamente o entre aplicaciones, se configuran los componentes. Dadas las limitaciones en las bibliotecas de componentes para admitir cosas como el acceso al alcance de la aplicación y los flujos de nube integrados, los componentes locales se pueden usar en todas las aplicaciones que luego se pueden importar a otras aplicaciones.

Por ejemplo, el componente VendorSearch se usa en todas las aplicaciones que admiten procesos de compra a pago y se creó principalmente dentro de la aplicación SAP Vendor Management y se importó para su uso. dentro de las otras aplicaciones Procure-to-Pay.

Advertencia

Una consecuencia negativa de usar componentes de aplicaciones locales en lugar de bibliotecas de componentes es que, si se determina un cambio, esos cambios deben realizarse en todas las aplicaciones que ya han importado ese componente.

Componentes comunes utilizados en todas las aplicaciones:

Componente	Descripción
ScreenHeader	Encabezado común en todas las pantallas
LeftNavigation	Navegación principal que permite un acceso rápido a otras aplicaciones impulsadas por el origen de elemento de menú Dataverse
CommandBar	Lista de controles comunes para objetos crear, cambiar, guardar, cancelar, buscar, búsqueda reciente o búsqueda avanzada
ScreenTabs	Grupos de componentes lógicos dispuestos juntos en pestañas para facilitar la navegación
NoItemsDisplay	Los elementos se muestran en cuadrículas cuando no hay registros presentes
ObjectNameSearch	Los componentes comunes de búsqueda de objetos de SAP se incluyen en la aplicación adecuada cuando se usan y se pueden importar a otras aplicaciones si es necesario. Los ejemplos incluyen VendorSearch, GLAccountSearch, MaterialSearch y RequisitionSearch

Más información: Descripción general del componente de lienzo

Campos SAP adicionales

Cada implementación de SAP es diferente y se espera que agregue sus propios campos que respalden sus procesos comerciales. Por lo tanto, se implementaron consideraciones de diseño y amplio espacio de pantalla para permitirle agregar fácilmente los campos que necesita.

Contenedores de control comunes

La mayoría de los controles están contenidos dentro de un contenedor que consiste en una etiqueta y un control de entrada. Por ejemplo, el campo para capturar el nombre del proveedor dentro de la aplicación SAP Vendor Management consta de un control de entrada de texto y etiqueta, como se ve en la siguiente captura de pantalla. Para agregar un nuevo campo, copie un control de contenedor existente y péguelo en el componente receptivo adecuado, actualizando los nombres, el texto y, en última instancia, los campos asignados.

Nota

Hay contenedores similares para otros tipos de controles de entrada, como cuadros combinados, selectores de fecha y botones.

Contenedores receptivos

Las aplicaciones están diseñadas para responder al tipo de dispositivo de tableta/escritorio mediante controles de contenedores verticales y horizontales, como se muestra en la siguiente captura de pantalla. Estos contenedores están configurados para tener puntos de partida para propiedades como altura, ancho, LayoutMinHeight, LayoutMinWidth y Wrap. A medida que agregue más campos a estos contenedores, asegúrese de que estas propiedades también se actualicen para continuar manejando la capacidad de respuesta de manera adecuada.

Más información: Contenedor de diseño automático

Conectarse a otros datos

El poder de las aplicaciones de lienzo es que pueden conectarse fácilmente a uno de varios cientos de otros sistemas y aplicaciones de forma segura utilizando su biblioteca de conectores nativos.

Por ejemplo, si su proceso de orden de compra de SAP Procurement requiere datos de oportunidades de preventa ascendentes que existen en un CRM para completar el proceso, puede usar los conectores de Salesforce o Dataverse para integrarse con Dynamics 365 para que pueda agregar fácilmente esos datos a la aplicación Orden de compra de SAP con solo seleccionar un botón.

Además, si tiene un sistema propietario interno o un sistema sin conector nativo, puede trabajar con su equipo de TI para crear un conector personalizado que permita Power Apps para interactuar fácilmente con ese sistema a través de una API compatible.

Más información:

• Lista de conectores
• Descripción general de los conectores personalizados

Gestión de errores de aplicación

Todas las llamadas de flujo incrustadas evalúan un campo de estado de respuesta enviado por los flujos de forma predeterminada y se manejan generando un mensaje a través de la función Notificar. Para obtener más información, consulte Control de errores.

If(
    !IsBlank(FirstError.Message),
    Patch(
        'SAP Integration Errors',
        Defaults('SAP Integration Errors'),
        {
            Action: FirstError.Source,
            'Additional Information': App.ActiveScreen.Name,
            'Error Message': FirstError.Message,
            Name: "SAP Vendor Management",
            'Source Type': 'Source Type (SAP Integration Errors)'.'Power App',
            'Workflow Status': 'Workflow Status (SAP Integration Errors)'.Failed
        }
    );
Trace(FirstError.Message);
Error(FirstError);  
)

Todas las excepciones inesperadas generadas por la aplicación se manejan en la propiedad App.OnError donde un registro de error de plantilla de solución SAP se crea antes de que el error se vuelva a generar y rastrear. Los administradores pueden ver los detalles del error a medida que se activan los activadores para recibir alertas sobre las excepciones no controladas de la aplicación, como se ve en el documento Supervisar errores.

Más información: Propiedad OnError

Contenido relacionado

• ¿Qué son las aplicaciones de lienzo?
• Entender Power Apps Studio
• Crear una aplicación de lienzo desde una solución
• Creación de una interfaz de usuario reutilizable con componentes de aplicaciones de lienzo y de marco de componentes Power Apps
• Administrar Microsoft Power Platform
• Aplicaciones de Canvas para desarrolladores empresariales, socios e ISV

Pasos siguientes

Amplíe las aplicaciones basadas en modelos y Dataverse

Consulte también

Comience a utilizar la plantilla de SAP Procurement