Creare da zero app canvas integrate di SharePoint per visualizzare, modificare, aggiungere ed eliminare le voci di un elenco creato utilizzando Microsoft Lists

In questo articolo dello scenario, scoprirai come creare da zero un'app con funzionalità per moduli di SharePoint. L'app mostrerà come visualizzare, modificare, aggiungere ed eliminare voci di elenco utilizzando un'app canvas senza visitare un sito di SharePoint.

Nota

Per maggiori dettagli sui diversi scenari di lavoro con moduli SharePoint ed esempi aggiuntivi, vai a Panoramica degli scenari di SharePoint.

Prerequisiti

• Devi avere accesso a un sito SharePoint per creare un elenco e voci di elenco.
• Devi sapere come creare e configurare elenchi.

Dettagli dello scenario

Lo scopo di questo scenario è dimostrare come creare da zero un'app canvas da utilizzare con un elenco. Alla fine di questa demo di esempio, sarai in grado di eseguire le seguenti attività nell'app canvas senza la necessità di accedere all'elenco o alle relative voci:

• Visualizzare tutte le voci dell'elenco.
• Cercare voci in un elenco in base al valore di testo di una colonna specifica.
• Selezionare una voce di elenco.
• Modificare una voce di elenco.
• Creare una nuova voce di elenco.
• Eliminare una voce di elenco.

Lo scenario è un'illustrazione di base delle funzionalità dell'app canvas quando integrato con SharePoint. Per migliorare il layout con un design migliorato o schermate aggiuntive, vai ai seguenti articoli:

• Aggiungere e configurare i controlli
• Aggiungere e configurare una schermata
• Comprendi moduli, layout e schede

Importante

L'esempio in questo scenario crea un'app di esempio per visualizzare, modificare, aggiungere ed eliminare voci di elenco. Puoi modificare l'approccio per personalizzare l'app in modo diverso in base alle tue scelte o all'obiettivo aziendale. Quando personalizzi la tua app con nomi personalizzati per i comandi, assicurati di usare i nomi dei comandi corretti nella formula quando segui i passaggi in questo esempio.

Esempio

Questo esempio di scenario ti guida attraverso i passaggi per creare un'app e connetterla a un elenco per visualizzare, modificare, aggiungere ed eliminare voci di elenco.

Passaggio 1: creare un elenco utilizzando Microsoft Lists

Crea un elenco con colonne e voci di elenco. In questo scenario, abbiamo utilizzato un elenco con le colonne e le voci di elenco seguenti:

Nota

Entrambe le colonne sono Riga di testo singola.

Passaggio 2: creare un'app canvas vuota

Crea un'app canvas da modello vuoto.

Passaggio 3: connettere l'app a SharePoint

1. Seleziona Origini dati dal riquadro sinistro.

   

2. Seleziona l'origine dati SharePoint. Puoi anche cercare il nome nella casella di ricerca.

   

3. Seleziona Aggiungi una connessione.

   

4. Seleziona un tipo di connessione. Puoi connetterti a SharePoint Online o un sito SharePoint locale con un gateway dati se configurato. Questo scenario si collega a un sito SharePoint Online.

   

5. Seleziona il sito SharePoint contenente l'elenco appena creato.

   

6. Seleziona l'elenco che hai creato. Questo scenario utilizza un elenco denominato Forme.

   

7. Selezionare Connetti. L'origine dati viene aggiunta all'app.

   

Passaggio 4: aggiungere una tabella di dati per visualizzare voci di elenco

1. Seleziona + (Inserisci) dal riquadro sinistro.

   

2. Espandi Layout.

3. Seleziona Tabella dati.

   

4. Seleziona l'origine dati come connessione SharePoint.

   

5. Spostare la tabella dati in basso a destra all'interno della schermata per fare spazio per componenti aggiuntivi.

   

Passaggio 5: aggiungere la funzionalità per cercare e selezionare la voce

1. Inserisci un comando Input di testo alla canvas e spostarlo sotto l'elenco a discesa.

   

2. Aggiorna la casella di ricerca della proprietà Predefinito al valore Cerca per forma.

   

3. Inserisci un controllo Casella di riepilogo nella canvas e spostalo sotto il comando di immissione del testo aggiunto nel passaggio precedente.

   

4. Sul lato destro della schermata di Studio, imposta la proprietà Items del controllo Casella di riepilogo sull'elenco Forme per questo esempio.

   

5. Imposta la proprietà Valore per il comando della casella di riepilogo su Forma invece di Colore per questo esempio.

   

6. Aggiorna la proprietà Voci della casella di controllo aggiunta nel passaggio precedente alla seguente formula:

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

   

   La formula contiene le seguenti funzioni:

   • Filtro(): utilizzato in questa formula per filtrare le voci nella casella di controllo in base a parametri definiti. [@Shapes] in questa funzione definisce quale origine dati filtrare.
   • StartsWith(): utilizzato in questa formula per filtrare le voci di elenco in base alla colonna Forma che inizia con i caratteri immessi nel controllo TextInput1 aggiunto in precedenza.

Passaggio 6: aggiungere la funzionalità per modificare la voce

1. Inserisci il comando Modifica modulo.

   

2. Dal lato destro della schermata di Studio, imposta la proprietà Origine dati per il controllo Modulo modifica Forme.

   

3. Seleziona Modifica campi per il controllo form di modifica e rimuovi qualsiasi altro campo quale Allegati, se presente.

   

4. Fai in modo che i campi Forma e Colore siano presenti. In caso contrario, aggiungili usando Aggiungi campo.

   

