Crear una aplicación para editar tablas en aplicaciones de lienzo

Diseñar una aplicación de productividad para tener datos y funciones relacionados en un solo lugar le permite ser más productivo sin tener que alternar entre las pantallas. Microsoft Excel es un ejemplo que permite editar datos en tiempo real de manera rápida y eficiente.

Utilizando Power Apps puede aplicar el mismo concepto proporcionándolo como interfaz para cualquier origen de datos. También puede personalizarlo aún más.

Este tutorial utiliza los siguientes componentes para crear una aplicación de muestra:

• Un origen de datos (Microsoft Dataverse, también se puede usar Excel)
• Formulario: para nuevos elementos
• Galería: para mostrar elementos existentes y
• Controles de entrada de texto: para actualizar elementos existentes

Requisitos previos

Para seguir este tutorial, necesitará acceder a un entorno de Power Platform y la capacidad de crear tablas en Microsoft Dataverse.

El tutorial utiliza la siguiente estructura para crear la aplicación de muestra:

Para obtener información sobre cómo agregar columnas, consulte Trabajar con columnas de tablas.

Se ha creado un nuevo formulario principal para agregar datos de muestra:

Para obtener información sobre cómo crear un formulario principal con las columnas necesarias, consulte Crear un formulario. Asegúrese de usar el pedido de formulario correcto para agregar registros usando el nuevo formulario.

Paso 1: Crear una aplicación en blanco

Cree una aplicación de lienzo en blanco con el nombre "Aplicación Administración de catálogos" y diseño Tableta.

Paso 2: Agregar un origen de datos

Esta sección muestra cómo agregar una tabla de Dataverse como origen de datos para la aplicación de muestra. También puede utilizar un archivo de Excel de un sitio de SharePoint o OneDrive como origen de datos; o cualquier otro tipo origen de datos de su elección.

1. En el panel izquierdo, seleccione Datos > Agregar datos.

2. Seleccione Ver todas las tablas.

3. Seleccione Tablas editables o la tabla que creó anteriormente.

   

Para obtener más información sobre cómo agregar una conexión a una aplicación de lienzo, consulte Agregar origen de datos.

Paso 3: Configurar un control de formulario

Este paso agrega un control de formulario para agregar nuevos elementos.

1. Seleccione + (Insertar) > Editar formulario.

   

2. En el panel derecho, elija la tabla como origen de datos para el control Editar formulario.

   

3. Use la opción de propiedades Editar campos para seleccionar las columnas que se mostrarán en el control Editar formulario. También puede cambiar el orden de las columnas según corresponda.

   

4. Elija Modo predeterminado para el formulario Nuevo.

   

5. Ajuste las propiedades Ancho, Altura para el tamaño de las tarjetas de datos para llenar el lienzo según corresponda.

6. En el panel de la izquierda, seleccione + (insertar) > Botón.

7. Actualice el texto del botón a Añadir producto.

8. Seleccione la propiedad OnSelect para el control del botón en la parte superior izquierda de la pantalla.

9. Escriba la fórmula siguiente en la barra de fórmulas.

   SubmitForm(Form1);
   NewForm(Form1);
   

   • La función SubmitForm envía los detalles del nuevo producto a la tabla de Dataverse.
   • NewForm cambia el modo del formulario a un nuevo formulario para agregar nuevos productos después de enviar los detalles del nuevo producto.
   • Form1 en esta fórmula es el nombre del control Editar formulario agregado anteriormente. Actualice el nombre del formulario en esta fórmula si el nombre del formulario es diferente.

   

Paso 4: Configurar la galería como tabla editable

Este paso agrega una galería vertical en blanco para editar los elementos como una tabla editable.

1. En el panel izquierdo, seleccione + (Insertar) > Diseño > Galería vertical en blanco.

2. Seleccione la tabla de Dataverse como origen de datos.

3. Cambie el tamaño de la galería para ocupar la mitad restante de todo el lienzo, ya que esta galería contendrá todas las columnas editables de origen de datos.

4. Seleccione Editar galería.

   

5. En el panel de la izquierda, seleccione + (insertar) > Entrada > Entrada de texto.

6. Alinee la galería con las siguientes acciones:

   

   1. Mueva la fila superior para el control de entrada de texto a la esquina superior izquierda dentro de la galería. Mover esta fila superior mueve automáticamente las filas restantes para la misma columna.
   2. Cambie el tamaño de la altura de la primera fila dentro de la galería para que ocupe el tamaño de la primera fila que acaba de mover a la parte superior izquierda.

   Al final, debería ver todas las filas apiladas en el lado izquierdo de la galería.

7. Actualice la fórmula de la propiedad Default para la primera fila de entrada de texto dentro de la galería:

   ThisItem.Product
   

   • ThisItem en esta fórmula se relaciona con el elemento dentro del origen de datos seleccionado, que en este ejemplo es la tabla de Dataverse.
   • "Producto" es el nombre de la columna dentro de la tabla.
   • Cuando esta fórmula se actualiza para la primera fila de la galería, actualiza automáticamente toda la columna con los nombres de los productos. Si ve un error, compruebe si ha conectado la galería a la tabla de Dataverse.

   

