Arquitectura de Power Apps component framework
Puede implementar componentes de código con HTML, CSS y TypeScript. Aunque no es necesario que use ningún marco de interfaz de usuario en concreto, React y Fluent UI son opciones populares.
Composición del componente
Como muestra la siguiente imagen, las tres áreas principales de un componente de Power Apps son: un archivo de entrada de manifiesto, la implementación de este y los archivos de recursos adicionales que pueda necesitar el componente.
También se usa un manifiesto para identificar las propiedades que están disponibles para que las utilice la aplicación que hospeda el componente. Cuando los creadores de aplicaciones utilizan el componente de código, pueden establecer estáticamente un valor para las propiedades. También pueden vincularlo dinámicamente a una de las columnas de datos disponibles en la aplicación. Las propiedades permiten que la aplicación y el componente se comuniquen sobre los datos sin que la aplicación tenga que comprender la implementación del componente.
Al crear un componente, su código debe implementar una interfaz que proporcione una forma coherente para que la aplicación de hospedaje interactúe con el componente. El componente de código logra esto mediante la implementación de la interfaz StandardControl.
export class FirstControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {}
Ciclo de vida de los componentes de Power Apps
Al desarrollar un componente, implementa todos o algunos de los métodos de interfaz StandardControl en la siguiente tabla en función de los requisitos de sus componentes. Estos métodos permiten que el tiempo de ejecución de hospedaje administre el ciclo de vida del componente de código.
| Método | Descripción |
|---|---|
| init | Obligatorio. Use este método para inicializar la instancia del componente. Los componentes pueden iniciar llamadas a servidores remotos y otras acciones de inicialización en este método. No puede inicializar los valores del conjunto de datos con este método; debe usar el método updateView. |
| updateView | Obligatorio. Se llama a este método cuando haya cambiado cualquier valor en el contenedor de propiedades del componente. Si inició alguna solicitud de carga de datos en el método init que podría no finalizarse, el código debe gestionar este estado y proporcionar un indicador de carga visual. |
| getOutputs | Opcional. Método que llama el marco antes de la recepción de nuevos datos. Use este método cuando administre dinámicamente propiedades enlazadas en un control. |
| destroy | Obligatorio. Método que se invoca cuando el componente debe eliminarse del árbol DOM. Utilice el método destroy para la limpieza y para liberar la memoria que el componente utilice. Por ejemplo, si está usando React, utilice ReactDOM.unmountComponentAtNode dentro del método destroy. Esto evita cualquier problema de rendimiento causado por la carga y descarga de componentes de código dentro de una sesión de explorador determinada. |
Estos métodos se invocan mediante un proceso de tiempo de ejecución de marco de trabajo en un ciclo de vida estandarizado, tal y como se muestra en la siguiente ilustración.
En la parte superior de la imagen, el marco de trabajo llama a la función init() para el componente. Si el componente es interactivo, también deberá notificar al host de que la salida del componente ha cambiado; para ello, llame al método notifyOutputChanged.
El tiempo de ejecución de marco de trabajo llama al método getOutputs para obtener valores para todas las propiedades enlazadas de su componente.
Luego, el tiempo de ejecución notifica al host, que valida la salida. Si la salida es válida, llama al método updateView en su componente. Si por cualquier motivo no es válida (por ejemplo, si una regla de negocio determina que la nueva salida no es válida), llama al método updateView y transmite el valor anterior junto con un mensaje de error. En cualquier escenario, su componente puede actualizar la interfaz de usuario y mostrar un mensaje de error si corresponde.