Comentarios

Engadir táboas editables en aplicacións de lenzo

  • Artigo
  • 5 minutos de lectura

Deseñar unha aplicación de produtividade para ter datos e funcións relacionados nun mesmo lugar permítelle acadar máis sen ter que cambiar entre as pantallas. Microsoft Excel é un destes exemplos que permite editar datos en tempo real de xeito rápido e eficiente.

Usando Power Apps, pode aplicar o mesmo concepto proporcionándoo como front-end a calquera orixe de datos. Tamén pode personalizalo aínda máis.

Administración do catálogo de administración: demo da aplicación de mostra.

Este titorial usa os seguintes compoñentes para crear unha aplicación de exemplo:

  • A orixe de datos (Microsoft Dataverse, tamén pode usar Excel no seu lugar)
  • Formulario—Para novos elementos
  • Galería—Para amosar elementos existentes e
  • Controis de entrada de texto—Para actualizar elementos existentes

Requisitos previos

Para seguir este tutorial, necesitará acceder a un contorno Power Platform, e a capacidade de crear táboas en Microsoft Dataverse.

O titorial usa a seguinte estrutura para crear a aplicación de exemplo:

Columnas de Dataverse para a táboa de mostra.

Para obter información sobre como engadir columnas, consulte Traballar con columnas de táboa.

Creouse un novo formulario principal para engadir datos de mostra:

Novo formulario principal para engadir datos á táboa Dataverse.

Para saber como crear un formulario principal coas columnas necesarias, consulte Crear un formulario. Asegúrese de usar a orde de formulario correcta para engadir rexistros usando o novo formulario.

Paso 1: crear unha aplicación en branco

Crear un aplicación de lenzo en branco co nome "aplicación de xestión de catálogos" e Tablet maquetación.

Paso 2: Engada unha nova orixe de datos

Esta sección mostra como engadir unha táboa de Dataverse como orixe de datos para a aplicación de mostra. Tamén pode usar un ficheiro Excel desde un sitio SharePoint ou OneDrive como a orixe de datos; ou calquera outro tipo de orixe de datos que escolla.

  1. No panel esquerdo, seleccione Datos > Engadir datos.

  2. Seleccione Ver todas as táboas.

  3. Seleccione Táboas editables ou a táboa que creou anteriormente.

    Engadir táboa de Dataverse como orixe de datos.

Para obter máis información sobre como engadir unha conexión a unha aplicación de lenzo, consulte Engadir orixe de datos.

Paso 3: configurar un control de formulario

Este paso engade un control de formulario para engadir novos elementos.

  1. Seleccione + (Inserir) > Editar formulario.

    Engadir control Editar formulario.

  2. No panel dereito, escolla a táboa como orixe de datos para o control do formulario de edición.

    Escolla a táboa como orixe de datos para o control do formulario de edición.

  3. Use a opción de propiedades Editar campos para seleccionar as columnas que se amosarán no control Editar formulario. Tamén pode cambiar a orde das columnas segundo corresponda.

    Editar campos no control Editar formulario.

  4. Escolla o Modo predeterminado para o formulario en Novo.

    Escolla o modo de control de formulario como Novo.

  5. Axuste as propiedades Ancho, Altura para o tamaño das tarxetas de datos para encher o lenzo segundo corresponda.

  6. No panel esquerdo, seleccione + (Inserir) > Botón.

  7. Actualice o texto do botón a Engadir produto.

  8. Seleccione a propiedade OnSelect para o control do botón na parte superior esquerda da pantalla.

  9. Introduza a seguinte fórmula na barra de fórmulas.

    SubmitForm(Form1);
NewForm(Form1);
    • A función Enviarformulario envía os detalles do novo produto á táboa Dataverse.
    • NewForm cambia o modo do formulario de novo a novo formulario para engadir novos produtos despois de enviar novos detalles do produto.
    • Formulario1 nesta fórmula está o nome do control de Editar formulario engadido anteriormente. Actualice o nome do formulario nesta fórmula se o nome do formulario é diferente.

    Botón OnSelect - novo formulario.

