Crear aplicacions de llenç integrades del SharePoint des de zero per visualitzar, editar, afegir i suprimir elements de llista del SharePoint

En aquest article d'escenari aprendreu a crear una aplicació amb la funcionalitat de formulari del SharePoint des de zero. L'aplicació mostrarà com visualitzar, editar, afegir i suprimir elements de la llista del SharePoint mitjançant una aplicació del llenç sense visitar cap lloc del SharePoint.

Nota

Per obtenir més informació sobre els diferents escenaris per treballar amb formularis del SharePoint i altres exemples, aneu a la Descripció d'escenaris del SharePoint.

Requisits previs

  • Heu de tenir accés a un lloc del SharePoint per crear una llista i elements de llista.
  • Heu d'estar informat sobre la creació i la configuració de llistes del SharePoint.

Detalls de l'escenari

La finalitat d'aquest escenari és demostrar com es crea una aplicació del llenç des de zero per treballar amb una llista del SharePoint. Al final d'aquesta demostració d'exemple, podreu fer les tasques següents des de l'aplicació del llenç sense haver d'accedir a la llista del SharePoint ni als seus elements:

  • Visualitzar tots els elements de la llista del SharePoint.
  • Cercar elements d'una llista del SharePoint segons el valor de text d'una columna concreta.
  • Seleccionar un element d'una llista del SharePoint.
  • Editar un element d'una llista del SharePoint.
  • Crear un element nou en una llista del SharePoint.
  • Suprimir un element d'una llista del SharePoint.

L'escenari és una il·lustració bàsica de les capacitats de les aplicacions del llenç quan estan integrades amb el SharePoint. Per millorar la disposició amb el disseny millorat o pantalles addicionals, aneu als articles següents:

Important

L'exemple en aquest escenari crea una aplicació d'exemple per visualitzar, editar, afegir i suprimir els elements de la llista del SharePoint. Podeu canviar l'enfocament per personalitzar l'aplicació de manera diferent segons les vostres opcions o objectius empresarials. Quan personalitzeu l'aplicació amb noms personalitzats per als controls, assegureu-vos d'utilitzar els noms de control correctes a la fórmula quan seguiu els passos d'aquest exemple.

Exemple

En aquest escenari, l'exemple us guiarà pels passos per crear una aplicació i connectar-la a una llista del SharePoint per visualitzar, editar, afegir i suprimir els elements de la llista del SharePoint.

Pas 1: crear una llista del SharePoint

Creeu una llista del SharePoint amb columnes i elements de llista. En aquest escenari, hem utilitzat una llista amb les següents columnes i elements de llista:

Estructura de la llista del SharePoint

Nota

Totes dues columnes són Línia única de text.

Pas 2: crear una aplicació de llenç des de zero

  1. Inicieu la sessió a Power Apps.

  2. Seleccioneu Aplicació de llenç des de zero.

    Aplicació de llenç des de zero

  3. Introduïu el nom de l'aplicació que vulgueu. Per exemple, Llista del SharePoint des de zero.

  4. Seleccioneu la disposició que vulgueu. Aquest escenari utilitza la disposició Tauleta.

    Nom de l'aplicació i disposició

  5. Seleccioneu Crea. L'aplicació s'obre al Power Apps Studio per crear-la.

    Aplicació en blanc

Pas 3: connectar l'aplicació al SharePoint

  1. Des de la subfinestra esquerra, seleccioneu Fonts de dades.

    Seleccionar les fonts de les dades.

  2. Seleccioneu la font de dades SharePoint. També podeu cercar el nom al quadre de cerca.

    Seleccionar la font de dades del SharePoint.

  3. Seleccioneu Afegeix una connexió.

    Afegir la connexió del SharePoint.

  4. Seleccioneu un tipus de connexió. Podeu connectar-vos al SharePoint en línia o a un lloc local del SharePoint amb una passarel·la de dades quan estigui configurada. Aquest escenari es connecta a un lloc del SharePoint en línia.

    Crear una connexió de SharePoint.

  5. Seleccioneu el lloc del SharePoint que té la llista que heu creat abans.

    Seleccionar el lloc del SharePoint.

  6. Seleccioneu la llista del SharePoint que heu creat. Aquest escenari utilitza una llista anomenada Formes.

    Seleccionar la llista del SharePoint.

  7. Seleccioneu Connecta. El font de dades s'afegeix a l'aplicació.

    Font de dades afegida

