Personalizar el control de cuadrícula editable

En este artículo se explica cómo personalizar el control de cuadrícula editable en Power Apps para satisfacer los requisitos visuales e interacciones especializados. Utiliza las API de extensibilidad del control de cuadrícula de Power Apps para crear un componente de código para personalizar la cuadrícula con renderizadores y editores de celdas personalizados.

Control personalizador de cuadrícula

Un personalizador de cuadrícula es un control PCF que implementa la interfaz de personalización del control de cuadrícula de Power Apps. Esta interfaz permite definir el elemento React que se representa cuando una celda de cuadrícula está en modo de solo lectura (el representador de celdas) o en modo de edición (el editor de celdas). Pueden existir varios controles de personalizador de cuadrícula en un entorno, pero cada cuadrícula solo puede tener asignado un único control de personalizador de cuadrícula. Puede decidir que se necesita un control de personalizador independiente para cada cuadrícula que desee modificar, o puede optar por reutilizar el mismo control de personalizador para varias cuadrículas.

Implementar un control de personalización de cuadrícula

Para implementar un control personalizador de cuadrícula, primero debe conocer los pasos para Crear y compilar un componente de código y debe tener acceso al control de plantilla.

El control de plantilla está incluido en el repositorio de GitHub PowerApps-Samples. Debe clonar o descargar el repositorio para acceder a los archivos que se encuentran aquí: PowerApps-Samples/component-framework/resources/GridCustomizerControlTemplate

1. Abra la carpeta GridCustomizerControlTemplate usando Visual Studio Code.

2. En una ventana de terminal, ejecute npm install.

3. Cree sus renderizadores y editores de celdas personalizados.

   El código de personalización está en la carpeta personalizadores.

   • CellRendererOverrides.tsx incluye personalizadores de renderizador de celdas por tipo de datos.
   • CellEditorOverrides.tsx incluye personalizadores de editor de celdas por tipo de datos.

   Modifique estos archivos para añadir elementos de React que se rendericen cuando una celda esté en modo de solo lectura (renderizador de celdas) o en modo de edición (editor de celdas).

   Cada archivo exporta un objeto que asocia cada tipo de datos de columna con una función que devuelve un elemento de React para renderizarlo en las celdas de ese tipo.

   /**
    * Provide cell renderer overrides per column data type.
   */
    export interface CellRendererOverrides {
      [dataType: string]: (props: CellRendererProps, rendererParams: GetRendererParams)
      => React.ReactElement | null | undefined; 
   };
   
   /**
    * Provide cell editor overrides per column data type.
   */
    export interface CellEditorOverrides {
      [dataType: string]: (defaultProps: CellEditorProps, rendererParams: GetEditorParams)
      => React.ReactElement | null | undefined; 
   };
   

   Nota

   Si la función devuelve null o un valor indefinido, la cuadrícula usa el renderizador interno o el editor para las celdas en cuestión.

4. Después de definir sus renderizadores y editores de celdas personalizados, empaquete el control del personalizador de cuadrícula e impórtelo a su entorno Power Apps. Como alternativa, use el comando pac pcf push .

5. Después de publicar el control del personalizador de cuadrícula, abra el panel Personalizar el sistema del menú Configuración > Personalizaciones.

   

6. En el nodo Entidades, seleccione una entidad a la que se dirija el control del personalizador (por ejemplo, Cuenta).

7. Desde el panel derecho, seleccione la pestaña Controles.

   

8. De la lista Controles, agregue un control de cuadrícula de Power Apps.

   

9. En el panel Propiedades, configure la propiedad Control del personalizador al nombre lógico completo de su componente de código del personalizador de cuadrícula.

   Nombre lógico completo = {publisher prefix}_{namespace}.{control name}

   

10. Guarde y publique sus personalizaciones para esta entidad.

11. Pruebe la personalización abriendo la cuadrícula principal de la entidad personalizada.

12. Repita los pasos 6 a 11 para cualquier otra entidad cuya cuadrícula necesite un control personalizador de cuadrícula.

Procedimientos recomendados

• Los renderizadores y editores de celdas son componentes de la interfaz de usuario. No los use para mutar datos o metadatos de la cuadrícula.
• Los controles del personalizador deben ser ligeros y rápidos, por lo que no afectan al rendimiento general de la cuadrícula.
• Para mantener la consistencia del diseño, siga Principios de diseño fluidos y use Controles fluidos en sus personalizadores.
• Asegúrese de que el representador o el editor personalizados sean accesibles.
• La función de personalizador debe ser pura, ya que la cuadrícula la llama varias veces para obtener elementos personalizados y espera que el valor devuelto sea coherente.
• La cuadrícula puede desechar un elemento personalizador en cualquier momento y llamar para obtener uno nuevo en cualquier momento. Asegúrese de eliminar cualquier estado interno al desmontar para evitar pérdidas de memoria.
• No use motores de renderizado para anular los valores de la cuadrícula, ya que el servidor no usa los nuevos valores para filtrar u ordenar.

Ejemplo

Puede encontrar un ejemplo de un control de cuadrícula editable personalizado aquí: Cuadrícula editable personalizada.

Consulte también

Información general sobre Power Apps component framework
Crear el primer componente de código
Más información sobre Power Apps component framework