Présentation de l’utilisation de React dans un composant Power Apps

Effectué

À mesure que vous créez des composants de code plus complexes, Power Apps Component Framework fournit des fonctionnalités intégrées que vous pouvez utiliser dans le cadre de votre logique. Grâce à ces fonctionnalités, vous pouvez en savoir plus sur le client hébergeant votre composant, l’appareil exécutant le composant et d’autres services de type utilitaire tels que la mise en forme. Pour les composants qui souhaitent interagir avec des données de table Dataverse, la fonctionnalité WebAPI vous permet d’interagir avec les données.

La création manuelle du code HTML est courante pour les composants simples, mais à mesure que vos besoins deviennent plus complexes, l’utilisation d’une bibliothèque d’infrastructures d’IU peut s’avérer utile. Il existe de nombreux choix d’infrastructures d’IU JavaScript, mais React est l’une des bibliothèques les plus couramment utilisées avec les composants de code Power Apps.

Dans le reste de ce module, nous allons explorer ces sujets plus en détail. Nous allons utiliser plusieurs exemples pratiques dans lesquels vous pourrez suivre et créer vos composants à l’aide de certaines de ces fonctionnalités plus avancées de l’infrastructure.

Utiliser le contexte de composant

L’objet contextuel comporte des valeurs configurées par le personnalisateur et mappées aux noms de propriété définis dans les fonctions manifeste et utilitaire. Dans la logique de vos composants, il vous permet d’accéder à la plupart des fonctionnalités intégrées que nous utiliserons plus tard dans ce module dans les composants que vous créez.

Le paramètre de contexte est disponible pour les composants sur les méthodes init et updateView. Il est courant que dans la méthode init, vous renseigniez une variable de niveau classe pour permettre un accès facile au contexte dans d’autres méthodes de votre composant. Voici un exemple d’enregistrement du contexte pour une utilisation ultérieure dans la méthode 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 */
    }
}

L’objet contextuel de composant peut couvrir une multitude d’informations sur l’environnement dans lequel votre composant s’exécute. Voici une présentation des propriétés clés disponibles :

• client : cette propriété vous fournit des informations sur le client (web, Outlook ou mobile), le facteur de forme (ordinateur de bureau, tablette ou téléphone) et vous indique si vous êtes hors connexion et si le réseau est disponible.

• mode : cette propriété fournit des informations sur l’état actuel du composant de code. Par exemple, le composant est-il visible ? Est-il désactivé ? Et quelle est la taille actuellement allouée ?

• userSettings : cette propriété fournit des informations sur l’utilisateur actuel, comme son LanguageId, son ID utilisateur et son nom. Pour les applications pilotées par modèle, la propriété securityRoles peut être utile pour découvrir les rôles de l’utilisateur actuel.

L’objet contextuel donne également accès à plusieurs services intégrés utiles. Voici les plus courants :

• device : cette propriété donne accès aux méthodes permettant d’utiliser les fonctionnalités natives d’un appareil. Grâce à ces services, vous pouvez capturer des éléments audio ou vidéo et des images, obtenir des valeurs de code-barres, identifier la géolocalisation d’un appareil et sélectionner des fichiers.

• factory : cette propriété propose actuellement uniquement des méthodes permettant d’utiliser le service Popup, mais pourrait prendre en charge d’autres services à l’avenir.

• formatting : cette propriété fournit des méthodes vous permettant de mettre en forme les données, par exemple au format devise ou heure. Ces méthodes vous permettent de maintenir une mise en forme cohérente avec les paramètres utilisateur de l’application d’hébergement.

• navigation : cette propriété fournit des méthodes liées à la navigation telles que des formulaires ouverts, des URL ouvertes, des boîtes de dialogue (alerte, confirmation, erreur), etc.

• resources : cette propriété fournit un accès aux méthodes permettant d’obtenir toutes les informations sur les fichiers de ressources définis dans le manifeste. Ces méthodes sont essentielles pour localiser tout le contenu de votre composant.

• utils : cette propriété fournit un accès aux métadonnées de table et vous permet également de vérifier l’accès des utilisateurs à des tables spécifiques. La méthode lookupObjects permet aux composants d’accéder à la boîte de dialogue de recherche standard, permettant ainsi aux utilisateurs de sélectionner une ou plusieurs lignes.

• webAPI : cette propriété fournit un accès CRUD (création, lecture, mise à jour et suppression) de base aux données de table Dataverse.

Voici un exemple d’utilisation des fonctionnalités pickFile d’appareil :

 private onUploadButtonClick(event: Event): void {
    this._context.device.pickFile().then(this.processFile.bind(this), this.showError.bind(this));
  }

Notez que le fonctionnement de certains de ces services nécessite leur activation dans la section d’utilisation des fonctionnalités du manifeste. D’autres peuvent également être disponibles uniquement dans des types spécifiques d’applications d’hébergement. Par exemple, webAPI n’est disponible que dans les applications pilotées par modèle et Power Pages et n’est pas disponible pour les applications canevas. Consultez la page de référence du service concerné pour en savoir plus.

Utiliser React

Vous pouvez faire votre choix parmi de nombreuses infrastructures d’IU ; cependant, l’utilisation de React présente des avantages. React est privilégiée, car la plateforme Power Apps sous-jacente utilise React en interne. Power Apps Component Framework intègre également une prise en charge de l’utilisation de la même infrastructure. Cette fonctionnalité signifie que vous n’avez pas à packager manuellement les bibliothèques d’IU React et Fluent dans chaque contrôle. Tous les contrôles partagent une instance et une version de bibliothèque communes pour offrir une expérience fluide et homogène.

La commande suivante montre comment initialiser un composant et utiliser l’infrastructure React :

pac pcf init -n ReactSample -ns SampleNamespace -t field -fw react -npm

La seule différence que vous remarquerez peut-être est l’option -fw (ou -framework) qui permet d’utiliser React. Grâce à cette option, les fichiers initiaux générés pour vous incluent les configurations React nécessaires.

Plus loin dans ce module, vous allez créer un composant de code à l’aide de cette fonctionnalité React.