8. Repita los pasos anteriores para agregar un control de entrada de texto para cada columna que desee que aparezca dentro de la aplicación como campo editable. Asegúrese de elegir las columnas correctas en la fórmula reemplazando "Producto" con los nombres de columna adecuados.

   Sugerencia

   Para cambiar el tamaño del ancho, use la propiedad Width o arrastre usando los botones alrededor de la primera fila en cada columna.

9. Seleccione la primera fila de la primera columna dentro de la galería y agregue la siguiente fórmula a la propiedad OnChange con cambios en los nombres de las columnas y los controles según corresponda:

   Patch('Editable tables',ThisItem,{Product:TextInput8.Text})
   

   • La función Patch en esta fórmula actualiza la tabla seleccionada como origen de datos con los valores cuando se cambia.
   • "Tablas editables" es el nombre de origen de datos de muestra.
   • ThisItem se relaciona con el elemento dentro del origen de datos seleccionado para esta columna.
   • "Producto" es el nombre de la columna dentro del origen de datos seleccionado.
   • "TextInput8" es el nombre del control de entrada de texto agregado a la galería adjunta a la columna "Producto" para el origen de datos seleccionado.
   • "Texto" para "TextInput8" es el texto introducido en la celda seleccionada dentro de la tabla editable en el lienzo.

   

10. Repita el paso anterior para cada control de entrada de texto agregado para el resto de las columnas del origen de datos conectado. Asegúrese de que la fórmula esté actualizada para utilizar los nombres de control y columna correctos.

Paso 5: Configurar las opciones de edición y cancelación

Este paso agrega las opciones para editar y cancelar el progreso de la edición. La galería que tiene controles de entrada de texto editables de forma predeterminada puede estar sujeta a actualizaciones no intencionales. Tener una opción de edición explícita y luego detener la capacidad de edición asegura que las ediciones siempre se esperen.

1. Seleccione Insertar desde el menú superior > Iconos y agregue dos íconos: Editar y Cancelar (notificación).

   

2. Seleccione Vista de árbol en el panel izquiero y, después, seleccione Aplicación.

3. Seleccione la propiedad OnStart de la aplicación y agregue la siguiente fórmula con cambios en el nombre de la galería según corresponda:

   Gallery2.DisplayMode = "galleryDisplayMode";
   Set(galleryDisplayMode, DisplayMode.Disabled);
   

   • "Gallery2" en esta fórmula es el nombre de la galería.
   • DisplayMode es la propiedad DisplayMode de la galería seleccionada.
   • "galleryDisplayMode" es la nueva variable que crea esta fórmula para almacenar el valor del modo de visualización de la galería.
   • La función Set establece la variable "galleryDisplayMode" definida en la línea anterior con el valor de "Disabled" usando "DisplayMode.Disabled". Con el modo de visualización deshabilitado, la galería no se puede editar de forma predeterminada cuando se inicia la aplicación (aplicación OnStart).

4. Seleccione la galería en vertical en blanco y, luego, seleccione la propiedad DisplayMode.

5. Actualice el valor de la propiedad de Edit a galleryDisplayMode. Este cambio garantiza que el modo de la galería siempre se defina utilizando el valor de la variable "galleryDisplayMode" creada en el paso anterior.

6. Actualice las propiedades y fórmulas de los iconos como se muestra a continuación:

   Icono	Propiedad	Fórmula
   Edición	OnSelect	Set(galleryDisplayMode, DisplayMode.Edit)
   Edición	Visible	galleryDisplayMode = DisplayMode.Disabled
   Cancelar	OnSelect	Set(galleryDisplayMode, DisplayMode.Disabled)
   Cancelar	Visible	galleryDisplayMode = DisplayMode.Edit

   • La función Set establece el modo de visualización de la galería según el icono seleccionado.
   • La variable "galleryDisplayMode" controla la visibilidad de los iconos de edición o cancelación. Cuando la galería es editable, solo aparece el botón Cancelar. Y solo aparece el botón de edición cuando la galería está deshabilitada.

7. Superponga los iconos de edición y cancelación, ya que administramos la visibilidad de ambos iconos según el estado de la galería.

   

   Sugerencia

   Puedes usar el botón Versión preliminar en la parte superior derecha de la pantalla para obtener una vista previa de la aplicación o use la tecla F5 en el teclado. Otra alternativa rápida para realizar pruebas es presionar el la tecla Alt en el teclado y seleccionar el botón mientras mantiene presionada la tecla. Este método también simula la funcionalidad de versión preliminar de la aplicación para la selección específica mientras la tecla permanece presionada.

Paso 6: Agregar la capacidad de búsqueda

A medida que aumentan los datos del origen de datos conectado, resulta difícil encontrar una fila específica. Este paso agrega capacidad de búsqueda a la aplicación para filtrar la galería con palabras clave buscadas, lo que facilita la búsqueda de datos relevantes.

