Esercizio - Creazione di un'app canvas che si connette a un'origine dati

  • 30 minuti

Contenuto dell'unità:

  • Creazione di una tabella personalizzata in Dataverse
  • Creazione di un'app canvas che usa la tabella personalizzata in Dataverse come origine dati

In questo esercizio si creeranno la tabella e le colonne necessarie per archiviare le informazioni relative alle richieste di prenotazione, nonché un'app canvas che i clienti potranno usare. Si convaliderà l'app in base ai requisiti per controllare il lavoro effettuato.

Contoso Real Estate vuole monitorare i propri annunci immobiliari attivi. Prima di creare l'applicazione canvas, occorre creare la tabella Real Estate Properties in Dataverse per archiviare gli annunci.

Creazione della tabella Real Estate Properties

Innanzitutto, si creerà la tabella Real Estate Properties per archiviare le diverse proprietà immobiliari in vendita. Il modo più semplice per creare una tabella è mediante l'uso di Copilot.

  1. In Power Apps Maker Portal selezionare Crea sul lato sinistro dello schermo.

  2. Nella schermata Crea le tue app selezionare Inizia con Copilot.

  3. Nella schermata Introduzione a Copilot immettere quanto segue: "Crea una tabella denominata Real Estate Properties. La prima colonna dovrebbe essere denominata Property Name. Includi una colonna Asking Price e colonne per l'indirizzo. Dovranno essere presenti colonne separate per Street, City, State e Postal Code".

  4. Selezionare il pulsante Genera.

La tabella Real Estate Properties completata dovrebbe essere simile all'immagine seguente:

Screenshot della tabella iniziale generata da Copilot.

Importante

Anche quando si immettono le stesse informazioni in Copilot, non si ottengono sempre risultati esattamente identici. Se la tabella ha un aspetto leggermente diverso, non è un problema.

  1. Nel riquadro Copilot a destra immettere il testo seguente: "Aggiungi una nuova colonna di scelta denominata Bedrooms. Deve includere 5 opzioni: 1, 2, 3, 4 e 5". Selezionare il pulsante Invia.

  2. Si aggiungerà quindi un'altra colonna denominata Bathrooms. Nel riquadro Copilot a destra immettere il testo seguente: "Aggiungi una nuova colonna di scelta denominata Bathrooms che includa 9 opzioni: 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5 e 5". Selezionare il pulsante Invia.

La nuova tabella Real Estate Properties dovrebbe essere simile all'immagine seguente:

Screenshot della tabella perfezionata generata da Copilot.

  1. Selezionare il pulsante Salva e apri, quindi selezionare App canvas dal menu a discesa.

Esercizio - Creazione di un'app canvas

In questo esercizio si progetterà e si creerà un'applicazione canvas Property Listing per monitorare gli annunci immobiliari.

Attività 1 - Creazione dell'app

Innanzitutto occorre creare l'applicazione. A tal fine si userà uno dei vari metodi di creazione disponibili.

  1. Andare a Power Apps Maker Portal

  2. Selezionare la scheda + Crea dal menu di spostamento a sinistra.

  3. Selezionare Inizia con i dati.

  4. Nella schermata Inizia con i dati scegliere Seleziona tabelle esistenti.

  5. In Cerca una tabella Dataverse trovare la tabella Real Estate Properties creata nell'esercizio precedente.

    Screenshot della ricerca della tabella.

  6. Selezionare la tabella Real Estate Properties e scegliere il pulsante Crea app.

  7. Attendere la creazione dell'app.

  8. Selezionare Salva in alto a destra in Power Apps Studio.

Attività 2 - Configurazione della schermata principale