Este paso engade unha galería vertical en branco para editar os elementos como unha táboa editable.

  1. No panel esquerdo, seleccione + (Inserir) > Deseño > Galería vertical en branco.

  2. Seleccione a táboa desde Dataverse como a orixe de datos.

  3. Cambie o tamaño da galería para facerse coa metade restante de todo o lenzo, xa que esta galería conterá todas as columnas editables da orixe de datos.

  4. Seleccione Editar galería.

    Editar galería vertical en branco.

  5. No panel esquerdo, seleccione + (Inserir) > Entrada > Entrada de texto.

  6. Aliñe a galería coas seguintes accións:

    Aliñar galería vertical en branco.

    1. Mova a fila situada na parte superior para o control de entrada de texto á esquina superior esquerda da galería. Ao mover esta fila situada máis arriba móvense automaticamente as filas restantes para a mesma columna.
    2. Redimensione a altura da primeira fila dentro da galería para ocupar o tamaño da primeira fila que acaba de mover á parte superior esquerda.

    Ao final, debe ver todas as filas amontoadas no lado esquerdo da galería.

  7. Actualice a fórmula da propiedade Predeterminado para a primeira fila de entrada de texto na galería:

    ThisItem.Product
    • ThisItem nesta fórmula refírese ao elemento dentro da orixe de datos seleccionada; que neste exemplo é a táboa Dataverse.
    • "Produto" é o nome da columna da táboa.
    • Cando se actualiza esta fórmula para a primeira fila da galería, actualiza automaticamente toda a columna cos nomes dos produtos. Se ve un erro, comprobe se conectou a galería á táboa Dataverse.

    Produto visto na galería coa fórmula.

  8. Repita os pasos anteriores para engadir un control de entrada de texto para cada columna que desexa que apareza dentro da aplicación como campo editable. Asegúrese de escoller as columnas correctas na fórmula substituíndo "Produto" polos nomes de columna adecuados.

    Suxestión

    Para redimensionar o ancho, use a propiedade Ancho ou o arrastre empregando os botóns arredor da primeira fila de cada columna.

  9. Seleccione a primeira fila da primeira columna dentro da galería e engada a seguinte fórmula á propiedade OnChange con cambios nos nomes de columnas e controis segundo corresponda:

    Patch('Editable tables',ThisItem,{Product:TextInput8.Text})
    • A función Parche desta fórmula actualiza a táboa seleccionada como orixe de datos cos valores cando se cambia.
    • "Táboas editables" é o exemplo de nome orixe de datos.
    • ThisItem refírese ao elemento dentro da orixe de datos seleccionada para esta columna.
    • "Produto" é o nome da columna da orixe de datos seleccionada.
    • "TextInput8" é o nome do control de entrada de texto engadido á galería anexa á columna "Produto" para a orixe de datos seleccionada.
    • "Texto" para "Entradadetexto8" é o texto introducido na cela seleccionada dentro da táboa editable no lenzo.

    Fórmula OnChange para a galería.

  10. Repita o paso anterior para cada control de entrada de texto engadido para o resto de columnas da orixe de datos conectada. Asegúrese de que a fórmula está actualizada para usar os nomes de columna e control correctos.

Paso 5: configurar as opcións de edición e cancelación

Este paso engade as opcións para editar e cancelar o progreso da edición. A galería con controis de entrada de texto editables por defecto pode estar suxeita a actualizacións involuntarias. Ter unha opción de edición explícita e, a continuación, para deter a capacidade de edición, garante que sempre se esperen as edicións.

  1. Seleccione Inserir no menú superior > Iconas e engada dúas iconas - Editar e Cancelar (insignia).

    Posibilidade de editar ou cancelar.

  2. Seleccione Vista en árbore no panel esquerdo e logo seleccione Aplicación.

  3. Seleccione a propiedade OnStart da aplicación e engada a seguinte fórmula con cambios no nome da galería segundo corresponda:

    Gallery2.DisplayMode = "galleryDisplayMode";