1. Agregue un control de entrada de texto en el medio del lienzo, encima de la galería.

2. Actualice la propiedad Items para la galería con la siguiente fórmula en lugar del nombre de la tabla, reemplazando la tabla y los nombres de control según corresponda.

   If(IsBlank(TextInput15.Text),'Editable tables',Filter('Editable tables',(TextInput15.Text in Product) || TextInput15.Text in Segment))
   

   • La función If comprueba la condición si los términos de búsqueda están especificados o en blanco. La galería se llena según los elementos enumerados.
   • La función IsBlank comprueba la condición si el texto de búsqueda está especificado o no.
   • "Tablas editables" es el nombre del origen de datos de muestra conectado en este ejemplo. Este valor se establece como predeterminado si no se especifica término de búsqueda.
   • La función Filter filtra los elementos de la galería en función de los criterios de texto establecidos dentro de esta función. Esta función se utiliza para filtrar la galería según el término buscado.
   • "TextInput15" es el nombre del control de entrada de texto que se utiliza como cuadro de búsqueda para filtrar la galería.
   • "Producto" y "Segmento" son los nombres de las columnas que se buscan usando el texto definido en el control "TextInput15" usando la sintaxis .Text.
   • "En" comprueba el valor del control de entrada de texto en la columna especificada en el origen de datos conectado.
   • "||" es la condición "O", lo que significa que la búsqueda debe realizarse para las columnas Producto o Segmento. Asimismo, puede actualizar la fórmula para que se adapte a sus necesidades de negocio específicas.

   

   Sugerencia

   Puede conservar funciones antiguas o agregar comentarios usando "//" dentro de la barra de fórmulas. Este método puede ser más útil para fórmulas más complejas o para mantener la funcionalidad anterior en caso de que desee revertir más tarde.

Paso 7: Cambios varios, como la marca, la información del perfil y el restablecimiento

La aplicación de muestra se completa con la funcionalidad esperada en este tutorial. Sin embargo, se pueden agregar consideraciones adicionales, como la capacidad de restablecer el control de entrada de texto del filtro, la marca, como el título de la galería y la aplicación, y los detalles del perfil de usuario. También puede hacer más, comience con Agregar y configurar controles en aplicaciones de lienzo.

La siguiente tabla resume toda la información de marca, perfil y restablecimiento agregada a la aplicación de muestra. Use el método descrito anteriormente en este artículo para trabajar con diferentes controles y propiedades. Asegúrese de reemplazar los nombres de la tabla, el conector y el control según corresponda.

Funcionalidad	Control	Propiedades	Información adicional
Banner/etiqueta de la aplicación en la parte superior de la pantalla	Etiqueta de texto	Texto: "Gestión de catálogos" Tamaño de la fuente: 28 Color de relleno: azul Alineación de texto: alineación central	Cambie todos los valores según corresponda.
Agregar el nombre para mostrar del usuario a la parte superior derecha de la pantalla	Etiqueta de texto	Texto - Office365Users.MyProfileV2().displayName	Conéctese a Microsoft 365 primero agregando una conexión a Usuarios de Office 365.
Agregar la foto de perfil de usuario en el lado izquierdo del usuario nombre en el lado superior derecho de la pantalla	Imagen	Imagen - Office365Users.UserPhotoV2(Office365Users.MyProfileV2().userPrincipalName)	Conéctese a Microsoft 365 primero agregando una conexión a Usuarios de Office 365.
Restablecer el cuadro de texto de búsqueda en la esquina superior izquierda de la pantalla	Icono de tipo "Recargar"	OnSelect - Reset(TextInput15) donde "TextInput15" es el control de entrada de texto utilizado como cuadro de búsqueda.	Cuando se selecciona, restablecerá el cuadro de texto de búsqueda y la galería mostrará todos los datos de forma predeterminada.
Actualizar el texto del botón Añadir producto	Agregar el botón de producto	Texto: "Agregar nuevo producto"	Cambie según corresponda.
Agregar una etiqueta encima de la galería, en el lado izquierdo del cuadro de entrada de búsqueda para indicar los productos actuales	Etiqueta de texto	Texto: "Productos actuales" Tamaño de la fuente: 16 Grosor de fuente: negrita	Cambie según corresponda.
Agregar texto de sugerencia para el cuadro de entrada de texto de búsqueda	Entrada de texto	Texto de sugerencia: "Buscar productos o segmentos"	Cambie según corresponda y asegúrese de que la lista de campos (como Productos, Segmentos) se alinee con los nombres de las columnas en su origen de datos.

Por ejemplo, la pantalla completa se ve así con los controles y propiedades configurados anteriormente:

Paso 8: Guardar, publicar y compartir

Ahora que ha completado la aplicación de muestra, guarde, publique y comparta la aplicación dentro de su organización o con invitados.

Consultar también

• Referencia de control
• Trabajar con formulas

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).