Esercizio - Aggiungere un'origine dati all'app canvas e progettare pagine funzionali

• 8 minuti

In Power Apps è possibile connettere i dati a un'applicazione già esistente o a un'applicazione che si sta creando da zero. L'app è in grado di connettersi a SharePoint, Microsoft Dataverse, Salesforce, OneDrive o altra origine dati.

Si userà SharePoint come origine dati primaria per questa applicazione. È possibile connettersi al sito di SharePoint per generare automaticamente un'app da un elenco personalizzato, creare una connessione prima di aggiungere dati a un'app esistente o compilare un'app da zero.

Creare un sito di SharePoint

1. Accedere al portale di SharePoint con le credenziali dell'organizzazione Microsoft.

2. Selezionare + Crea sito nella pagina iniziale di SharePoint per creare il sito di SharePoint.

   

3. Nella pagina iniziale di SharePoint sono disponibili le seguenti informazioni:

   • Scegliere il tipo di sito. La scelta è tra Sito di comunicazione e Sito del team. Selezionare Sito di comunicazione.

   • Immettere un nome appropriato, ad esempio Easy Sales.

   • Aggiungere la Descrizione del sito se necessario (facoltativo).

   • Selezionare la Lingua scelta dal menu a discesa.

4. Selezionare Fine per creare un sito di SharePoint per il caricamento dei dati.

   

Viene creato un sito di SharePoint moderno e pronto per l'uso in pochi secondi. Nel sito appena creato è ora possibile creare un elenco, una raccolta documenti, una pagina e così via.

Creare un elenco SharePoint.

Un elenco SharePoint raccoglie dati con una struttura simile a una tabella, un foglio di calcolo o un database semplice. Può includere molti tipi diversi di informazioni, ad esempio numeri, testo, allegati e persino immagini.

Per l'applicazione Easy Sales verrà creato un elenco contenente i dettagli di tutte le categorie di prodotti: Divani, Sedie, Tavoli e Tappeti.

1. Nel sito di SharePoint appena creato sotto il nome Easy Sales selezionare l'elenco a discesa + Nuovo e quindi selezionare Elenco per creare l'elenco SharePoint.

   

2. Nella finestra Creare un elenco selezionare Elenco vuoto per creare un elenco SharePoint da zero.

   

3. Configurare il riquadro Crea come indicato di seguito:

   • Immettere un nome appropriato per l'elenco, ad esempio Easy Sales.

   • Compilare la descrizione, se necessario (facoltativo).

   • Lasciare selezionata la casella di controllo Visualizzare nella struttura del sito.

   • Seleziona Crea.

     

Aggiungere dati all'elenco SharePoint

Dopo aver creato l'elenco, è possibile aggiungere i dati. In questo caso, "dati" indica i dettagli di qualsiasi prodotto specifico. I dettagli del prodotto includono le informazioni seguenti: Nome, Immagine, Prezzo, Dimensioni, Peso, Colore, MaterialePrincipale, Area, Altezza e Modello/Immagine 3D del prodotto da visualizzare in realtà mista.

1. Nell'elenco Easy Sales creato selezionare + Aggiungi colonna per aggiungere una colonna di un tipo specifico. L'elenco seguente mostra le colonne che devono essere create, con i relativi nomi e tipi in questo formato: Nome della colonna - Tipo di colonna.

   • Nome: Riga di testo singola
   • ImageLink: Riga di testo singola
   • Prezzo: Riga di testo singola
   • Dimensioni: Riga di testo singola
   • Peso: Riga di testo singola
   • Colore: Riga di testo singola
   • PrimaryMaterial: Riga di testo singola
   • Altezza: Numero
   • Profondità: Numero
   • Larghezza: Numero
   • Prezzo/cm2: Numero
   • ProductCategory: Riga di testo singola
   • FileType: Riga di testo singola

   Selezionare il tipo di colonna nell'elenco a discesa, ad esempio selezionare Riga di testo singola.

   

   Immettere i dettagli della colonna nella scheda Crea la colonna e selezionare Salva.

   

   Ripetere la stessa procedura per il resto delle colonne nell'elenco precedente.

   Nota

   Dopo aver creato un elenco SharePoint, viene creata una colonna Titolo predefinita che è possibile rinominare come Nome.