Set(galleryDisplayMode, DisplayMode.Disabled);
    • "Galería2" nesta fórmula é o nome da galería.
    • DisplayMode é a propiedade DisplayMode para a galería seleccionada.
    • "galleryDisplayMode" é a nova variable que crea esta fórmula para almacenar o valor do modo de visualización da galería.
    • A función Axustar define a variable "galleryDisplayMode" definida na liña anterior co valor de "Disabled" usando "DisplayMode.Disabled". Co modo de visualización desactivado, a galería non se pode editar de xeito predeterminado cando se inicia a aplicación (aplicación OnStart).

  4. Seleccione a galería vertical en branco e logo seleccione a propiedade DisplayMode.

  5. Actualice o valor da propiedade de Edit a galleryDisplayMode. Este cambio garante que o modo da galería estea sempre definido usando o valor da variable "galleryDisplayMode" creada no paso anterior.

  6. Actualice as propiedades e fórmulas das iconas como se indica a continuación:

    Icon Propiedade Fórmula
    Editar OnSelect Set(galleryDisplayMode, DisplayMode.Edit)
    Editar Visible galleryDisplayMode = DisplayMode.Disabled
    Cancelar OnSelect Set(galleryDisplayMode, DisplayMode.Disabled)
    Cancelar Visible galleryDisplayMode = DisplayMode.Edit
    • A función Axustar define o modo de visualización da galería en función da icona seleccionada.
    • A variable "galleryDisplayMode" controla a visibilidade das iconas de edición ou cancelación. Cando a galería é editable, só aparece o botón de cancelación. E só aparece o botón de edición cando a galería está desactivada.

  7. Superpoña as iconas de editar e cancelar, xa que estamos a xestionar a visibilidade das dúas iconas dependendo do estado da galería.

    Editar ou cancelar cambiando á galería.

    Suxestión

    Pode usar o botón Vista previa desde a parte superior dereita da pantalla para previsualizar a aplicación ou usar a tecla F5 do teclado. Outra alternativa rápida para probar é premer o botón Alt do teclado e seleccionar o botón mantendo a tecla premida. Este método tamén simula a funcionalidade de vista previa da aplicación para a selección específica mentres se mantén premida a tecla.

Paso 6: engadir a capacidade de busca

A medida que crecen os datos da orixe de datos conectada, faise difícil atopar unha fila específica. Este paso engade capacidade de busca á aplicación para filtrar a galería con palabras clave buscadas, facilitando a busca de datos relevantes.

  1. Engada un control de entrada de texto no medio do lenzo, sobre a galería.

  2. Actualice a propiedade Elementos para a galería coa seguinte fórmula no canto do nome da táboa, substituíndo a táboa e controle os nomes segundo corresponda.

    If(IsBlank(TextInput15.Text),'Editable tables',Filter('Editable tables',(TextInput15.Text in Product) || TextInput15.Text in Segment))
    • A función Se comproba se se especifican os termos de busca ou se están en branco. A galería énchese dependendo dos elementos enumerados.
    • A función IsBlank comproba se se especifica o texto de busca ou non.
    • "Táboas editables" é o nome da orixe de datos de mostra conectada neste exemplo. Este valor establécese como predeterminado se non se especifica ningún termo de busca.
    • A función Filtro filtra os elementos da galería en función dos criterios de texto establecidos nesta función. Esta función úsase para filtrar a galería en función do termo buscado.
    • "TextInput15" é o nome do control de entrada de texto que se usa como caixa de busca para filtrar a galería.
    • "Produto" e "Segmento" son os nomes das columnas que se buscan usando o texto definido no control "Entradadetexto15" usando a sintaxe .Text.
    • "En" comproba o valor do control de entrada de texto na columna especificada na orixe de datos conectada.
    • "||" é a condición "OU", o que significa que a busca se debe realizar nas columnas Produto ou Segmento. Do mesmo xeito, pode actualizar a fórmula para adaptala ás súas necesidades empresariais específicas.

    Filtrar a galería en función dos criterios definidos.

    Suxestión

    Pode conservar funcións antigas ou engadir comentarios usando "//" dentro da barra de fórmulas. Este método pode ser máis útil para fórmulas máis complexas ou para manter as funcións máis antigas por se queremos volver máis tarde.

