Définir des événements (version préliminaire)

[Cette rubrique fait partie de la documentation en version préliminaire et peut faire l’objet de modifications.]

Une exigence courante lors de la création de composants personnalisés avec Power Apps Component Framework est la capacité à réagir aux événements générés dans le contrôle. Ces événements peuvent être appelés soit en raison d’une interaction utilisateur, soit par programmation via du code. Par exemple, une application peut avoir un composant de code qui permet à un utilisateur de créer une offre groupée de produits. Ce composant peut également déclencher un événement susceptible d’afficher des informations sur le produit dans une autre zone de l’application.

Flux de données du composant

Le flux de données commun pour un composant de code est constitué de données circulant de l’application hôte vers le contrôle en tant qu’entrées et les données mises à jour sortant du contrôle vers le formulaire ou la page d’hébergement. Ce diagramme montre le modèle standard de flux de données pour un composant PCF typique :

La mise à jour des données du composant de code vers le champ lié déclenche l’événement OnChange. Pour la plupart des scénarios de composants, cela suffit et les créateurs ajoutent simplement un gestionnaire pour déclencher les actions suivantes. Toutefois, un contrôle plus compliqué peut nécessiter le déclenchement d’événements qui ne sont pas des mises à jour de champ. Le mécanisme d’événement permet aux composants de code de définir des événements qui ont des gestionnaires d’événements distincts.

Utilisation des événements

Le mécanisme d’événement dans PCF est basé sur le modèle d’événement standard dans JavaScript. Le composant peut définir des événements dans le fichier manifeste et déclencher ces événements dans le code. L’application d’hébergement peut écouter ces événements et y réagir.

Le composant définit les événements à l’aide de l’élément d’événement dans le fichier manifeste. Ces données permettent à l’application d’hébergement respective de réagir aux événements de différentes manières.

<property
  name="sampleProperty"
  display-name-key="Property_Display_Key"
  description-key="Property_Desc_Key"
  of-type="SingleLine.Text"
  usage="bound"
  required="true"
/>
<event
  name="customEvent1"
  display-name-key="customEvent1"
  description-key="customEvent1"
/>
<event
  name="customEvent2"
  display-name-key="customEvent2"
  description-key="customEvent2"
/>

Les applications canevas réagissent à l’événement à l’aide d’expressions Power Fx :

Les applications pilotées par modèle utilisent la méthode addEventHandler pour associer des gestionnaires d’événements à des événements personnalisés pour un composant.

  const controlName1 = "cr116_personid";

  this.onLoad = function (executionContext) {
    const formContext = executionContext.getFormContext();

    const sampleControl1 = formContext.getControl(controlName1);
    sampleControl1.addEventHandler("customEvent1", this.onSampleControl1CustomEvent1);
    sampleControl1.addEventHandler("customEvent2", this.onSampleControl1CustomEvent2);
  }

Nonte

Ces événements se produisent séparément pour chaque instance du composant de code dans l’application.

Définition d’un événement pour les applications pilotées par modèle

Pour les applications pilotées par modèle, vous pouvez transmettre une charge utile avec l’événement, ce qui permet des scénarios plus complexes. Par exemple, dans le diagramme ci-dessous, le composant transmet une fonction de rappel dans l’événement, ce qui permet à la gestion de script de rappeler le composant.

this.onSampleControl1CustomEvent1 = function (params) {
   //alert(`SampleControl1 Custom Event 1: ${params}`);
   alert(`SampleControl1 Custom Event 1`);
}.bind(this);

this.onSampleControl2CustomEvent2 = function (params) {
alert(`SampleControl2 Custom Event 2: ${params.message}`);
// prevent the default action for the event
params.callBackFunction();
}

Définition d’un événement pour les applications canevas

Les créateurs configurent un événement en utilisant Power Fx sur le contrôle PCF dans le volet des propriétés.

Appel d’un événement

Pour savoir comment appeler un événement, consultez Événements.

Étapes suivantes

Didacticiel : Définir un événement personnalisé dans un composant