Dopo la creazione, l'app include una schermata. Si configurerà tale schermata per assicurare che offra le funzionalità desiderate. Si apporteranno le seguenti modifiche principali:

  • Modifica del nome della schermata principale in Home Screen

  • Modifica del nome della raccolta in PropListings

  1. Nel menu di creazione dell'app selezionare Visualizzazione struttura ad albero.

  2. Selezionare Schermata Real Estate Properties nella visualizzazione struttura ad albero e selezionare Rinomina.

  3. Immettere Home Screen.

    Screenshot della ridenominazione della Home Screen.

  4. Nel menu di creazione dell'app espandere il Contenitore Screen fino a visualizzare il controllo RecordsGallery1.

  5. Fare clic con il pulsante destro del mouse sul controllo raccolta RecordsGallery1 e selezionare Rinomina.

  6. Modificare il nome in PropListings.

    Screenshot della ridenominazione della raccolta PropListings.

  7. Con la raccolta PropListings ancora selezionata, fare clic sul pulsante Modifica (matita).

  8. Sul lato destro dell'applicazione individuare Campi nel pannello Proprietà e selezionare 7 selezionati.

  9. In Dati modificare il valore Body1 in ThisItem.'Asking Price'

  10. Modificare il valore di Subtitle1 in ThisItem.City.

  11. Chiudere il riquadro Dati.

  12. Selezionare Salva in alto a destra in Power Apps Studio.

Attività 3 - Formattazione del campo valuta

Nelle app canvas i campi valuta non sono visualizzati come tali. Si formatterà il campo Asking Price in modo che venga visualizzato come valuta nell'applicazione.

  1. Nel menu di creazione dell'app selezionare Visualizzazione struttura ad albero.

  2. Espandere la raccolta PropListings.

  3. Selezionare Body1.

  4. Impostare la proprietà Text nella barra della formula sulla formula: "$" & Testo(ThisItem.'Asking Price', "#0,000.00")

  5. Selezionare Salva in alto a destra in Power Apps Studio.

Attività 4 - Ridenominazione dell'app

Infine, si assegnerà all'app un nome che ne descriva meglio la finalità.

  1. Nel menu di creazione dell'app selezionare App nella Visualizzazione struttura ad albero.

  2. Nel menu Proprietà a destra modificare Nome app da App ad App annunci immobiliari.

  3. Selezionare Salva in alto a destra in Power Apps Studio.

Attività 5 - Selezione di un tema

Vi sono vari temi predefiniti che è possibile applicare alle applicazioni canvas. In questa attività se ne userà uno per modificare l'aspetto dell'app.

  1. Nella barra delle azioni in Power Apps Studio selezionare Tema.

    Screenshot della modifica del tema.

  2. Selezionare il tema Acciaio.

Attività 6 - Controlli di personalizzazione

I controlli di personalizzazione consentono di modificare l'aspetto di un controllo. In questa attività si modificherà la freccia che si seleziona nella raccolta PropListings per passare a un altro record.

  1. Nel menu di creazione dell'app selezionare Visualizzazione struttura ad albero.

  2. Espandere la raccolta PropListings.

  3. Selezionare NextArrow1.

  4. Impostare la proprietà Color di NextArrow su Blue:

  5. Selezionare Salva in alto a destra in Power Apps Studio.

Attività 7 - Aggiunta dell'etichetta utente

È possibile personalizzare un'applicazione canvas in diversi modi. Un'opzione consiste nell'aggiungere il nome utente della persona che vi accede. In questa attività si aggiungerà all'applicazione un'etichetta con un nome utente.

  1. Selezionare all'esterno della raccolta sul canvas vuoto oppure selezionare la Home Screen.

  2. Nel menu di creazione dell'app selezionare Inserisci (+).

  3. Selezionare Etichetta di testo.

  4. Trascinare l'etichetta in alto a destra nella schermata.

  5. Nel menu di creazione dell'app selezionare Visualizzazione struttura ad albero.

  6. Rinominare l'etichetta in UserLabel.

  7. Impostare le proprietà dell'etichetta nella barra della formula come segue:

    • Altezza = 40

    • Larghezza = 250

    • Allineamento testo = Align.Right

    • Dimensioni del carattere = 18

    • PaddingRight = 10

    • Color = Color.White

    • Testo = User().FullName

    Screenshot della modifica delle proprietà di un'etichetta utente.

  8. Selezionare Salva in alto a destra in Power Apps Studio.

