Componentes de código

Los componentes de código son componentes de solución que se pueden empaquetar en un archivo de solución e importarlos en distintos entornos. Úselas para distribuir experiencias mejoradas de aplicaciones entre entornos. Aprenda a empaquetar y distribuir las extensiones con soluciones

Captura de pantalla de un componente de código que permite a los usuarios ver y trabajar con datos de la aplicación.

Puede incluir componentes de código en una solución y luego importar la solución a un entorno Microsoft Dataverse. Después de importar la solución que contiene componentes de código, los administradores del sistema y los personalizadores del sistema pueden configurar columnas, subgrids, vistas y subgrids de panel para usar en lugar de componentes predeterminados. Puede agregar estos componentes de código tanto a aplicaciones basadas en modelos como a aplicaciones de lienzo.

Los componentes de código constan de tres elementos:

Nota

La definición y la implementación de componentes de código mediante el marco de componentes de Power Apps es la misma tanto para las aplicaciones basadas en modelos como para las aplicaciones de lienzo. La única diferencia entre ambas aplicaciones es la parte de configuración.

Manifiesto

El manifiesto es el ControlManifest.Input.xml archivo de metadatos que define un componente. Es un documento XML que describe:

  • Nombre del componente.
  • El tipo de datos que puede configurar, ya sea un field o un dataset.
  • Las propiedades que puede configurar en la aplicación al agregar el componente.
  • Una lista de archivos de recursos que el componente necesita.

Cuando un usuario configura un componente de código, los datos del archivo de manifiesto filtran los componentes disponibles para que sólo los componentes válidos para el contexto estén disponibles para configuración. Las propiedades definidas en el archivo de manifiesto de un componente se representan como columnas de configuración para que el usuario que configura el componente pueda especificar los valores. Estos valores de propiedad están disponibles entonces para el componente en tiempo de ejecución. Para obtener más información, consulte Referencia del esquema del manifiesto.

Implementación del componente

Use TypeScript para implementar componentes de código. Cada componente de código debe incluir un objeto que implemente los métodos descritos en la interfaz del componente de código. La interfaz de línea de comandos de Power Platform genera automáticamente un archivo index.ts que incluye implementaciones básicas para estos métodos. Use el comando pac pcf init para generar este archivo, que incluye métodos auxiliares básicos.

El objeto implementa los siguientes métodos:

Estos métodos controlan el ciclo de vida del componente de código.

Carga de página

Cuando se carga la página, la aplicación necesita un objeto con el que trabajar. Al usar los datos del archivo de manifiesto, el código obtiene el objeto llamando:

var obj =  new <"namespace on manifest">.<"constructor on manifest">();

Si los valores de constructor y espacio de nombres del manifiesto son SampleNameSpace y LinearInputComponent , respectivamente, el código para crear una instancia del objeto tiene este aspecto:

var controlObj = new SampleNameSpace.LinearInputComponent();

Cuando la página está lista, inicializa el componente llamando al método init con un conjunto de parámetros.

controlObj.init(context,notifyOutputChanged,state,container);
Parámetro Descripción
contexto Contiene toda la información sobre cómo se configura el componente y todos los parámetros que puede usar en el componente junto con las API del marco de componentes de Power Apps. Por ejemplo, use context.parameters.<"property name from manifest"> para acceder a la propiedad de entrada.
notifyOutputChanged Avisa al entorno cuando el componente de código tiene nuevos resultados listos para su recuperación de manera asíncrona.
estado Contiene datos de componentes de la carga de página anterior en la sesión actual si el componente lo almacenó explícitamente anteriormente mediante el método setControlState .
contenedor Un elemento de div HTML al que los desarrolladores y creadores de aplicaciones pueden anexar los elementos HTML para la interfaz de usuario que define el componente.

El usuario cambia los datos

Cuando un usuario interactúa con sus componentes para cambiar datos, su componente debe llamar al método pasado como parámetro notifyOutputChanged en el método init. Cuando se usa este método, la plataforma responde llamando al método getOutputs . El método getOutputs devuelve valores que incluyen los cambios realizados por el usuario. En el caso de un field componente, este valor suele ser el nuevo valor para el componente.

La aplicación cambia los datos

Si la plataforma cambia los datos, llama al método updateView del componente y pasa el nuevo objeto de contexto como parámetro. Implemente este método para actualizar los valores mostrados en el componente.

Cierre de página

Cuando un usuario se aleja de la página, el componente de código pierde el ámbito y borra toda la memoria asignada en esa página para los objetos. Sin embargo, algunos métodos pueden permanecer y consumir memoria, en función del mecanismo de implementación del explorador. Normalmente, estos métodos son controladores de eventos. Si el usuario quiere almacenar esta información, debe implementar el método setControlState para que la información esté disponible la próxima vez dentro de la misma sesión.

Los programadores debe implementar el método destroy, al que se llama cuando se cierra la página, para eliminar cualquier código de limpieza como controladores de eventos.

Recursos

El nodo de recurso en el archivo de manifiesto hace referencia a los recursos que el componente requiere para implementar su visualización. Cada componente de código debe tener un archivo de recurso para generar su visualización. Las herramientas generan el index.ts archivo como un code recurso. Debe haber al menos un recurso de código.

Defina archivos de recursos adicionales en el manifiesto para incluir:

  • CSS archivos
  • recursos web de imagen
  • recursos web resx para la localización

Más información: elemento de recursos

Crear y generar un componente de código

  • Last updated on