2. Dopo aver aggiunto le colonne, è necessario aggiungere i dati effettivi in queste colonne. Iniziare ad aggiungere dati alle colonne scaricando la cartella personalizzata che include tutti i dettagli del prodotto per tutti e quattro gli elenchi. Per accedere ai dati, selezionare il collegamento seguente, selezionare il pulsante Altre azioni file (...) in alto a destra della pagina e selezionare Scarica.

   Cartella personalizzata di Power Apps

3. Selezionare + Nuovo per aggiungere un elemento e quindi immettere i dettagli necessari, come indicato nel file Excel scaricato. Selezionare Salva per salvare i dettagli immessi.

   

   Nota

   La visualizzazione a griglia consente di aggiungere liberamente informazioni a righe o colonne diverse.

4. Iniziare ad aggiungere i dati nelle rispettive colonne, come illustrato nella figura:

   

   Nota

   Se si desidera includere immagini personalizzate, è possibile aggiungere i collegamenti all'immagine delle immagini pubbliche disponibili su Internet nella colonna LinkImmagine. È possibile ottenere i collegamenti alle immagini facendo clic con il pulsante destro del mouse e selezionando l'opzione Copy image address (Copia indirizzo immagine).

   Nota

   Non sono necessari i valori di altezza, profondità e larghezza per l'elenco della categoria Tappeti. Questa categoria di prodotti assumerà il valore dell'area misurato durante la sessione Measure in MR (Misura in MR) e restituirà il prezzo del tappeto dopo l'area calcolata. È stata tuttavia aggiunta la colonna Prezzo/cm2 per facilitare il processo di calcolo.

Crea connessione

Ora che tutti i dati necessari per l'applicazione sono archiviati nell'elenco di SharePoint, verrà stabilita una connessione in Power Apps. Dopo aver stabilito la connessione, è possibile accedere facilmente ai dati di SharePoint tramite l'applicazione.

1. Per iniziare a creare una connessione, accedere a Power Apps e selezionare Connessioni nella barra di spostamento a sinistra. Selezionare quindi + Nuova connessione nell'angolo in alto a sinistra.

2. Selezionare SharePoint. Si seleziona SharePoint perché i dati necessari sono stati archiviati negli elenchi di SharePoint.

   

3. Per connettersi a SharePoint Online, selezionare Connetti direttamente (servizi cloud) quindi selezionare Crea poi, se richiesto, specificare le credenziali.

   

4. La connessione viene creata ed è possibile creare un'app da zero.

   Nota

   Anche se viene creata la connessione, è comunque possibile aggiungere, modificare ed eliminare i dati archiviati nell'elenco di SharePoint. Tutte le modifiche vengono riflesse nell'applicazione tramite la connessione.

Creare l'applicazione Easy Sales in base ai dati di SharePoint e quindi aggiungere dati da altre origini, se necessario. Seguendo questa procedura, sarà possibile progettare alcune delle pagine principali dell'applicazione. Ad esempio, si apprenderà come progettare una schermata iniziale, una pagina del prodotto e una pagina dell'elenco dei prodotti. Si accederà anche ai dati archiviati nell'elenco di SharePoint tramite il controllo della raccolta Power Apps.

Aprire un'app vuota

1. Passare alla home page di Power Apps e selezionare Crea nel menu a sinistra. Selezionare App vuota, poi selezionare Crea in App canvas vuota.

   

2. Specificare un nome per l'app, ad esempio Easy-Sales. Selezionare Telefono, quindi Crea.

   

   Power Apps Studio crea un'app vuota per i telefoni.

   Nota

   Sebbene sia possibile progettare un'app da zero per diversi dispositivi, questo argomento descrive in particolare la progettazione di un'app per telefoni.

3. Se viene visualizzata la finestra di dialogo Benvenuto in Power Apps Studio, selezionare Ignora.

   

Connettersi ai dati

Per includere i dati in Power Apps, è necessario connettersi ai dati tramite i connettori nell'applicazione. Poiché tutti i dati sono stati archiviati in un elenco di SharePoint, verrà selezionato SharePoint come uno dei connettori.

1. A sinistra di Power Apps Studio selezionare l'opzione Dati.

2. Dopo aver aperto il riquadro Dati, selezionare il pulsante Add data (Aggiungi dati) per connettersi ai dati.

