Introducción al uso de React en un componente de Power Apps
A medida que construye componentes de código más complejos, Power Apps Component Framework proporciona funciones integradas que puede utilizar como parte de su lógica. Al utilizar estas capacidades, puede obtener información sobre el cliente que aloja su componente, el dispositivo que ejecuta el componente y otros servicios de tipo utilidad, como el formateo. Para componentes que desea que interactúen con la tabla de datos de Dataverse, puede utilizar la función WebAPI para interactuar con los datos.
La elaboración manual de HTML es común para componentes simples, pero a medida que sus necesidades se vuelven más complejas, puede resultar útil utilizar una biblioteca de marco de interfaz de usuario. Hay muchas opciones de marcos de interfaz de usuario de JavaScript, pero React es una de las bibliotecas más comunes utilizadas con componentes de código de Power Apps.
En el resto de este mulo, veremos con más detalle estos temas. Usaremos varios ejemplos prácticos en los que puede seguir y construir sus componentes utilizando algunas de estas capacidades más avanzadas del marco.
Usar el contexto de componente
El objeto de contexto contiene valores configurados por el personalizador asignados a nombres de propiedades definidos en las funciones de manifiesto y utilidad. Puede usarlo en la lógica de su componente para tener acceso a la mayoría de las capacidades integradas que usaremos más adelante en este módulo en los componentes que cree.
El parámetro de contexto está disponible para los componentes en los métodos init y updateView. Es común que en el método init complete una variable de nivel de clase para permitir el acceso al contexto fácilmente en otros métodos de su componente. El siguiente es un ejemplo de cómo guardar el contexto para su uso posterior en el método init:
export class ChoicesPicker implements ComponentFramework.StandardControl<IInputs, IOutputs> {
private _context: ComponentFramework.Context<IInputs>;
public init(
context: ComponentFramework.Context<IInputs>,
notifyOutputChanged: () => void,
state: ComponentFramework.Dictionary,
container: HTMLDivElement,
): void {
this._context = context;
/* other logic goes here */
}
}
El componente objeto de contexto puede cubrir una gran cantidad de información sobre el entorno en el que se ejecuta su componente. A continuación se muestra una descripción general de las propiedades clave disponibles:
client: esta propiedad le proporciona información sobre el cliente (web, Outlook o móvil), el factor de forma (escritorio, tableta o teléfono), si está desconectado y si la red está disponible.
mode: esta propiedad proporciona información sobre el estado actual del componente de código. Por ejemplo, ¿está visible el componente, está deshabilitado y cuál es el tamaño asignado actualmente?
userSettings: esta propiedad proporciona información sobre el usuario actual, como su ID de idioma, ID de usuario y nombre. Para aplicaciones basadas en modelos, la propiedad securityRoles puede resultar útil para conocer los roles del usuario actual.
El objeto de contexto también proporciona acceso a varios servicios integrados útiles. Los siguientes son los más comunes:
dispositivo: esta propiedad proporciona acceso a métodos para utilizar las capacidades nativas del dispositivo. Con estos servicios, puede capturar audio, video e imágenes, obtener valores de códigos de barras, identificar la geolocalización del dispositivo y seleccionar archivos.
factory: actualmente solo ofrece métodos para trabajar con el servicio emergente, pero podría admitir otros servicios en el futuro.
formatting: proporciona métodos para ayudarle a dar formato a los datos de moneda a hora. Estos métodos pueden ayudarle a mantener el formato coherente con la configuración del usuario de la aplicación de alojamiento.
navigation: proporciona métodos relacionados con la navegación, como formularios abiertos, URL abiertas, cuadros de diálogo (alerta, confirmación, error) y más.
resources: proporciona acceso a los métodos para obtener toda la información sobre los archivos de recursos definidos en el manifiesto. Estos métodos son esenciales para ayudar a localizar todo el contenido de su componente.
utils: proporciona acceso a los metadatos de la tabla y también le permite verificar el acceso del usuario a tablas específicas. El método lookupObjects permite a los componentes obtener acceso al cuadro de diálogo de búsqueda estándar, lo que permite a los usuarios elegir una o más filas.
webAPI: proporciona acceso básico para crear, leer, actualizar y eliminar datos de la tabla de Dataverse.
A continuación se muestra un ejemplo de utilización de las capacidades del dispositivo pickFile:
private onUploadButtonClick(event: Event): void {
this._context.device.pickFile().then(this.processFile.bind(this), this.showError.bind(this));
}
Es importante tener en cuenta que algunos de estos servicios requieren habilitarlos en la sección de uso de funciones del manifiesto para que funcionen. Es posible que algunos también solo estén disponibles en tipos específicos de aplicaciones de hosting. Por ejemplo, webAPI solo está disponible en aplicaciones basadas en modelos y Power Pages y no está disponible para aplicaciones de lienzo. Consulte la página de referencia de servicios individuales para obtener más detalles.
Usar React
Hay muchos frameworks de interfaz de usuario entre los que puede elegir; sin embargo, usar React tiene sus ventajas. Se favorece React porque la plataforma Power Apps subyacente usa React internamente. Power Apps Component Framework también tiene soporte integrado para usar la misma infraestructura. Esta capacidad significa que no tendrá que empaquetar manualmente las bibliotecas React y Fluent UI en cada control. Todos los controles compartirán una instancia y versión de biblioteca común para brindar una experiencia fluida y constante.
El siguiente comando muestra cómo inicializar un componente y usar el marco React:
pac pcf init -n ReactSample -ns SampleNamespace -t field -fw react -npm
La única diferencia que puede notar es la opción -fw (o--framework) que permite usar React. Esta opción hará que los archivos iniciales generados para usted incluyan las configuraciones necesarias de React.
Más adelante en este módulo, creará un componente de código utilizando esta capacidad de React.