Tutorial: Creación de un componente de conjunto de datos de aplicación controlado por modelos

En este tutorial, creará un componente de código de conjunto de datos, lo implementará y lo configurará dentro de una aplicación controlada por modelos mediante Visual Studio Code. El componente de código muestra una cuadrícula de conjunto de datos paginada y desplazable que proporciona columnas ordenables y filtrables. También permite resaltar filas específicas mediante la configuración de una columna de indicador. El componente de código del conjunto de datos se puede vincular a la cuadrícula principal de una tabla, una vista o una subcuadrícula.

Además de estos requisitos, también garantizará que el componente de código siga las instrucciones de procedimientos recomendados:

1. Uso de la interfaz de usuario de Microsoft Fluent
2. Localización de las etiquetas de componentes de código en el diseño y el entorno de ejecución
3. Asegúrese de que el componente sea responsivo y renderice al 100% del alto disponible, excepto cuando el alto es proporcionado por el creador al configurar el componente de código en la subcuadrícula.
4. Garantía de compatibilidad con el modo de pantalla completa

A partir de lo anterior, verá lo siguiente:

1. Al seleccionar registros en la cuadrícula, se habilita el uso de las acciones de la barra de comandos asociadas a los registros seleccionados.
2. La fila de encabezado permanece en su lugar mientras los registros se desplazan cuando no hay suficiente altura vertical para dar cabida a toda la página.
3. El componente de código se puede ver en modo de pantalla completa. Esto es especialmente importante en formatos de pantalla pequeña. Al abrir en pantalla completa, el componente de código no se reinicializa, sino que se actualizan allocatedWidth y allocatedHeight, y el componente se vuelve a renderizar a través de una llamada a updateView.
4. El cuadro de búsqueda rápida se puede usar con el componente de código para filtrar los registros.
5. El pie de página muestra el número de registros, página actual y controles de paginación.

Antes de continuar, consulte el tutorial de Creación de un componente de conjunto de datos para la aplicación de lienzo para obtener más información sobre los requisitos previos, las técnicas usadas y cómo crear e implementar el componente de código.

Descarga e instalación del código de ejemplo de la aplicación controlada por modelos

En primer lugar, descargue el código de ejemplo en una carpeta denominada ModelDrivenGrid. Para instalar el componente de código, abra la carpeta que contiene el pcfproj dentro de Visual Studio Code y, en la terminal, use:

npm install

Asegúrese de tener un editor de soluciones creado con el prefijo samples, descrito en Creación de un tutorial de componente de conjunto de datos de aplicación de lienzo: Implementar y configurar el componente. Además, asegúrese de que ha iniciado sesión contra Microsoft Dataverse usando pac auth.

En el terminal, use:

pac pcf push -pp samples

Esto implementa el componente de código en Dataverse para que se pueda configurar. Más información: Tutorial de creación de un componente de conjunto de datos para una aplicación Canvas.

Diferencias entre las muestras de conjunto de datos orientada a modelos y aplicaciones de lienzo

Aunque es probable que los dos ejemplos sean los mismos, hay algunas diferencias importantes que se deben tener en cuenta al compilar componentes de código para aplicaciones controladas por modelos en comparación con las aplicaciones de lienzo:

Grid.tsx Diferencias

1. El objeto de columna proporcionado por aplicaciones controladas por modelos proporciona un visualSizeFactor configurado por el creador de aplicaciones para una vista específica. Esto se usa para controlar el tamaño de las columnas y lo usa el código al crear las DetailsList columnas. Las columnas y sus propiedades proporcionadas al componente de código dependen de la vista específica seleccionada en tiempo de ejecución. Esto es diferente de las aplicaciones canvas. Las columnas se configuran para una instancia determinada de un componente de código cuando se agregan a una pantalla.

2. Cuando se agregan componentes de código a una cuadrícula principal de tabla controlada por modelos o a una cuadrícula de registros relacionados, allocatedHeight siempre devolverá -1. El componente de código debe usar un estilo CSS para rellenar 100% del espacio disponible. Cuando se encuentra en subcuadrículas, el fabricante debe proporcionar una altura que configura el componente de código para definir la altura a la que debe expandirse. Más información: trackContainerResize.

3. A diferencia del ejemplo de cuadrícula de la aplicación canvas, se muestra un mensaje superpuesto si no hay registros en el conjunto de datos actual. Esto se debe a que, en las aplicaciones de lienzo, se recomienda dejar la mayor parte posible de la interfaz de usuario a la aplicación de alojamiento, donde las aplicaciones basadas en modelos, el componente de código de conjunto de datos debe ser autónomo.

4. A diferencia de las aplicaciones Canvas, paging.totalResultCount se usa para mostrar el número total de registros del conjunto de datos actual. Si este valor es -1, significa que hay más de 5000 en el conjunto de datos actual.

5. Al ordenar un conjunto de datos que no contiene registros, la siguiente llamada a updateView no contendrá dataset como lo hace en las aplicaciones de lienzo. Dado que la isLoading marca se borra cuando updateView se reciben nuevos datos, el ejemplo no debe establecer el isLoading estado del componente al ordenar conjuntos de datos vacíos; de lo contrario, esta marca nunca se borrará.

index.tsx Diferencias