Esercizio - Aggiunta di altre schermate e abilitazione dello spostamento

Dopo aver creato la schermata principale dell'applicazione, occorre consentire agli utenti dell'app di modificare i singoli record e di creare nuovi annunci immobiliari in base alle necessità. A tale fine, si aggiungeranno altre schermate.

  • Schermata Modifica proprietà

  • Schermata Dettagli proprietà

Dopo aver creato le schermate, si abiliteranno lo spostamento nell'applicazione e le funzionalità di modifica.

Nota

  1. Se l'App annunci immobiliari non è ancora aperta, andare al Power Apps Maker Portal
  2. Selezionare l'App annunci immobiliari, selezionare Comandi (...), quindi selezionare Modifica > Modifica in una nuova scheda.

Attività 1 - Aggiunta di schermate

Innanzitutto si aggiungeranno due schermate che permetteranno di visualizzare i dettagli di proprietà specifiche e di modificare le proprietà in base alle esigenze.

  1. Nel menu di creazione dell'app selezionare Visualizzazione struttura ad albero.

  2. Nella barra delle azioni in Power Apps Studio selezionare Nuova schermata.

    Screenshot di Nuova schermata.

  3. Selezionare Vuota.

  4. Rinominare la schermata in Schermata Modifica proprietà.

  5. Nella barra delle azioni in Power Apps Studio selezionare Nuova schermata.

  6. Selezionare Intestazione e piè di pagina.

  7. Rinominare la schermata in Schermata Dettagli proprietà.

Attività 2 - Configurazione dello spostamento

Occorre assicurarsi che gli utenti possano spostarsi facilmente nelle nuove schermate per svolgere le loro attività. Le opzioni includono i comandi Vai e Indietro.

  1. Nella Visualizzazione struttura ad albero espandere la raccolta PropListings nella Home Screen.

  2. Selezionare NextArrow1 in PropListings.

  3. Impostare la proprietà OnSelect di NextArrow nella barra della formula su: Collect(colPropDetails, ThisItem); Navigate('Schermata Dettagli proprietà', ScreenTransition.Cover);

  4. Selezionare Schermata Modifica proprietà.

  5. Nel menu di creazione dell'app selezionare Inserisci (+).

  6. Espandere Icone.

  7. Selezionare la Freccia indietro.

  8. Impostare la proprietà OnSelect dell'icona su: Back()

  9. Nella Visualizzazione struttura ad albero selezionare l'icona, selezionare Comandi (...), quindi selezionare Copia.

  10. Espandere Schermata Dettagli proprietà.

  11. Espandere ScreenContainer.

  12. Selezionare HeaderContainer, selezionare Comandi (...), quindi selezionare Incolla.

Attività 3 - Aggiunta del modulo di visualizzazione

