Condividi tramite

Creare un'app per modificare le tabelle nelle app canvas

Progettare un'applicazione di produttività per avere funzioni e dati correlati in un'unica posizione consente di ottenere maggiori risultati senza dover passare da una schermata all'altra. Microsoft Excel è un programma di questo tipo, che consente di modificare i dati in tempo reale in modo rapido ed efficiente.

Mediante Power Apps puoi applicare lo stesso concetto fornendolo come front-end a qualsiasi origine dati. Puoi anche personalizzarlo ulteriormente.

Gestione del catalogo amministrativo: demo dell'app di esempio.

Questa esercitazione usa i seguenti componenti per creare un'app di esempio:

  • Un'origine dati (Microsoft Dataverse, ma puoi usare Excel al suo posto)
  • Modulo—Per nuovi elementi
  • Raccolta—Per visualizzare gli elementi esistenti e
  • Controlli Input di testo—Per aggiornare elementi esistenti

Prerequisiti

Per seguire questa esercitazione, avrai bisogno di accedere a un ambiente Power Platform e disporre della possibilità di creare tabelle in Microsoft Dataverse.

L'esercitazione usa la struttura seguente per creare l'app di esempio:

Colonne Dataverse per la tabella di esempio.

Per informazioni su come aggiungere colonne, vedi Utilizzare le colonne di tabella.

È stato creato un nuovo modulo principale per aggiungere dati di esempio:

Nuovo modulo principale per l'aggiunta di dati alla tabella Dataverse.

Per informazioni su come creare un modulo principale con le colonne richieste, vedi Creare un modulo. Assicurati di usare il corretto ordine del modulo per l'aggiunta di record utilizzando il nuovo modulo.

Passaggio 1 - Creare un'app vuota

Crea un'app canvas da modello vuoto con il nome "App Gestione catalogo" e il layout Tablet.

Passaggio 2 - Aggiungere una nuova origine dati

Questa sezione mostra come aggiungere una tabella Dataverse come origine dati per l'app di esempio. Puoi anche usare un file Excel da un sito SharePoint oppure OneDrive come origine dati o qualsiasi altro tipo di origine dati a tua scelta.

  1. Dal riquadro di sinistra, seleziona Dati > Aggiungi dati.

  2. Seleziona Vedi tutte le tabelle.

  3. Seleziona Tabelle modificabili o la tabella creata in precedenza.

    Aggiungere una tabella Dataverse come origine dati.

Per ulteriori informazioni sull'aggiunta di una connessione a un'app canvas, vedi Aggiungi origine dati.

Passaggio 3 - Configurare un controllo form

Questo passaggio consente di aggiungere un controllo form per aggiungere nuovi elementi.

  1. Seleziona + (Inserisci) > Modifica modulo.

    Aggiungere un controllo Modifica modulo.

  2. Nel riquadro di destra, scegli la tabella come origine dati per il controllo Modifica modulo.

    Scegliere la tabella come origine dati per il controllo Modifica modulo.

  3. Usa le proprietà Modifica campi per selezionare le colonne da mostrare nel controllo Modifica modulo. Puoi anche modificare l'ordine delle colonne in base alle esigenze.

    Modificare campi sul controllo Modifica modulo.

  4. Scegli la Modalità predefinita per il modulo impostandola su Nuovo.

    Scegliere la modalità Nuovo per il controllo form.

  5. Regola le proprietà Larghezza, Altezza per le dimensioni delle schede dati per riempire il canvas in base alle esigenze.

  6. Nel riquadro di sinistra, seleziona + (Inserisci) > Pulsante.

  7. Aggiorna il testo del pulsante inserendo Aggiungi prodotto.

  8. Seleziona la proprietà OnSelect per il controllo del pulsante nella parte superiore sinistra della schermata.

  9. Nella barra della formula, immetti la formula seguente.

    SubmitForm(Form1);
NewForm(Form1);
    • La funzione SubmitForm invia i dettagli del nuovo prodotto alla tabella Dataverse.
    • NewForm cambia la modalità del modulo ripristinandola al nuovo modulo per aggiungere nuovi prodotti dopo aver inviato i dettagli del nuovo prodotto.
    • Form1 in questa formula è il nome del controllo Modifica modulo aggiunto in precedenza. Se il nome del modulo in questa formula è diverso, aggiornalo.

    Pulsante OnSelect - nuovo modulo.

