Ereignisse festlegen (Vorschauversion)

[Dieses Thema ist Teil der Dokumentation zur Vorabversion und kann geändert werden.]

Eine häufige Anforderung beim Erstellen benutzerdefinierter Komponenten mit dem Power Apps Component Framework ist die Fähigkeit, auf Ereignisse zu reagieren, die innerhalb des Steuerelements generiert werden. Diese Ereignisse können entweder aufgrund einer Benutzerinteraktion oder programmgesteuert über Code aufgerufen werden. Eine Anwendung kann beispielsweise über eine Codekomponente verfügen, mit der ein Benutzer ein Produktpaket erstellen kann. Diese Komponente kann auch ein Ereignis auslösen, das Produktinformationen in einem anderen Bereich der Anwendung anzeigen könnte.

Komponentendatenfluss

Der allgemeine Datenfluss für eine Codekomponente besteht aus Daten, die von der Hostinganwendung als Eingaben in das Steuerelement fließen, sowie aus aktualisierten Daten, die aus dem Steuerelement an das Hostformular oder die Hostingseite fließen. Dieses Diagramm zeigt das Standardmuster des Datenflusses für eine typische PCF-Komponente:

Die Datenaktualisierung von der Codekomponente an das gebundene Feld löst das OnChange-Ereignis aus. Für die meisten Komponentenszenarien reicht dies aus und die Erstellenden fügen einfach einen Handler hinzu, um nachfolgende Aktionen auszulösen. Für ein komplizierteres Steuerelement müssen jedoch möglicherweise Ereignisse ausgelöst werden, bei denen es sich nicht um Feldaktualisierungen handelt. Der Ereignismechanismus ermöglicht es Codekomponenten, Ereignisse zu definieren, die über separate Ereignishandler verfügen.

Ereignisse verwenden

Der Ereignismechanismus in PCF basiert auf dem Standardereignismodell in JavaScript. Die Komponente kann Ereignisse in der Manifestdatei definieren und diese Ereignisse im Code auslösen. Die Hostinganwendung kann diese Ereignisse abhören und darauf reagieren.

Die Komponente legt Ereignisse mithilfe des Ereigniselements in der Manifestdatei fest. Diese Daten ermöglichen es der jeweiligen Hosting-Anwendung, auf unterschiedliche Weise auf Ereignisse zu reagieren.

<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"
/>

Canvas Apps reagieren mit Power Fx-Ausdrücken auf das Ereignis:

Modellgesteuerte Apps verwenden die addEventHandler-Methode, um Ereignishandler benutzerdefinierten Ereignissen für eine Komponente zuzuordnen.

  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);
  }

Anmerkung

Diese Ereignisse treten separat für jede Instanz der Codekomponente in der App auf.

Definieren eines Ereignisses für modellgesteuerte Apps

Bei modellgesteuerten Apps können Sie eine Nutzlast mit dem Ereignis übergeben, was komplexere Szenarien ermöglicht. Im folgenden Diagramm übergibt die Komponente beispielsweise eine Callback-Funktion im Ereignis, die es dem Skripthandling ermöglicht, die Komponente zurückzurufen.

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();
}

Definieren eines Ereignisses für Canvas-Apps

Erstellende konfigurieren ein Ereignis mithilfe von Power Fx auf dem PCF-Steuerelement im Eigenschaftenbereich.

Ein Ereignis aufrufen

Erfahren Sie, wie Sie ein Ereignis in Ereignisse aufrufen.

Nächste Schritte,

Tutorial: Ein benutzerdefiniertes Ereignis in einer Komponente festlegen