5. Riorganizzare il layout dello schermo per garantire che il comando Modifica modulo sia visibile e non si sovrapponga ad altri comandi.

   

6. Impostare la proprietà OnSelect del comando della casella di riepilogo sulla funzione seguente:

   Set(TextSelected,1)
   

   

   La funzione Set() imposta una nuova variabile denominata TextSelected sul valore di 1 quando viene selezionato un valore nella casella di riepilogo. La variabile TextSelected viene utilizzata in questo scenario come flag per controllare le azioni e il comportamento delle funzionalità di aggiunta, modifica ed eliminazione, come vedrai nelle sezioni seguenti.

7. Impostare la proprietà Item del controllo Modulo modifica della formula seguente:

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

   

   La funzione If() controlla prima se il valore della variabile TextSelected è 1 o meno. In caso affermativo, il modulo di modifica mostra l'elemento selezionato dalla casella di riepilogo. In caso negativo, il modulo di modifica mostra l'elemento selezionato dalla tabella dei dati.

8. Inserisci un pulsante.

   

9. Dal lato destro della schermata di Studio, imposta la proprietà Text del pulsante aggiunto nel passaggio precedente a Salva.

   

10. Imposta la proprietà OnSelect del pulsante Salva sulla formula seguente:

    SubmitForm(Form1);
    Set(TextSelected,0)
    

    

    La formula contiene le seguenti funzioni:

    • SubmitForm(): utilizzato in questa formula per inviare il modulo di modifica e salvare i valori nell'elenco.
    • Set(): ripristina la variabile TextSelected su o in modo che una nuova voce possa essere selezionata dalla casella di riepilogo.

11. Inserisci il controllo Etichetta testo.

    

12. Aggiorna la proprietà Text per il controllo Etichetta testo aggiunto nel passaggio precedente su Per modificare i valori di una voce, selezionalo dalla tabella o esegui una ricerca.

    

13. Riorganizzare i comandi sullo schermo per ordinare i comandi di modifica.

    

Passaggio 7: aggiungere la funzionalità per aggiungere la voce

1. Inserisci un pulsante.

2. Riorganizza i comandi sullo schermo per assicurarti che il pulsante sia visibile.

3. Aggiorna la proprietà Text del pulsante aggiunto nel passaggio precedente ad Aggiungi.

4. Imposta la proprietà OnSelect del pulsante Aggiungi sulla funzione seguente:

   NewForm(Form1)
   

   

   La funzione NewForm() cancella il controllo Modulo modifica aggiunto nel modulo denominato Form1 in modo da poter aggiungere una nuova voce di elenco.

Passaggio 8: aggiungere la funzionalità per eliminare la voce

1. Inserisci un pulsante.

2. Spostare il pulsante aggiunto nel passaggio precedente sotto il pulsante Salva.

3. Aggiorna la proprietà Text del pulsante aggiunto nel passaggio precedente a Elimina.

4. Imposta la proprietà OnSelect del pulsante Elimina sulla formula seguente:

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

   

   La formula contiene le seguenti funzioni:

   • Remove(): utilizzato in questa formula per eliminare la voce di elenco selezionata.
   • If() : controlla se il valore della variabile TextSelected è 1 o meno. In caso affermativo, il pulsante Elimina elimina la voce selezionata dalla casella di riepilogo. In caso negativo, il pulsante Elimina elimina la voce selezionata dal comando della tabella dati.
   • Set(): ripristina la variabile TextSelected su o in modo che una nuova voce possa essere selezionata dalla casella di riepilogo.

Ora che hai configurato tutti i componenti dell'app, assicurati che la schermata sia simile al seguente esempio:

Passaggio 9: salvare l'app

Ora che l'app ha funzionalità di visualizzazione, modifica, aggiunta ed eliminazione, salva l'app.

1. Seleziona il menu File.

2. Seleziona Salva.

3. Quando si salva per la prima volta, l'opzione Salva ti indirizza a Salva con nome. Seleziona Salva per salvare l'app nel cloud.

   

4. Chiudere Power Apps Studio.

Passaggio 10: provare l'app

1. Passa a Power Apps.

2. Seleziona App.

3. Seleziona l'app creata.

   

4. Prova i componenti dell'app.

   

   Suggerimento

   Puoi visualizzare rapidamente in anteprima il comportamento di un componente utilizzando il tasto della tastiera Alt e un clic sinistro del mouse quando modifichi l'app da Power Apps Studio.

   Ad esempio, invece di selezionare Visualizza l'anteprima dell'app in alto a destra o F5 dalla tastiera che esegue l'app in anteprima, mantieni premuto il tasto Alt sulla tastiera, quindi seleziona una riga dalla tabella dati per modificare il controllo Modulo modifica nella riga selezionata come se l'app fosse in esecuzione in anteprima.

   

   Inoltre, tieni il tasto Alt premuto sulla tastiera e puoi continuare a visualizzare l'anteprima all'interno di Power Apps Studio. Ad esempio, la selezione di più componenti per diverse azioni o controlli.

Passaggi successivi

Se modifichi l'app, devi pubblicare le modifiche affinché gli altri le vedano.

Una volta che l'app è pronta per l'uso, condividi l'app.

Vedi anche

• Aggiungere e configurare i controlli
• Aggiungere e configurare una schermata
• Comprendere moduli, layout e schede
• Informazioni di riferimento sulle formule
• Informazioni di riferimento sui controlli

Nota

Puoi indicarci le tue preferenze di lingua per la documentazione? Partecipa a un breve sondaggio. (il sondaggio è in inglese)

Il sondaggio richiederà circa sette minuti. Non viene raccolto alcun dato personale (Informativa sulla privacy).