Questo passaggio consente di aggiungere una raccolta verticale vuota per modificare gli elementi come una tabella modificabile.

  1. Nel riquadro di sinistra, seleziona + (Inserisci) > Layout > Raccolta verticale vuota.

  2. Seleziona la tabella da Dataverse come origine dati.

  3. Ridimensiona la raccolta per occupare la metà rimanente dell'intero canvas poiché questa raccolta conterrà tutte le colonne modificabili dall'origine dati.

  4. Seleziona Modifica raccolta.

    Modifica una raccolta vuota verticale.

  5. Nel riquadro di sinistra, seleziona + (Inserisci) > Input > Input di testo.

  6. Allinea la raccolta con le seguenti azioni:

    Allinea una raccolta vuota verticale.

    1. Sposta la riga più in alto per il controllo Input di testo nell'angolo in alto a sinistra all'interno della raccolta. Lo spostamento di questa riga più in alto sposta automaticamente le righe rimanenti per la stessa colonna.
    2. Ridimensiona l'altezza della prima riga all'interno della raccolta per occupare la dimensione della prima riga che hai appena spostato in alto a sinistra.

    Alla fine, dovresti vedere tutte le righe impilate sul lato sinistro della raccolta.

  7. Aggiorna la formula della proprietà Predefinito per la prima riga di input di testo all'interno della raccolta:

    ThisItem.Product
    • ThisItem in questa formula si riferisce all'elemento all'interno dell'origine dati selezionata che, in questo esempio, è la tabella Dataverse.
    • "Prodotto" è il nome della colonna all'interno della tabella.
    • Quando questa formula viene aggiornata per la prima riga nella raccolta, aggiorna automaticamente l'intera colonna con i nomi dei prodotti. Se si verifica un errore, verifica di aver collegato la raccolta alla tabella Dataverse.

    Prodotto visto nell'ambito della raccolta con la formula.

  8. Ripeti i passaggi precedenti per aggiungere un controllo Input di testo per ogni colonna da visualizzare all'interno dell'app come campo modificabile. Assicurati di scegliere le colonne corrette nella formula sostituendo "Prodotto" con i nomi di colonna appropriati.

    Suggerimento

    Per ridimensionare la larghezza, usa la proprietà Larghezza o il trascinamento mediante i pulsanti intorno alla prima riga in ogni colonna.

  9. Seleziona la prima riga dalla prima colonna all'interno della raccolta e aggiungi la seguente formula alla proprietà OnChange con modifiche alla colonna e ai nomi dei controlli in base alle esigenze:

    Patch('Editable tables',ThisItem,{Product:TextInput8.Text})
    • La funzione Patch in questa formula aggiorna la tabella selezionata come origine dati con i valori quando viene modificata.
    • "Tabelle modificabili" è il nome dell'origine dati di esempio.
    • ThisItem si riferisce all'elemento all'interno dell'origine dati selezionata per questa colonna.
    • "Prodotto" è il nome della colonna all'interno dell'origine dati selezionata.
    • "TextInput8" è il nome del controllo Input di testo aggiunto alla galleria allegata alla raccolta "Prodotto" per l'origine dati selezionata.
    • "Testo" per "TextInput8" è il testo immesso nella cella selezionata all'interno della tabella modificabile nel canvas.

    Formula OnChange per la raccolta.

  10. Ripeti il passaggio precedente per ogni controllo Input di testo aggiunto per il resto delle colonne dall'origine dati connessa. Assicurati che la formula sia aggiornata per utilizzare la colonna e i nomi dei controlli corretti.

Passaggio 5 - Impostare le opzioni di modifica e annullamento

Questo passaggio consente di aggiungere le opzioni per modificare e annullare l'avanzamento della modifica. La raccolta con controlli Input di testo modificabili per impostazione predefinita potrebbe essere soggetta ad aggiornamenti involontari. La disponibilità di un'opzione di modifica esplicita, quindi la possibilità di interrompere la funzionalità di modifica, garantisce che le modifiche siano sempre previste.

  1. Seleziona Inserisci dal menu in alto > Icone, quindi aggiungi due icone - Modifica e Annulla (notifica).

    Possibilità di modificare o annullare.

  2. Seleziona Vista albero dal riquadro di sinistra, quindi App.

  3. Seleziona la proprietà OnStart dell'app, quindi aggiungi la seguente formula con le modifiche al nome della raccolta in base alle esigenze:

    Gallery2.DisplayMode = "galleryDisplayMode";
