Comparteix a través de

Crear una aplicació per editar taules en aplicacions de llenç

El disseny d'una aplicació de productivitat de manera que tingui les dades i funcions relacionades en un sol lloc us permet aconseguir més resultats sense haver de canviar de pantalla repetidament. El Microsoft Excel és un exemple que permet editar dades en temps real de manera ràpida i eficient.

Amb el Power Apps, podeu aplicar el mateix concepte proporcionant-lo com a extrem a qualsevol font de dades. També el podeu personalitzar encara més.

Administració del catàleg d'administrador: demostració d'aplicacions d'exemple

En aquest tutorial s'utilitzen els components següents per fer una aplicació d'exemple:

  • Una font de dades (el Microsoft Dataverse; també podeu utilitzar l'Excel en el seu lloc)
  • Un formulari:— per a elements nous
  • Una galeria — per visualitzar els elements existents i
  • Els controls d'entrada de text— per actualitzar els elements existents

Requisits previs

Per seguir aquest tutorial, s'haurà d'accedir a un entorn del Power Platform i cal tenir capacitat per crear taules al Microsoft Dataverse.

En aquest tutorial s'utilitza l'estructura següent per crear l'aplicació d'exemple:

Columnes del Dataverse per a la taula d'exemple

Per obtenir més informació sobre com afegir columnes, vegeu Treballar amb columnes de taula.

S'ha creat un formulari principal nou per afegir dades d'exemple:

Formulari principal nou per afegir dades a la taula del Dataverse

Per obtenir més informació sobre com crear un formulari principal amb les columnes necessàries, vegeu Crear un formulari. Assegureu-vos d'utilitzar l'ordre de formulari correcte per afegir registres mitjançant el formulari nou.

Pas 1: Crear l'aplicació en blanc.

Creeu una aplicació de llenç en blanc amb la disposició de Tauleta i el nom "Aplicació de gestió de projectes".

Pas 2: Afegir una font de dades.

Aquesta secció mostra com afegir una taula del Dataverse com a font de dades per a l'aplicació d'exemple. També podeu utilitzar un fitxer de l'Excel des d'un lloc del SharePoint o el OneDrive com a font de dades, o bé qualsevol altre tipus de font de dades que preferiu.

  1. A la subfinestra esquerra, seleccioneu Dades > Afegeix dades.

  2. Seleccioneu Mostra totes les taules.

  3. Seleccioneu Taules editables o la taula que heu creat abans.

    Afegiu la taula del Dataverse com la font de dades.

Per obtenir més informació sobre com afegir una connexió a una aplicació de llenç, vegeu Afegir font de dades.

Pas 3: Configurar un control de formulari.

Aquest pas afegeix un control de formulari per afegir elements nous.

  1. Seleccioneu + (Insereix) > Formulari d'edició.

    Afegiu el control del formulari d'edició.

  2. A la subfinestra dreta, trieu la taula com la font de dades pel control del formulari d'edició.

    Trieu la taula com la font de dades pel control del formulari d'edició.

  3. Utilitzeu l'opció de les propietats Edita els camps per seleccionar les columnes que es mostraran al control del formulari d'edició. També podeu canviar l'ordre de les columnes segons calgui.

    Editar camps al control del formulari d'edició.

  4. Trieu el Mode per defecte del formulari a Crea.

    Trieu el mode de control del formulari com a Crea.

  5. Ajusteu les propietats de l'amplada i l'alçada per la mida de les targetes de dades per emplenar el llenç segons calgui.

  6. A la subfinestra esquerra, seleccioneu + (Insereix) > Botó.

  7. Actualitzeu el text del botó a Afegeix un producte.

  8. Seleccioneu la propietat OnSelect per al botó de control de la part superior esquerra de la pantalla.

  9. Introduïu la fórmula següent a la barra de fórmules.

    SubmitForm(Form1);
NewForm(Form1);
    • La funció SubmitForm envia la informació nova del producte a la taula del Dataverse.
    • NewForm canvia el mode del formulari de nou a formulari nou per afegir productes nous després d'enviar nous detalls dels productes.
    • El Form1 d'aquesta fórmula és el nom del control del formulari d'edició afegit abans. Actualitzeu el nom del formulari en aquesta fórmula si el nom del formulari és diferent.

    Botó OnSelect: formulari nou

Aquest pas afegeix una galeria vertical en blanc per editar els elements com una taula editable.

  1. A la subfinestra esquerra, seleccioneu + (Insereix) > Disposició > Galeria vertical enblanc.

  2. Seleccioneu la taula del Dataverse com a font de dades.

  3. Torneu a canviar la mida de la galeria per afegir la meitat restant del llenç sencer, ja que aquesta galeria inclourà totes les columnes editables de la font de dades.

  4. Seleccioneu Edita la galeria.

    Editar la galeria vertical en blanc.

  5. A la subfinestra esquerra, seleccioneu + (Insereix) > Entrada > Entrada de text.

  6. Alinea la galeria amb les accions següents:

    Alinear la galeria vertical en blanc.

    1. Desplaçar la fila superior pel control d'entrada de text a la cantonada superior esquerra de la galeria. En desplaçar aquesta fila superior, la resta de files es desplaça automàticament per la mateixa columna.
    2. Canviar l'alçada de la primera fila a la galeria per ocupar la mida de la primera fila que acabeu de moure a dalt a l'esquerra.

    En finalitzar, hauríeu de veure totes les files apilades a l'esquerra de la galeria.

  7. Actualitzeu la fórmula de les propietats Per defecte per la primera fila d'entrada de text de la galeria:

    ThisItem.Product
    • ThisItem en aquesta fórmula es relaciona amb l'element de la font de dades, que en aquest exemple és la taula del Dataverse.
    • "Producte" és el nom de la columna de la taula.
    • Quan s'actualitza aquesta fórmula per a la primera fila de la galeria, actualitza automàticament tota la columna amb els noms dels productes. Si es mostra un error, comproveu si heu connectat la galeria a la taula del Dataverse.

    El producte tal com es mostra a la galeria amb la fórmula

  8. Repetiu els passos anteriors per afegir un control d'entrada de text per cada columna que voleu que aparegui a l'aplicació com a camp editable. Assegureu-vos de triar les columnes correctes a la fórmula al que substitueix "Producte" amb els noms de columna adequats.

    Suggeriment

    Per canviar l'amplada, utilitzeu la propietat Amplada o arrossegueu-la amb els botons de la primera fila de cada columna.

  9. Seleccioneu la primera fila de la primera columna de la galeria i afegiu la fórmula següent a la propietat OnChange amb els canvis a la columna i els noms de control segons calgui:

    Patch('Editable tables',ThisItem,{Product:TextInput8.Text})
    • La funció de pedaç d'aquesta fórmula actualitza la taula seleccionada com la font de dades amb els valors quan es canvia.
    • "Taules editables" és el nom de la font de dades d'exemple.
    • ThisItem es relaciona amb l'element de la font de dades seleccionada per aquesta columna.
    • "Producte" és el nom de la columna de la taula de la font de dades seleccionada.
    • "TextInput8" és el nom del control d'entrada de text que s'afegeix a la galeria adjunta a la columna "Producte" de la font de dades seleccionada.
    • "Text" per a "TextInput8" és el text introduït a la cel·la seleccionada dins de la taula editable del llenç.

    La fórmula OnChange per a la galeria

  10. Repetiu el pas anterior per a cada control d'entrada de text afegit per a la resta de columnes de la font de dades connectada. Assegureu-vos que la fórmula està actualitzada per utilitzar els noms de columna i de control correctes.

Pas 5: Configurar les opcions d'edició i de cancel·lació.

Aquest pas afegeix les opcions per editar i cancel·lar el progrés de l'edició. La galeria que té controls d'entrada de text editables per defecte pot estar subjecte a actualitzacions no intencionals. Disposar d'una opció d'edició explícita i, a continuació, aturar la capacitat d'edició garanteix que no es faran edicions inesperades.

  1. Seleccioneu Insereix al menú superior > Icones i afegiu dues icones: Edita i Cancel·la (distintiu).

    Capacitat d'editar o cancel·lar

  2. Seleccioneu la Visualització en arbre des de la subfinestra esquerra i, a continuació, seleccioneu Aplicació.

  3. Seleccioneu la propietat OnStart de l'aplicació i afegiu la fórmula següent amb els canvis al nom de la galeria segons calgui:

    Gallery2.DisplayMode = "galleryDisplayMode";
Set(galleryDisplayMode, DisplayMode.Disabled);
    • En aquesta fórmula, "Gallery2" és el nom de la galeria.
    • DisplayMode és la propietat DisplayMode de la galeria seleccionada.
    • "GalleryDisplayMode" és la nova variable que aquesta fórmula crea per emmagatzemar el valor del mode de visualització de la galeria.
    • La funció Set defineix la variable "galleryDisplayMode" definida a la línia anterior amb el valor d'"Inhabilitat" amb "DisplayMode.Disabled". Amb el mode de visualització inhabilitat, la galeria no es pot editar per defecte quan s'inicia l'aplicació (app OnStart).

  4. Seleccioneu la galeria vertical en blanc i, a continuació, seleccioneu la propietat DisplayMode.

  5. Actualitzeu el valor de propietat Edit a galleryDisplayMode. Aquest canvi garanteix que el mode de la galeria sempre es defineix amb el valor de la variable "galleryDisplayMode" creada en el pas anterior.

  6. Actualitzeu les propietats i les fórmules de les icones de la següent manera:

    Icon Propietat Fórmula
    Edició OnSelect Set(galleryDisplayMode, DisplayMode.Edit)
    Edició Visible galleryDisplayMode = DisplayMode.Disabled
    Cancel·la OnSelect Set(galleryDisplayMode, DisplayMode.Disabled)
    Cancel·la Visible galleryDisplayMode = DisplayMode.Edit
    • La funció Set defineix el mode de visualització de la galeria en funció de la icona que se seleccioni.
    • La variable "galleryDisplayMode" controla la visibilitat de les icones d'edició o cancel·lació. Quan la galeria es pot editar, només apareix el botó de cancel·lació. Quan la galeria està inhabilitada, apareix el botó d'edició.

  7. Les icones d'edició i cancel·lació se superposen, ja que gestionem la visibilitat de les dues icones en funció de l'estat de la galeria.

    Editar o cancel·lar el canvi a la galeria.

    Suggeriment

    Podeu utilitzar el botó Visualització prèvia des de la part superior dreta de la pantalla per obtenir una visualització prèvia de l'aplicació o bé utilitzar la tecla F5 del teclat. Una altra alternativa ràpida per a les proves és prémer la tecla Alt del teclat i seleccionar el botó mentre es manté la tecla premeda. Aquest mètode també simula la funcionalitat de visualització prèvia de l'aplicació per a la selecció específica mentre es manté la tecla premuda.

Pas 6: Afegir la capacitat de cerca.

A mesura que les dades de la font de dades connectada va creixent, és difícil trobar una fila concreta. Aquest pas afegeix capacitat de cerca a l'aplicació per filtrar la galeria amb paraules clau cercades que faciliten la cerca de dades rellevants.

  1. Afegiu un control d'entrada de text al centre del llenç, a sobre de la galeria.

  2. Actualitzeu la propietat Elements de la galeria amb la fórmula següent en comptes del nom de la taula, la taula de substitució i els noms de control segons calgui.

    If(IsBlank(TextInput15.Text),'Editable tables',Filter('Editable tables',(TextInput15.Text in Product) || TextInput15.Text in Segment))
    • La funció If comprova si s'especifiquen els termes de cerca o son en blanc. La galeria s'emplena segons els elements de la llista.
    • La funció IsBlanck comprova si s'especifiquen el text de cerca o no.
    • "Taules editables" és el nom de les font de dades connectades d'exemple en aquest exemple. Aquest valor es defineix com a valor per defecte si no s'especifica cap terme de cerca.
    • La funció Filter filtra els elements de la galeria en funció dels criteris de text definits dins d'aquesta funció. Aquesta funció s'utilitza per filtrar la galeria en funció del terme cercat.
    • "TextInput15" és el nom del control d'entrada de text que s'utilitza com a quadre de cerca per filtrar la galeria.
    • "Producte" i "Segment" son els noms de les columnes que s'han cercat a través del text definit al control "TextInput15" mitjançant la sintaxi .Text.
    • "In" comprova el valor del control d'entrada de text a la columna especificada de la font de dades connectada.
    • "||" és la condició "O", que implica que la cerca s'ha de fer a les columnes Producte o Segment. De la mateixa manera, podeu actualitzar la fórmula segons les vostres necessitats empresarials específiques.

    Galeria de filtres basada en els criteris definits

    Suggeriment

    Podeu conservar funcions antigues o afegir comentaris mitjançant "//" dins la barra de fórmules. Aquest mètode pot ser més útil per a les fórmules més complexes o per mantenir la funcionalitat més antiga si voleu tornar-hi més endavant.

Pas 7: Canvis diversos, com ara la marca, la informació del perfil i el restabliment

L'aplicació d'exemple es completa amb la funcionalitat esperada en aquest tutorial. Tanmateix, es poden afegir consideracions addicionals, com ara la capacitat de restablir el control d'entrada de text de filtre, com ara el títol de la galeria i de l'aplicació i els detalls del perfil d'usuarisi. Per obtenir més informació sobre altres funcionalitats, vegeu primer Afegir i configurar controls a les aplicacions de llenç.

A la taula següent s'hi resumeixen totes les dades de marca, perfil i restablir la informació afegida a l'aplicació d'exemple. Utilitzeu el mètode descrit anteriorment en aquest article per treballar amb diferents controls i propietats. Assegureu-vos de substituir la taula, el connector i el nom de control segons calgui.

Capacitat Control Propietats Informació addicional
Bàner/etiqueta de l'aplicació a la part superior de la pantalla Etiqueta de text Text - "Administració del catàleg d'administrador"
Cos de lletra - 28
Color d’emplenament - Blau
Alineació del text - Centrat		 Canvieu tots els valors que calgui.
Afegir un nom de visualització d'usuarisi a la part superior dreta de la pantalla Etiqueta de text SMS - Office365Users.MyProfileV2().displayName Per connectar-vos primer al Microsoft 365, afegiu una connexió als usuaris de Office 365.
Afegiu una foto de perfil d'usuarisi a l'esquerra del nom de visualització de l'usuarisi a la part superior dreta de la pantalla Image Image - Office365Users.UserPhotoV2(Office365Users.MyProfileV2().userPrincipalName) Per connectar-vos primer al Microsoft 365, afegiu una connexió als usuaris de Office 365.
Reinicialitzar el quadre de text de cerca a la cantonada superior esquerra de la pantalla Icona de tipus "Torna a carregar" OnSelect - Reset(TextInput15) on "TextInput15" és el control d'entrada de text utilitzat com a quadre de cerca. Quan ho seleccioneu, restablirà el quadre de text de cerca i, en conseqüència, la galeria mostrarà totes les dades per defecte.
Actualitzeu el text del botó a Afegeix un producte. Botó Afegeix un producte Text - "Afegeix un producte nou" Canvieu-ho quan calgui.
Afegir una etiqueta a sobre de la galeria, a l'esquerra del quadre d'entrada de cerca per indicar els productes actuals. Etiqueta de text Text - "Productes actuals"
Cos de lletra - 16
Gruix del tipus de lletra - Negreta		 Canvieu-ho quan calgui.
Afegir un suggeriment de text per al quadre d'entrada de text de cerca. Text input Suggeriment de text: "Cercar productes o segments" Canvieu segons calgui i assegureu-vos que la llista de camps (com ara Productes o Segments) s'alinea amb els noms de columna de la font de dades.

Per exemple, la pantalla completada té aquest aspecte amb els controls i les propietats configurades anteriorment:

Versió final de l'aplicació amb tots els controls i propietats configurades

Pas 8: Desar, publicar i compartir

Ara que ja heu completat l'aplicació d'exemple, deseu, publiqueu i compartiu l'aplicació dins de l'organització o amb convidats.

Consulteu també

Nota

Ens podeu dir quines són les vostres preferències d'idioma per a la documentació? Responeu una breu enquesta. (tingueu en compte que l'idioma de l'enquesta és l'anglès)

Trigareu uns set minuts a completar l'enquesta. No es recopilen dades personals (declaració de privadesa).