1. La llamada inicial a updateView no incluirá conjunto de datos en updatedProperties en aplicaciones basadas en modelos. Por este motivo, debe agregar una condición adicional para detectar cuándo actualizar la cuadrícula:

   const initialLoad = !this.sortedRecordsIds && dataset.sortedRecordIds;
   

2. Dado que hay una nueva propiedad de entrada SubGridHeight que establece el creador al añadir el componente de código a una subgrid de formulario, se agrega una comprobación adicional para utilizar este valor para la altura si está definido y cuando no esté en modo de pantalla completa.

   if (!this.isFullScreen && context.parameters.SubGridHeight.raw) {
       allocatedHeight = context.parameters.SubGridHeight.raw;
   }
   

ControlManifest.Input.xml Diferencias

1. Dado que la propiedad de salida FilteredRecordCount no es necesaria (porque el mensaje "Sin registros" se muestra internamente en el componente de código), se elimina. Por lo tanto, no es necesario devolver un valor dentro de getOutputs ni llamar a notifyOutputChanged cuando haya cambiado el recuento de registros.
2. El conjunto HighlightIndicator de propiedades se define como tipo OptionSet , ya que se enlaza a la statuscode columna del conjunto de datos, que se usa para controlar el resaltado de filas.
3. Agregue un archivo CSS al componente de código. Esto proporciona una solución alternativa para garantizar que la interfaz de usuario StickyHeader de Fluent aparezca encima del selector de vistas y otros componentes flotantes de aplicaciones controladas por modelos.

Configuración del componente de código en la cuadrícula principal

Para configurar el componente de código que se va a mostrar en la tabla de contactos dentro de una aplicación controlada por modelos:

1. Abra la tabla Contact (Contacto) dentro del editor de soluciones clásico.

2. Vaya a la pestaña Controles y seleccione Agregar control.

3. Seleccione el componente de código Cuadrícula Dirigida por Modelos de la lista y, a continuación, seleccione Agregar.

4. Establezca las propiedades de la manera siguiente:

   • Campo indicador de resaltado - Se asigna a property-set en el ControlManifest.Input.xml y se utiliza para indicar con qué columna se va a comparar para resaltar las filas. Establézcalo como la columna statuscode.
   • Valor resaltado - este es el valor que se utiliza para compararlo con statuscode y controlar el resaltado de filas. Establézcalo en 2, que es equivalente a Inactivo.
   • Color resaltado : es el color en el que se establecerán las filas si statuscode está inactivo. Establézcalo en un color de su elección para resaltar (por ejemplo, #FDE7E9, que es rojo claro).

   

5. También puede establecer el componente de código para que se muestre como predeterminado para web, teléfono o tableta seleccionando los botones de radio correspondientes.

6. Guardar y publicar.

7. Verá la Cuadrícula dirigida a modelo en la barra de comandos del menú Mostrar como, en la cuadrícula de la tabla Contacto en una aplicación basada en modelo.

   Nota:

   En este momento, la nueva experiencia del Explorador de soluciones no admite la configuración de componentes de código, por lo que debe usar el editor de soluciones clásico para configurarlos dentro de aplicaciones controladas por modelos.

Configuración del componente de código en una vista específica

También puede configurar una vista específica siempre para usar un componente de código para mostrar los registros cuando se selecciona.

1. Abra la tabla Contacto dentro del editor de soluciones clásico.
2. Vaya a Vistas y abra una vista existente o cree una nueva.
3. Seleccione Controles personalizados en el menú derecho.
4. Seleccione Agregar control.
5. Seleccione Cuadrícula controlada por modelos y luego agregar.
6. Configure las propiedades como antes y deje la altura de la subcuadrícula vacía, como antes.
7. Seleccione Aceptar y, a continuación, seleccione Guardar y cerrar.
8. Seleccione Publicar.

Configuración del componente de código en una subcuadrícula de formulario

Los componentes de código se pueden configurar en una subgrid específica de un formulario. Agregará el componente de código al formulario de cuenta en la subcuadrícula de contactos:

1. Abra el formulario Cuenta en el editor de formularios clásico.

2. Seleccione la subgrid Contactos y, a continuación, seleccione Cambiar propiedades.

3. Seleccione la pestaña Controles .

4. Seleccione Agregar control y, a continuación, seleccione el componente de código Cuadrícula impulsada por modelos.

5. Agregue las mismas propiedades que antes, excepto que esta vez proporcione una altura de subcuadrícula de 230.

6. Seleccione el botón de radio para cada factor de forma (Web, teléfono y tableta) para indicar que la Cuadrícula dirigida por modelo debe utilizarse de forma predeterminada. Si desea usar una altura diferente para cada uno de los distintos factores de forma, el mismo control puede agregarse varias veces, usando configuraciones diferentes.

   Nota:

   En los formularios de aplicaciones impulsadas por modelos, el contenedor de componentes de código tendrá una altura limitada en función del rango de filas, pero solo en dispositivos con pantallas más grandes. No estará restringida para factores de forma pequeños, lo que significa que debemos proporcionar una altura específica. Este es el propósito de la propiedad de entrada Sub Grid Height.

   

Una vez configurado en una subgrid, tendrá un aspecto similar al siguiente:

modelos

Artículos relacionados

Tutorial para crear un componente de dataset de aplicación Canvas: Implementar y configurar el componente
Administración del ciclo de vida de las aplicaciones (ALM) con Microsoft Power Platform
Referencia de la API del framework de componentes de Power Apps
Crear el primer componente
Depurar componentes de código