Set(galleryDisplayMode, DisplayMode.Disabled);
    • "Gallery2" in questa formula è il nome della raccolta.
    • DisplayMode è la proprietà DisplayMode per la raccolta selezionata.
    • "galleryDisplayMode" è la nuova variabile che questa formula crea per memorizzare il valore della modalità di visualizzazione della raccolta.
    • La funzione Set imposta la variabile "galleryDisplayMode" definita nella riga precedente con il valore di "Disabled" utilizzando "DisplayMode.Disabled". Con la modalità di visualizzazione disabilitata, la raccolta non è modificabile per impostazione predefinita all'avvio dell'app (app OnStart).

  4. Seleziona la raccolta verticale vuota, quindi la proprietà DisplayMode.

  5. Aggiorna il valore della proprietà da Edit a galleryDisplayMode. Questa modifica garantisce che la modalità della raccolta sia sempre definita utilizzando il valore della variabile "galleryDisplayMode" creata nel passaggio precedente.

  6. Aggiorna le proprietà e le formule per le icone come indicato di seguito:

    Icon Proprietà Formula
    Modifica OnSelect Set(galleryDisplayMode, DisplayMode.Edit)
    Modifica Visibile galleryDisplayMode = DisplayMode.Disabled
    Annullamento OnSelect Set(galleryDisplayMode, DisplayMode.Disabled)
    Annullamento Visibile galleryDisplayMode = DisplayMode.Edit
    • La funzione Set imposta la modalità di visualizzazione della raccolta a seconda dell'icona selezionata.
    • La variabile "galleryDisplayMode" controlla la visibilità delle icone di modifica o annullamento. Quando la raccolta è modificabile, viene visualizzato solo il pulsante di annullamento. Inoltre, solo il pulsante di modifica appare quando la raccolta è disabilitata.

  7. Sovrapponi le icone di modifica e annullamento, poiché gestiamo la visibilità per entrambe le icone in base allo stato della raccolta.

    Modifica o annullamento con modifica alla raccolta.

    Suggerimento

    Puoi usare il pulsante Anteprima nella parte superiore destra della schermata per visualizzare l'anteprima dell'app o utilizzare il tasto F5 sulla tastiera. Un'altra alternativa rapida per il test è premere il tasto Alt sulla tastiera, quindi selezionare il pulsante tenendo premuto il tasto. Questo metodo simula anche la funzionalità di anteprima dell'app per la selezione specifica mentre il tasto rimane premuto.

Passaggio 6 - Aggiungere la funzionalità di ricerca

Man mano che i dati nell'origine dati connessa aumentano, diventa difficile trovare una riga specifica. Questo passaggio aggiunge una funzionalità di ricerca all'app per applicare filtri alla raccolta con le parole chiave ricercate, facilitando la ricerca di dati pertinenti.

  1. Aggiungi un controllo Input di testo al centro del canvas, sopra la raccolta.

  2. Aggiorna la proprietà Items per la raccolta con la formula seguente anziché il nome della tabella, sostituendo la tabella e i nomi dei controlli in base alle esigenze.

    If(IsBlank(TextInput15.Text),'Editable tables',Filter('Editable tables',(TextInput15.Text in Product) || TextInput15.Text in Segment))
    • La funzione If verifica la condizione se i termini di ricerca sono specificati o vuoti. La raccolta viene popolata in base agli elementi elencati.
    • La funzione IsBlank verifica la condizione se il testo di ricerca è specificato o meno.
    • "Tabelle modificabili" è il nome dell'origine dati di esempio connessa in questo esempio. Questo valore è impostato come predefinito se non viene specificato alcun termine di ricerca.
    • La funzione Filter filtra gli elementi nella raccolta in base ai criteri di testo impostati all'interno di questa funzione. Questa funzione viene utilizzata per applicare filtri alla raccolta in base al termine ricercato.
    • "TextInput15" è il nome del controllo Input di testo utilizzato come casella di ricerca per applicare filtri alla raccolta.
    • "Prodotto" e "Segmento" sono i nomi delle colonne che vengono cercate utilizzando il testo definito nel controllo "TextInput15" utilizzando la sintassi .Text.
    • "In" controlla il valore del controllo Input di testo nella colonna specificata nell'origine dati connessa.
    • "||" è la condizione "OR", ovvero indica che la ricerca deve essere eseguita per le colonne Prodotto o Segmento. Analogamente, puoi aggiornare la formula in modo da soddisfare le tue esigenze aziendali specifiche.

    Applicare filtri alla raccolta in base ai criteri definiti.

    Suggerimento

    Puoi conservare le funzioni precedenti o aggiungere commenti utilizzando "//" all'interno della barra della formula. Questo metodo può essere più utile per formule più complesse o per mantenere le funzionalità precedenti se desideri ripristinarle in un secondo momento.