Pas 4: afegir la taula de dades per visualitzar els elements de la llista del SharePoint

  1. Seleccioneu + (Insereix) a la subfinestra esquerra.

    Seleccionar Insereix.

  2. Expandiu Disposició.

  3. Seleccioneu Taula de dades.

    Seleccionar la taula de dades.

  4. Seleccioneu la font de dades com la vostra connexió al SharePoint.

    Seleccionar la font de la taula de dades.

  5. Moveu la taula de dades a la part inferior dreta de la pantalla per deixar espai per als components addicionals.

    Moure la taula de dades.

Pas 5: afegir la capacitat de cercar i seleccionar elements

  1. Inseriu un control Entrada de text al llenç i moveu-lo a sota de la llista desplegable.

    Inserir un control d'entrada de text.

  2. Actualitzeu la propietat Per defecte del quadre de cerca al valor Cerca per forma.

    Propietat per defecte per a l'entrada de text

  3. Inseriu un control Quadre de llista al llenç i moveu-lo a sota del control d'entrada de text afegit al pas anterior.

    Inserir un control de quadre de llista.

  4. Des del costat dret de la pantalla de l'Studio, definiu la propietat Elements del control del quadre de llista a la llista Formes del SharePoint d'aquest exemple.

    Elements del quadre de llista

  5. Definiu la propietat Valor per al control del quadre de llista a Forma en lloc de Color per a aquest exemple.

    Valor del quadre de llista

  6. Actualitzeu la propietat Elements del quadre de llista afegit al pas anterior a la fórmula següent:

    Filter([@Shapes], StartsWith(Shape, TextInput1.Text))
    

    Propietat Elements del quadre de cerca

    La fórmula conté les funcions següents:

    • Filter(): s'utilitza en aquesta fórmula per filtrar elements del quadre de llista segons els paràmetres definits. [@Shapes] en aquesta funció defineix la font de dades que es filtrarà.
    • StartsWith(): s'utilitza en aquesta fórmula per filtrar els elements de la llista del SharePoint segons la columna Forma que comença pels caràcters introduïts en el control TextInput1 afegit abans.

Pas 6: afegir la capacitat d'editar elements

  1. Inseriu el control Edita el formulari.

    Afegir Edita el formulari.

  2. Des del costat dret de la pantalla de l'Studio, definiu la propietat Font de dades per al control Edita el formulari a Formes.

    Font de dades d'edició el formulari

  3. Seleccioneu Edita els camps per al control Edita el formulari i suprimiu tots els altres camps, com ara Fitxers adjunts, si n'hi ha.

    Suprimir el camp de fitxers adjunts.

  4. Assegureu-vos que els camps Forma i Color estiguin presents. Si no és així, afegiu-los mitjançant Afegeix un camp.

    Afegir els camps de forma i color.

  5. Per assegurar-vos que el control Edita el formulari sigui visible i no se superposi amb altres controls, reordeneu la disposició de la pantalla.

    Pantalla reordenada

  6. Definiu la propietat OnSelect del control del quadre de llista a la funció següent:

    Set(TextSelected,1)
    

    OnSelect per al quadre de llista

    La funció Set() defineix una variable nova anomenada TextSelected en el valor 1 quan se selecciona un valor del quadre de llista. La variable TextSelected s'utilitza en aquest escenari com a indicador per controlar les accions i el comportament d'afegir, editar i suprimir capacitats com es veurà en les seccions següents.

  7. Definiu la propietat Element del control Edita el formulari a la fórmula següent:

    If(TextSelected=1,ListBox1.Selected,DataTable1.Selected)
    

    Propietat Element per a Edita el formulari

    La funció If() comprova primer si el valor de la variable TextSelected és 1 o no. Si és així, Edita el formulari mostra l'element seleccionat al quadre de llista. Si no, Edita el formulari mostra l'element seleccionat de la taula de dades.

  8. Inseriu un botó.

    Inserir un botó.

  9. Des del costat dret de la pantalla de l'Studio, definiu la propietat Text del botó afegit al pas anterior a Desa.

    Botó Desa

  10. Definiu la propietat OnSelect del botó Desa a la fórmula següent:

    SubmitForm(Form1);
    Set(TextSelected,0)
    

    Propietat OnSelect per al botó Desa

    La fórmula conté les funcions següents:

    • SubmitForm(): s'utilitza en aquesta fórmula per enviar el formulari d'edició i desar els valors a la llista del SharePoint.
    • Set(): restableix la variable TextSelected a o per tal que un element nou es pugui seleccionar des del quadre de llista.
  11. Inseriu un control Etiqueta de text.

    Etiqueta de text

  12. Actualitzeu la propietat Text per al control Etiqueta de text afegit al pas anterior a Per editar els valors d'un element, seleccioneu-lo a la taula o cerqueu-lo.

    Etiqueta de text actualitzada

  13. Reorganitzeu els controls de la pantalla per ordenar els controls d'edició.

    Reorganitzar els controls d'edició.

