Compartir a través de

Componentes de código

  • Artículo

Los componentes de código son un tipo de componente de la solución, lo que significa que se pueden incluir en un archivo de solución e importar a diferentes entornos. Aprenda a empaquetar y distribuir las extensiones con soluciones

Componentes de código.

Puede incluir componentes de código en una solución y luego importar la solución a un entorno Microsoft Dataverse. Una vez que se importa la solución que contiene los componentes del código, los administradores del sistema y los personalizadores del sistema pueden configurar columnas, subcuadrículas, vistas y subcuadrículas del tablero para usar en lugar de los componentes predeterminados. Puede agregar estos componentes de código a aplicaciones basadas en modelo y de lienzo.

Los componentes de código constan de tres elementos:

Nota

La definición e implementación de componentes de código utilizando Power Apps component framework es el mismo tanto para aplicaciones basadas en modelo como para las de lienzo. La única diferencia entre ambos es la parte de configuración.

Manifiesto

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

  • Nombre del componente.
  • El tipo de datos que se puede configurar, un field o un dataset.
  • Las propiedades que se pueden configurar en la aplicación cuando se agrega 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 para un componente se generan 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. Más información: Referencia de esquema de manifiesto

Implementación del componente

Los componentes de código se implementan con TypeScript. Cada componente de código debe incluir un objeto que implemente los métodos descritos en la interfaz del componente de código. La CLI de Power Platform generará automáticamente un archivo index.ts que incluye implementaciones stubped para estos métodos. Este archivo se genera automáticamente mediante el comando pac pcf init con métodos principales de código auxiliar.

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 requiere un objeto para 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 espacio de nombres y constructor del manifiesto son SampleNameSpace y LinearInputComponent respectivamente, el código para crear instancias del objeto sería éste:

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 se pueden usar en el componente junto con las API de Power Apps component framework. Por ejemplo, context.parameters.<"property name from manifest"> se puede usar para tener acceso a la propiedad de entrada.
notifyOutputChanged Alerta al marco de trabajo cuando el componente de código tiene las nuevas salidas listas para recuperarse de forma asincrónica.
estado Contiene datos del componente de la carga de página anterior en la sesión actual si el componente explícitamente lo almacenó antes usando 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 los valores que tienen los cambios realizados por el usuario. Para un componente field, esto sería normalmente el nuevo valor para el componente.

La aplicación cambia los datos

Si la plataforma cambia los datos, llamará al método updateView del componente y pasará el nuevo objeto de contexto como parámetro. Este método se debe implementar para actualizar los valores mostrados en el componente.

Cierre de página

Cada vez que un usuario sale de la página, el componente de código pierde el ámbito y se borra toda la memoria asignada en esa página para los objetos del componente. Sin embargo, algunos métodos basados en el mecanismo de implementación del explorador pueden mantenerse y consumir memoria. Normalmente, estos son controladores de eventos. Si el usuario desea almacenar esta información, debe implementar el método setControlState para que la información se dé la siguiente vez en 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.

Resources

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. El archivo index.ts generado por la herramienta es un recurso code. Debe haber al menos un recurso de código.

Puede definir archivos de recursos adicionales en el manifiesto para que incluyan:

  • 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

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).