3. Nella finestra Select a data source (Seleziona un'origine dati) espandere la sezione Connettori e selezionare l'opzione SharePoint.

   

4. Nell'esercizio precedente, è già stata creata una connessione. Selezionare la connessione creata per aggiungere i dati all'applicazione. Selezionare il sito di SharePoint creato con il nome Easy Sales.

   

5. Dopo aver selezionato il sito Easy Sales di SharePoint, vengono visualizzati tutti gli elenchi creati in tale sito. Selezionare quindi l'elenco SharePoint creato per l'applicazione e fare clic su Connetti.

   

6. Tutti i dati necessari sono connessi e pronti per l'uso nell'applicazione. È ora possibile iniziare a creare l'applicazione.

Creare la schermata iniziale

1. Selezionare l'opzione Visualizzazione struttura ad albero a sinistra di Power Apps Studio. È già presente una schermata vuota in Power Apps Studio. In caso contrario, nella scheda Home selezionare la freccia giù accanto a New screen Nuova schermata che apre l'elenco dei tipi di schermata. Selezionare quindi Blank (Vuoto) per creare una schermata vuota.

   

2. Rinominare la schermata in Schermata iniziale selezionando i tre punti (...) presenti accanto al nome della schermata e selezionando l'opzione Rinomina.

   

3. Selezionare la schermata appena creata per modificare le relative proprietà nella scheda Proprietà a destra della schermata.

4. Selezionare l'elenco a discesa accanto alla proprietà Immagine di sfondo per aggiungere un'immagine alla schermata. Selezionare + Add an image file (+ Aggiungi un file immagine) per selezionare il file del logo scaricato.

   

5. Impostare la posizione dell'immagine su Adatta per adattare l'intera immagine alle dimensioni specificate. L'opzione Adatta ridimensiona l'immagine in modo proporzionale e non ritaglia l'immagine.

   

6. Nella scheda Inserisci espandere l'elenco a discesa Input e selezionare Timer. Trascinare quindi il pulsante sullo schermo e posizionarlo ovunque si desidera.

   

7. Per modificare alcune delle proprietà timer, è possibile usare l'elenco a discesa Proprietà nell'angolo in alto a sinistra o usare il riquadro Proprietà. Impostare le proprietà seguenti:

   • AutoStart: True

   • Durata: 2000

   • Visibile: False

     

     Nota

     Per impostazione predefinita, la durata viene misurata in millisecondi. Poiché 1 secondo = 1000 millisecondi, si immette 2000 come valore per la durata.

8. Si vuole che la schermata iniziale sia visibile solo per due secondi e che si passi quindi alla home page. Creare una schermata Blank (Vuoto) come nel passaggio precedente e rinominarla come Home Page. In seguito, selezionare il pulsante del timer aggiunto alla schermata iniziale e configurare la proprietà OnTimerEnd. Sostituire false con il contenuto seguente:

   Navigate('Home Page',ScreenTransition.Fade)
   

   

9. Salvare l'applicazione andando su File>Salva. Selezionare quindi l'opzione The cloud (Cloud) e selezionare Salva.

Creare la home page

1. Selezionare la Home Page creata in precedenza. Per inserire quattro pulsanti, passare alla scheda Inserisci e selezionare l'opzione Pulsante per aggiungere pulsanti alla schermata. Regolare le dimensioni e la posizione di questi pulsanti in base alle esigenze. Rinominarli rispettivamente come Sofas_button, Chairs_button, Tables_button e Carpets_button.

   

2. Modificare il testo visualizzato dei pulsanti per indicare categorie di prodotti, ad esempio Divani, Sedie, Tavoli e Tappeti.

   

3. Questi pulsanti verranno usati per passare all'elenco dei prodotti in varie categorie. A tale scopo, è necessario filtrare i prodotti dall'elenco SharePoint in base alla Categoria di prodotti. Creare due nuove schermate Blank (Vuoto) e rinominarle Prodotti e Tappeti.

   

4. Selezionare il pulsante Pulsante_divani appena creato e configurare la proprietà OnSelect. Dopo aver selezionato il pulsante, è necessario passare alla pagina dell'elenco dei prodotti creata nel passaggio precedente. Sostituire false con il codice seguente:

   Navigate(Products,ScreenTransition.Cover, {ID:1});
   

   

   Nota

   L'ID è una variabile di contesto con un valore assegnato. Questo valore viene passato alla pagina di destinazione menzionata nella funzione Esplora. Il valore assegnato alla variabile filtra i prodotti in base alla Categoria di prodotti.

5. Ripetere la stessa procedura per gli altri tre pulsanti. Di nuovo, assicurarsi di specificare nomi di schermata appropriati nella funzione Esplora. Ad esempio, per configurare la proprietà OnSelect dei pulsanti Sedie, Tavoli e Tappeti, usare la funzione Esplora come indicato di seguito:

   Navigate(Products,ScreenTransition.Cover, {ID:2});
   

   Navigate(Products,ScreenTransition.Cover, {ID:3});
   

   Navigate(Carpets,ScreenTransition.Cover)
   

   Suggerimento

   Per salvare lo stato di avanzamento, selezionare la scheda File in alto e selezionare l'opzione Salva. È anche possibile usare CTRL+S per salvare lo stato di avanzamento.

   Nota

   La sintassi predefinita della funzione Esplora è Navigate(Screen [, Transition [, UpdateContextRecord]])

   • Schermo: Obbligatorio. La schermata da visualizzare.
   • Transizione: Facoltativo. La transizione visiva da usare tra la schermata corrente e quella successiva. Il valore predefinito è None.
   • UpdateContextRecord: Facoltativo. Un record che contiene il nome di almeno una colonna e un valore per ogni colonna. Questo record aggiorna le variabili di contesto della nuova schermata come se fossero stati passati alla funzione UpdateContext.

   Suggerimento

   È possibile testare l'applicazione premendo il tasto F5 sulla tastiera o facendo clic sul pulsante Riproduci nell'angolo in alto a destra di Power Apps Studio.

Usare il controllo Raccolta

Dopo aver aggiunto le categorie di prodotti, verrà visualizzato l'elenco dei prodotti in ogni categoria. In Power Apps viene usato il controllo Raccolta per visualizzare un record di dati.

1. Nella schermata Prodotti, alla scheda Inserisci, selezionare Raccolta>Verticale per aggiungere il controllo Raccolta alla schermata.

   

2. Rinominarla in Raccolta_prodotti. Nella scheda Proprietà del riquadro a sinistra configurare la proprietà Elementi come indicato di seguito:

   If(
   ID = 1,
   Filter('Easy Sales',(ProductCategory = "Sofa")),
   ID = 2,
   Filter('Easy Sales',(ProductCategory = "Chair")),
   ID = 3,
   Filter('Easy Sales',(ProductCategory = "Table")),
   ID = 4,
   Filter('Easy Sales',(ProductCategory = "Carpet")))
   

   

   Verranno filtrati i Prodotti archiviati nell'elenco SharePoint in base alla Categoria di prodotti. Le variabili di contesto vengono usate per il processo di filtro.

3. Configurare la proprietà Raccolta>Campi nel riquadro Proprietà selezionando Modifica:

   • Assegnare il Prezzo all'intestazione Sottotitolo1.

   • Assegnare il Titolo all'intestazione Titolo1.

     

   Quando si assegnano i campi precedenti, si osserveranno i dati che si riflettono nella Raccolta.

4. Modificare le dimensioni della Galleria_prodotti in base alle esigenze. Per aggiungere il LinkImmagine all'intestazione Immagine1, selezionare l'Immagine nella raccolta e configurare la proprietà Immagine nella scheda Proprietà aggiungendo questa riga di codice:

   ThisItem.ImageLink
   

   

5. Inserire ora un'etichetta nella parte superiore dello schermo selezionando l'opzione Etichetta. Personalizzare quindi la posizione, il colore e la visualizzazione del testo, come illustrato nella figura:

   

6. Aggiungere un'icona Indietro sull'Etichetta aggiunta in precedenza per consentire all'utente di passare alla Home Page quando necessario. Per aggiungere l'icona Indietro, espandere l'elenco a discesa Icone e selezionare l'icona Indietro.

   

7. Posizionare l'icona Indietro correttamente e modificare il colore visualizzato se necessario. Configurare la proprietà OnSelect aggiungendo quanto segue:

   Navigate('Home Page',ScreenTransition.Cover)
   

   

8. Seguire la stessa procedura per la pagina Tappeti. Configurare la proprietà Elementi della raccolta aggiunta alla pagina Tappeti nel modo seguente:

   Filter('Easy Sales',ProductCategory = "Carpet")
   

   

   Suggerimento

   Per salvare lo stato di avanzamento, selezionare la scheda File in alto e selezionare l'opzione Salva. È anche possibile usare CTRL+S per salvare lo stato di avanzamento.

Dopo aver implementato i passaggi precedenti, ecco come viene visualizzata l'applicazione. L'applicazione includerà una Schermata iniziale eccellente, una Home page e un inventario dei prodotti per esplorare i prodotti.