Lo scopo della schermata Dettagli proprietà è consentire agli utenti di visualizzare i dettagli di proprietà specifiche. Nelle applicazioni canvas ciò avviene mediante i moduli. In questa attività si aggiungerà un nuovo modulo all'applicazione.

  1. Nel menu di creazione dell'app selezionare Visualizzazione struttura ad albero.

  2. Espandere SchermataDettagli proprietà.

  3. Espandere ScreenContainer.

  4. Selezionare MainContainer.

  5. Nel menu di creazione dell'app selezionare Inserisci (+).

  6. Espandere Input.

  7. Selezionare Modulo di visualizzazione.

    Screenshot dell'inserimento di un modulo di visualizzazione.

  8. Nelle proprietà di FormViewer selezionare Real Estate Properties come Origine dati.

  9. Selezionare XX selezionati accanto a Campi.

    Screenshot della modifica dei campi visualizzati in un modulo.

  10. Aggiungere o rimuovere i campi in modo che siano disposti nel seguente ordine:

    • Property Name

    • Asking Price

    • Address

    • City

    • State

    • Postal Code

    • Bedrooms

    • Bathrooms

  11. Chiudere il riquadro Campi.

  12. Impostare la proprietà Item del controllo visualizzatore moduli nella barra della formula su: PropertyListings.Selected

  1. Nel menu di creazione dell'app selezionare Visualizzazione struttura ad albero.

  2. Espandere SchermataDettagli proprietà.

  3. Espandere ScreenContainer.

  4. Selezionare FooterContainer.

  5. Selezionare + accanto al contenitore Footer.

    Screenshot dell'inserimento di un'etichetta di testo nel piè di pagina.

  6. Selezionare Etichetta di testo.

  7. Impostare la proprietà Text dell'etichetta su: PropertyListings.Selected.'Property Name'

Aggiunta di un pulsante Elimina per eliminare i record

  1. Nel menu di creazione dell'app selezionare Visualizzazione struttura ad albero.

  2. Espandere Schermata Dettagli proprietà.

  3. Espandere ScreenContainer.

  4. Selezionare FooterContainer.

  5. Nel menu di creazione dell'app selezionare Inserisci (+).

  6. Selezionare Pulsante.

  7. Nel menu di creazione dell'app selezionare Visualizzazione struttura ad albero.

  8. Rinominare il pulsante in Deletebtn.

  9. Impostare la proprietà Text del pulsante su: "Elimina"

  10. Impostare la proprietà OnSelect del pulsante su: Remove('Real Estate Properties', PropListings.Selected); Back();

Attività 4 - Aggiunta del modulo di modifica

Dopo aver configurato la schermata per la visualizzazione di dettagli specifici di una proprietà, si modificherà la schermata Modifica proprietà per consentire agli utenti di apportare cambiamenti ai singoli record.

  1. Nel menu di creazione dell'app selezionare Visualizzazione struttura ad albero.

  2. Selezionare Schermata Modifica proprietà.

  3. Nel menu di creazione dell'app selezionare Inserisci (+).

  4. Selezionare Modulo di modifica.

  5. Nelle proprietà del modulo selezionare Real Estate Properties come Origine dati.

  6. Selezionare Modifica campi accanto a Campi.

  7. Aggiungere o rimuovere i campi in modo che siano disposti nel seguente ordine:

    • Property Name

    • Asking Price

    • Address

    • Street

    • City

    • State

    • Postal Code

    • Bathrooms

    • Bedrooms

  8. Chiudere il riquadro Campi.

  9. Impostare la proprietà Item del controllo modulo su: PropListings.Selected

  10. Nel menu di creazione dell'app selezionare Visualizzazione struttura ad albero.

  11. Rinominare il modulo in PropListingForm.

  12. Impostare le proprietà del modulo come segue:

    • X=0

    • Y=125

    • Altezza=500

    • Larghezza=Parent.Width

    • Columns=1

    • Layout=Orizzontale

    Screenshot della modifica del modulo della schermata Modifica proprietà.

Aggiunta del pulsante Invia

  1. Nel menu di creazione dell'app selezionare Visualizzazione struttura ad albero.

  2. Selezionare Schermata Modifica proprietà.

  3. Nel menu di creazione dell'app selezionare Inserisci (+).

  4. Selezionare Pulsante.

  5. Trascinare il pulsante sotto il modulo.

  6. Nel menu di creazione dell'app selezionare Visualizzazione struttura ad albero.

  7. Rinominare il Pulsante in Submitbtn.

  8. Impostare la proprietà Text del pulsante su: "Invia"

  9. Impostare la proprietà OnSelect del pulsante su: SubmitForm(PropListingForm)

  10. Selezionare PropListingForm.

  11. Impostare la proprietà OnSuccess del modulo su: Navigate('Home Screen', ScreenTransition.UnCover)

