Architecture de Power Apps Component Framework
Vous pouvez implémenter les composants de code en HTML, CSS et TypeScript. Bien que vous ne soyez pas obligé d’utiliser une infrastructure d’IU spécifique, React et Fluent UI sont fréquemment utilisées.
Composition des composants
L’image suivante illustre les trois domaines clés d’un composant Power Apps : un fichier d’entrée de manifeste, son implémentation et tous les autres fichiers de ressources dont le composant pourrait avoir besoin.
Un manifeste permet d’identifier toutes les propriétés utilisables par l’application hébergeant le composant. Lorsque les créateurs d’applications utilisent le composant de code, ils peuvent définir de manière statique une valeur pour les propriétés. Ils peuvent également le lier dynamiquement à l’une des colonnes de données disponibles dans l’application. Les propriétés permettent à l’application et au composant de communiquer au sujet des données sans que l’application ait besoin de comprendre l’implémentation du composant.
Lorsque vous créez un composant, votre code doit implémenter une interface qui permet à l’application d’hébergement d’interagir avec votre composant de manière homogène. Votre composant de code réalise cette opération en implémentant l’interface StandardControl.
export class FirstControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {}
Cycle de vie des composants Power Apps
Lorsque vous développez un composant, vous implémentez tout ou partie des méthodes d’interface StandardControl figurant dans le tableau suivant en fonction des exigences de vos composants. Ces méthodes permettent au runtime d’hébergement de gérer le cycle de vie du composant de code.
| Méthode | Description |
|---|---|
| init | Obligatoire. Cette méthode vous permet d’initialiser l’instance de composant. Les composants peuvent lancer des appels de serveur distant et d’autres actions d’initialisation dans cette méthode. Vous ne pouvez pas initialiser les valeurs du jeu de données avec cette méthode ; vous devez utiliser la méthode updateView. |
| updateView | Obligatoire. Cette méthode est appelée en cas de modification d’une valeur du sac de propriétés du composant. Si vous avez démarré des requêtes de chargement de données dans la méthode init qui pourraient ne pas être terminées, votre code doit gérer cet état et fournir un indicateur visuel de chargement. |
| getOutputs | Facultatif. Appelée par l’Infrastructure avant la réception de nouvelles données. Utilisez cette méthode lors de la gestion dynamique des propriétés liées dans un contrôle. |
| destroy | Obligatoire. Appelée lorsque le composant doit être supprimé de l’arborescence DOM. Utilisez la méthode destroy pour le nettoyage et la libération de mémoire que le composant utilise. Par exemple, si vous utilisez React, utilisez ReactDOM.unmountComponentAtNode dans la méthode destroy. Cela évite tout problème de performance causé par le chargement et le déchargement des composants de code au cours d’une session de navigateur donnée. |
Ces méthodes sont appelées par un processus de runtime d’infrastructure dans un cycle de vie standardisé, comme indiqué dans l’illustration suivante :
En haut de l’image, l’infrastructure appelle la fonction init() de votre composant. Si votre composant est interactif, vous devez également informer l’hôte que la sortie du composant a changé en appelant la méthode notifyOutputChanged.
Le runtime de l’infrastructure appelle alors la méthode getOutputs pour obtenir les valeurs de toutes les propriétés liées de votre composant.
Le runtime informe ensuite l’hôte, qui valide la sortie. Si la sortie est valide, elle appelle la méthode updateView sur votre composant. Si elle n’est pas valide pour une raison quelconque (par exemple si une règle métier a déclaré la nouvelle sortie non valide), elle appelle votre méthode updateView et transmet l’ancienne valeur avec un message d’erreur. Dans les deux scénarios, votre composant peut mettre à jour l’interface utilisateur et afficher un message d’erreur, le cas échéant.