Pas 7: afegir la capacitat d'afegir elements

  1. Inseriu un botó.

  2. Reorganitzeu els controls de la pantalla per assegurar-vos que el botó sigui visible.

  3. Actualitzeu la propietat Text del botó afegit al pas anterior a Afegeix.

  4. Definiu la propietat OnSelect del botó Afegeix a la funció següent:

    NewForm(Form1)
    

    Propietat OnSelect per al botó Afegeix

    La funció NewForm() esborra el control Edita el formulari afegit al formulari anomenat Form1 per tal d'afegir-hi un element de llista del SharePoint nou.

Pas 8: afegir la capacitat de suprimir elements

  1. Inseriu un botó.

  2. Moveu el botó afegit en el pas anterior a sota del botó Desa.

  3. Actualitzeu la propietat Text del botó afegit al pas anterior a Suprimeix.

  4. Definiu la propietat OnSelect del botó Suprimeix a la fórmula següent:

    Remove([@Shapes], If(TextSelected=1,ListBox1.Selected,DataTable1.Selected));
    Set(TextSelected,0)
    

    Propietat OnSelect per al botó Suprimeix

    La fórmula conté les funcions següents:

    • Remove(): s'utilitza en aquesta fórmula per suprimir l'element de la llista del SharePoint seleccionat.
    • If(): comprova primer si el valor de la variable TextSelected és 1 o no. Si és així, el botó Suprimeix suprimeix l'element seleccionat al quadre de llista. Si no, el botó Suprimeix suprimeix l'element seleccionat del control de taula de dades.
    • Set(): restableix la variable TextSelected a o per tal que un element nou es pugui seleccionar des del quadre de llista.

Ara que teniu tots els components de l'aplicació configurats, assegureu-vos que la pantalla s'assembli a l'exemple següent:

Aplicació després d'afegir tots els components

Pas 9: desar l'aplicació

Ara que l'aplicació té la funcionalitat de visualitzar, editar, afegir i suprimir afegida, deseu l'aplicació.

  1. Seleccioneu el menú Fitxer.

  2. Seleccioneu Desa.

  3. A l'hora de desar per primer cop, l'opció Desa us porta a Anomena i desa. Seleccioneu Desa per desar l'aplicació al núvol.

    Desa l'aplicació.

  4. Tanqueu l'Power Apps Studio.

Pas 10: provar l'aplicació

  1. Aneu al Power Apps.

  2. Seleccioneu Aplicacions.

  3. Seleccioneu l'aplicació creada.

    Reproduïu l'aplicació.

  4. Proveu els components de l'aplicació.

    Reproduir l'animació de l'aplicació.

    Suggeriment

    Podeu obtenir una visualització ràpida del comportament d'un component amb la tecla Alt del teclat i el clic esquerre del ratolí en editar l'aplicació al Power Apps Studio.

    Per exemple, en comptes de seleccionar Previsualitza l'aplicació a la part superior dreta, o F5 al teclat que executa l'aplicació en visualització prèvia, manteniu premuda la tecla Alt del teclat i, a continuació, seleccioneu una fila de la taula de dades per canviar del control Edita el formulari a la fila seleccionada com si l'aplicació s'executés en visualització prèvia.

    Alt + clic esquerre al menú desplegable per previsualitzar

    A més, manteniu premuda la tecla Alt al teclat i podreu continuar executant la visualització prèvia al Power Apps Studio. Per exemple, seleccioneu diversos components per fer diferents accions o comprovacions.

Passos següents

Si editeu l'aplicació, heu de publicar els canvis perquè els altres usuaris els vegin.

Una vegada que l'aplicació estigui a punt per utilitzar-la, compartiu l'aplicació.

Consulteu també