Passaggio 7 - Modifiche varie, ad esempio personalizzazione, informazioni del profilo e ripristino

L'app di esempio è completa delle funzionalità previste in questa esercitazione. Tuttavia, si possono aggiungere ulteriori considerazioni—ad esempio—la possibilità di ripristinare il controllo Input di testo del filtro, la personalizzazione come il titolo per la raccolta e l'app e i dettagli del profilo utente. Puoi anche effettuare ulteriori operazioni, ad esempio Aggiungere e configurare i controlli nelle app canvas.

La tabella seguente riepiloga tutte le informazioni su personalizzazione, profilo e ripristino aggiunte all'app di esempio. Usa il metodo descritto in precedenza in questo articolo per utilizzare controlli e proprietà diversi. Assicurati di sostituire i nomi di tabelle, connettori e controlli in base alle esigenze.

Funzionalità CTRL Proprietà Informazioni aggiuntive
Banner/etichetta dell'app nella parte superiore della schermata Etichetta di testo Testo - "Gestione del catalogo amministrativo"
Dimensioni carattere - 28
Colore riempimento - Blu
Allineamento del testo - Allinea al centro verticalmente		 Modifica tutti i valori in base alle esigenze.
Aggiungi il nome visualizzato dell'utente nella parte superiore destra della schermata Etichetta di testo Text - Office365Users.MyProfileV2().displayName Connettiti a Microsoft 365 prima aggiungendo una connessione a Utenti di Office 365.
Aggiungi la foto del profilo utente sul lato sinistro del nome visualizzato dell'utente nella parte superiore destra della schermata Immagine Image - Office365Users.UserPhotoV2(Office365Users.MyProfileV2().userPrincipalName) Connettiti a Microsoft 365 prima aggiungendo una connessione a Utenti di Office 365.
Ripristina la casella di testo di ricerca nell'angolo superiore sinistro della schermata Icona di tipo "Ricarica" OnSelect - Reset(TextInput15) dove "TextInput15" è il controllo Input di testo utilizzato come casella di ricerca. Quando questo elemento è selezionato, ripristinerà la casella di testo di ricerca con conseguente visualizzazione nella raccolta di tutti i dati per impostazione predefinita.
Aggiorna il testo per il pulsante Aggiungi prodotto Pulsante Aggiungi prodotto Testo - "Aggiungi nuovo prodotto" Modifica in base alle esigenze.
Aggiungi un'etichetta sopra la raccolta, sul lato sinistro della casella di input di ricerca, per indicare i prodotti correnti Etichetta di testo Testo - "Prodotti correnti"
Dimensioni carattere - 16
Spessore carattere - Grassetto		 Modifica in base alle esigenze.
Aggiungi testo di suggerimento per la casella di input di testo per la ricerca Input di testo Testo suggerimento - "Cerca prodotti o segmenti" Modifica in base alle esigenze e assicurati che l'elenco dei campi (come Prodotti, Segmenti) sia allineato ai nomi delle colonne nella tua origine dati.

Ad esempio, la schermata completata si presenta così con i controlli e le proprietà configurati sopra:

Versione finale dell'app con tutti i controlli e le proprietà configurati.

Passaggio 8 - Salvataggio, pubblicazione e condivisione

Ora che hai completato l'app di esempio, salva, pubblica e condividi l'app all'interno della tua organizzazione o con gli ospiti.

Vedi anche

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