Definir eventos (versión preliminar)

[Este tema es documentación preliminar y está sujeto a modificaciones.]

Un requisito común al crear componentes personalizados con Power Apps Component Framework es la capacidad de reaccionar a los eventos generados dentro del control. Estos eventos se pueden invocar debido a la interacción del usuario o mediante programación a través del código. Por ejemplo, una aplicación puede tener un componente de código que permita a un usuario crear una agrupación de productos. Este componente también puede generar un evento que podría mostrar información del producto en otra área de la aplicación.

Componente de Data Flow

El flujo de datos común para un componente de código son los datos que fluyen desde la aplicación de hospedaje hacia el control como entradas y datos actualizados que fluyen desde el control hacia el formulario o la página de hospedaje. Este diagrama muestra el patrón estándar de flujo de datos para un componente PCF típico:

La actualización de datos desde el componente de código al campo enlazado desencadena el evento OnChange. Para la mayoría de los escenarios de componentes, esto es suficiente y los creadores solo tienen que agregar un controlador para desencadenar acciones posteriores. Sin embargo, un control más complicado podría requerir que se generen eventos que no sean actualizaciones de campo. El mecanismo de eventos permite que los componentes de código definan eventos que tienen controladores de eventos independientes.

Usar eventos

El mecanismo de eventos en PCF se basa en el modelo de eventos estándar en JavaScript. El componente puede definir eventos en el archivo de manifiesto y generar estos eventos en el código. La aplicación de hospedaje puede escuchar estos eventos y reaccionar ante ellos.

El componente define eventos utilizando el elemento event en el archivo de manifiesto. Estos datos permiten que la aplicación de hospedaje respectiva reaccione a los eventos de diferentes maneras.

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

Las aplicaciones de lienzo reaccionan al evento usando expresiones de Power Fx:

Las aplicaciones basadas en modelos usan el método addEventHandler para asociar controladores de eventos a eventos personalizados para un componente.

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

Nota

Estos eventos se producen por separado para cada instancia del componente de código en la aplicación.

Definición de un evento para aplicaciones basadas en modelos

En el caso de las aplicaciones basadas en modelos, puede pasar una carga útil con el evento, lo que permite escenarios más complejos. Por ejemplo, en el diagrama siguiente, el componente pasa una función de devolución de llamada en el evento, lo que permite que el controlador del script devuelva la llamada al componente.

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

Definición de un evento para aplicaciones de lienzo

Los creadores configuran un evento Power Fx usando el control PCF en el panel de propiedades.

Llamar a un evento

Vea cómo llamar a un evento en Eventos.

Pasos siguientes

Tutorial: Definir un evento personalizado en un componente