Paso 7: cambios diversos como marca, información de perfil e restablecemento

A aplicación de mostra está completa coa funcionalidade esperada neste titorial. Non obstante, pódense engadir consideracións adicionais—como—a posibilidade de restablecer o control de entrada de texto do filtro, a marca como o título da galería e a aplicación e os detalles do perfil de usuario. Tamén pode facer máis, comezando con Engadir e configurar controis nas aplicacións de lenzo.

A seguinte táboa resume toda a información de marca, perfil e restablecemento engadida á aplicación de mostra. Use o método descrito anteriormente neste artigo para traballar con controis e propiedades diferentes. Asegúrese de substituír a táboa, o conector e os nomes de control segundo corresponda.

Capacidade CTRL Propiedades Información adicional
Faixa/etiqueta da aplicación na parte superior da pantalla Etiqueta de texto Texto - "Xestión do catálogo de administradores"
Tamaño do tipo de letra - 28
Cor de recheo - Azul
Aliñamento do texto - Aliñar ao centro		 Cambie todos os valores segundo corresponda.
Engadir o nome de pantalla do usuario á parte superior dereita da pantalla Etiqueta de texto Mensaxe de texto - Office365Users.MyProfileV2().displayName Conectar a Microsoft 365 primeiro engadindo unha conexión a Office 365 Usuarios.
Engada unha foto de perfil de usuario na parte esquerda do nome de pantalla do usuario na parte superior dereita da pantalla Image Image - Office365Users.UserPhotoV2(Office365Users.MyProfileV2().userPrincipalName) Conectar a Microsoft 365 primeiro engadindo unha conexión a Office 365 Usuarios.
Restableza a caixa de texto de busca na esquina superior esquerda da pantalla Icona do tipo "Recargar" OnSelect - Reset(TextInput15) onde "Entradadetexto15" é o control de entrada de texto usado como caixa de busca. Cando se seleccione, restablecerá a caixa de texto de busca, provocando que a galería amose todos os datos de xeito predeterminado.
Actualice o texto do botón Engadir produto Botón Engadir produto Texto - "Engadir novo produto" Cambia segundo corresponda.
Engada unha etiqueta sobre a galería, á esquerda da caixa de entrada de busca para significar os produtos actuais Etiqueta de texto Texto - "Produtos actuais"
Tamaño do tipo de letra - 16
Espesura do tipo de letra - Negra		 Cambia segundo corresponda.
Engadir texto de axuda para a caixa de entrada do texto de busca Text input Texto do consello - "Buscar produtos ou segmentos" Cambie segundo corresponda e asegúrese de que a lista de campos (como Produtos, segmentos) estea aliñada cos nomes das columnas da súa orixe de datos.

Por exemplo, a pantalla completada ten este aspecto cos controis e as propiedades configurados anteriormente:

Versión final da aplicación con todos os controis e propiedades configurados.

Paso 8: gardar, publicar e compartir

Agora que completou a aplicación de mostra, garde, publique e comparta a aplicación dentro da súa organización ou con convidados.

Consulte tamén

Nota

Pode indicarnos as súas preferencias para o idioma da documentación? Realice unha enquisa breve. (teña en conta que esa enquisa está en inglés)

Esta enquisa durará sete minutos aproximadamente. Non se recompilarán datos persoais (declaración de privacidade).