Attività 5 - Aggiunta dello spostamento alla schermata di modifica

  1. Nel menu di creazione dell'app selezionare Visualizzazione struttura ad albero.

  2. Espandere SchermataDettagli proprietà.

  3. Espandere ScreenContainer.

  4. Selezionare HeaderContainer.

  5. Nel menu di creazione dell'app selezionare Inserisci (+).

  6. Espandere Icone.

  7. Selezionare Modifica.

  8. Nel menu di creazione dell'app selezionare Visualizzazione struttura ad albero.

  9. Rinominare l'icona in EditIcon.

  10. Impostare la proprietà OnSelect dell'icona su: Navigate('Schermata Modifica proprietà', ScreenTransition.Cover)

Attività 6 - Aggiunta di un pulsante Nuovo record

Occorre assicurarsi che sia possibile aggiungere agevolmente nuove proprietà dalla schermata Home dell'applicazione.

  1. Nel menu di creazione dell'app selezionare Visualizzazione struttura ad albero.

  2. Selezionare Home Screen.

  3. Nel menu di creazione dell'app selezionare Inserisci (+).

  4. Espandere Icone.

  5. Selezionare Aggiungi.

  6. Nel menu di creazione dell'app selezionare Visualizzazione struttura ad albero.

  7. Rinominare l'icona in NewIcon.

  8. Impostare le proprietà dell'icona come segue:

    • X=0

    • Y=0

    • Altezza=80

    • Larghezza=80

    • Color=Color.White

  9. Impostare la proprietà OnSelect dell'icona su: NewForm(PropListingForm); Navigate('Schermata Modifica proprietà', ScreenTransition.Cover)

  10. Selezionare Salva in alto a destra in Power Apps Studio.

Esercizio - Gestione dell'applicazione Annunci immobiliari

Dopo la creazione l'applicazione, solo l'utente che l'ha creata può accedervi. Per garantire che altri utenti dell'organizzazione possano visualizzare l'applicazione come necessario, occorre fornire loro l'accesso. In questo esercizio si modificheranno vari elementi della nuova applicazione, tra cui l'accesso da parte di altre persone.

Attività 1 - Condivisione dell'App annunci immobiliari

  1. Se l'App annunci immobiliari non è ancora aperta, andare al Power Apps Maker Portal

  2. Selezionare l'App annunci immobiliari, selezionare Comandi (...), quindi selezionare Condividi.

    Screenshot della condivisione di un'app.

  3. Nel riquadro Condividi immettere Tutti e selezionare Tutti nell'organizzazione.

    Screenshot che mostra la condivisione dell'app con tutti.

  4. Selezionare Condividi.

  5. Chiudere il riquadro Condividi app.

Attività 2 - Pubblicazione dell'App annunci immobiliari

  1. Selezionare l'App annunci immobiliari, quindi selezionare Comandi (...) e Dettagli.

  2. Selezionare la scheda Versioni.

    Screenshot della visualizzazione delle versioni dell'app.

  3. Selezionare la versione più recente.

    Screenshot della pubblicazione della versione corrente

  4. Selezionare Pubblica questa versione.

  5. Selezionare di nuovo Pubblica questa versione.

Attività 3 - Esportazione dell'App annunci immobiliari

  1. Andare a Power Apps Maker portal

  2. Selezionare l'App annunci immobiliari, quindi selezionare Comandi (...) ed Esporta pacchetto.

  3. Immettere App annunci immobiliari in Nome.

  4. Selezionare Aggiorna in CONFIGURAZIONE IMPORTAZIONE.

  5. Selezionare Crea come nuovo e selezionare Salva.

    Screenshot dei dettagli del pacchetto durante l'esportazione di un'app.

  6. Selezionare Esporta.

  7. Attendere la creazione e il download del pacchetto. In questo modo si creerà un file ZIP nella cartella Download.