Nota: questo articolo fa parte di una serie di esercitazioni sull'uso di PowerApps, Microsoft Flow e Power BI con SharePoint Online. Assicurarsi di leggere l'introduzione alla serie per farsi un'idea del quadro generale, nonché dei download correlati.

In quest'attività verrà creata da zero un'app che permette a un utente di assegnare un responsabile ai progetti e di aggiornare i relativi dettagli. Saranno riproposti qui alcuni dei controlli e delle formule già visti nella prima app, ma stavolta gran parte della procedura di creazione dell'app toccherà all'utente. La procedura è certamente più complessa, ma l'utente apprenderà di più, dunque questo sembra un giusto compromesso.

Suggerimento: il pacchetto di download per questo scenario include una versione completa di questa app: project-details-app.msapp.

Analisi rapida di PowerApps Studio

Nell'ultima attività è stato usato PowerApps Studio per il Web, ma prima di continuare sarà opportuno verificare di averne compreso tutte le parti. È possibile continuare a lavorare in PowerApps Studio per il Web oppure usare PowerApps Studio per Windows.

PowerApps Studio include tre riquadri e una barra multifunzione che consentono di creare app in modo simile a una presentazione di PowerPoint:

  1. La barra di spostamento a sinistra, che mostra una visualizzazione gerarchica delle schermate e dei controlli dell'app, nonché le anteprime delle schermate

  2. Il riquadro centrale, contenente la schermata dell'app che si sta modificando

  3. Il riquadro destro, in cui si impostano le opzioni, come le origini dati e i layout

  4. L'elenco a discesa Proprietà, in cui si selezionano le proprietà a cui vengono applicate le formule

  5. La barra della formula, in cui si aggiungono le formule (come in Excel) che definiscono il comportamento dell'app

  6. La barra multifunzione, in cui si aggiungono controlli e si personalizzano gli elementi di progettazione

PowerApps Studio

Passaggio 1: Creare schermate

Terminata questa panoramica, si inizierà con la creazione di un'app.

Creare e salvare l'app

  1. In PowerApps Studio, fare clic o toccare Nuova, quindi in App vuota, fare clic o toccare Layout Telefono.

    App vuota - layout telefono

  2. Fare clic o toccare File, che viene aperto in una scheda Impostazioni app. Immettere il nome "App di gestione progetto".

    Nome app

  3. Fare clic o toccare Salva con nome, verificare che l'app venga salvata nel cloud, quindi fare clic su Salva nell'angolo inferiore destro.

    Salvare nel cloud

  4. Fare clic o toccare l'icona Torna all'app per tornare all'app.

Aggiungere quattro schermate all'app

In questo passaggio si creeranno quattro schermate vuote per l'app. Si useranno diversi layout di schermata, a seconda dello scopo della schermata (di cui si parlerà più diffusamente più avanti).

Schermata Scopo
SelezionaAttività Schermata iniziale; passare alle altre schermate
AssegnaManager Assegnare un responsabile a un progetto approvato
VisualizzaProgetti Visualizzare un elenco di progetti, con le informazioni di riepilogo
AggiornaDettagli Visualizzare e aggiornare i dettagli per un progetto
  1. Nella scheda Home fare clic o toccare Nuova schermata, quindi Schermata scorrevole.

    Schermata scorrevole

  2. Rinominare la schermata SelezionaAttività.

    Rinominare la schermata

  3. Creare e rinominare schermate aggiuntive:

    1. Fare clic o toccare Nuova schermata, quindi Schermata scorrevole. Rinominare la schermata in AssegnaManager.
    2. Fare clic o toccare Nuova schermata, quindi Schermata Elenco. Rinominare la schermata VisualizzaProgetti.
    3. Fare clic o toccare Nuova schermata, quindi Schermata Modulo. Rinominare la schermata AggiornaDettagli.
  4. Selezionare i puntini di sospensione (... ) accanto a Schermata1, quindi fare clic o toccare Elimina.

    Eliminare una schermata

L'app deve ora apparire come nell'immagine seguente.

Tutte le schermate dell'app

Passaggio 2: Connettersi a un elenco di SharePoint

In questo passaggio, verrà effettuata la connessione all'elenco di SharePoint Dettagli progetto. In quest'app verrà usato un solo elenco, ma è possibile connettersi facilmente a entrambi qualora si volesse estendere l'app.

  1. Nella barra di spostamento di sinistra fare clic o toccare la schermata SelezionaAttività.

  2. Nel riquadro destro fare clic o toccare Aggiungi origine dati.

    Connettersi ai dati

  3. Toccare o fare clic su Nuova connessione.

    Nuova connessione

  4. Fare clic o toccare SharePoint.

    Connessione a SharePoint

  5. Selezionare Connetti direttamente (servizi cloud) e quindi fare clic o toccare Crea.

    Connessione diretta (servizi cloud)

  6. Immettere un URL di SharePoint, quindi fare clic o toccare Vai.

    URL di SharePoint per la connessione

  7. Selezionare l'elenco Dettagli progetto e quindi fare clic o toccare Connetti.

    Selezionare l'elenco Dettagli progetto

    La scheda Origini dati nel riquadro destro mostra ora la connessione appena creta.

    Scheda Origini dati

Passaggio 3: Creare la schermata SelezionaAttività

In questo passaggio, verrà suggerito un modo per esplorare le altre schermate nell'app, con alcuni dei controlli, formule e opzioni di formattazione forniti da PowerApps.

Aggiornare il titolo e inserire un testo introduttivo

  1. Nella barra di spostamento di sinistra selezionare la schermata SelezionaAttività.

  2. Nel riquadro centrale, selezionare il valore predefinito [Titolo], quindi, nella barra della formula, aggiornare la proprietà Testo in"Gestione dei progetti Contoso".

    Proprietà Testo nella barra della formula

  3. Nella scheda Inserisci fare clic o toccare Etichetta, quindi trascinare l'etichetta in basso, sotto il banner principale.

    Aggiungere etichetta

  4. Nella barra della formula, impostare le proprietà seguenti per l'etichetta:

    • Proprietà Colore = GrigioScuro
    • Proprietà Dimensione = 18
    • Proprietà Testo = "Fare clic o toccare un'attività per continuare..."

    Aggiornare il testo dell'etichetta

Aggiungere due pulsanti di navigazione

  1. Nella scheda Inserisci fare clic o toccare Pulsante, quindi trascinare il pulsante in basso, sotto l'etichetta.

    Pulsante Aggiungi

  2. Nella barra della formula, impostare le proprietà seguenti per il pulsante:

    • Proprietà DopoSelezione = Navigate(AssegnaManager, Dissolvenza). Quando si esegue l'app e si fa clic su questo pulsante, è possibile passare alla seconda schermata nell'app, con una transizione di dissolvenza tra le schermate.
    • Proprietà Testo = "Assegna manager"
  3. Ridimensionare il pulsante per adattarlo al testo.

    Testo del pulsante di aggiornamento

  4. Inserire un altro pulsante con le proprietà seguenti:

    • Proprietà DopoSelezione = Navigate(VisualizzaProgetti, Dissolvenza).
    • Proprietà Testo = "Aggiorna dettagli"

    Testo del pulsante di aggiornamento

    Nota: il pulsante viene denominato Aggiorna dettagli, ma prima si passerà alla schermata VisualizzaProgetti per selezionare un progetto da aggiornare.

Eseguire l'app

L'app non esegue ancora molte operazioni, ma è possibile eseguirla se si vuole:

  1. Fare clic o toccare la schermata SelezionaAttività (l'app inizia sempre dalla schermata selezionata in modalità anteprima in PowerApps Studio).

  2. Fare clic o toccare icona Esegui app nell'angolo in alto a destra per eseguire l'app.

  3. Fare clic o toccare uno dei pulsanti per passare a un'altra schermata.

  4. Fare clic o toccare Icona di anteprima Chiudi app nell'angolo in alto a destra per chiudere l'app.

Passaggio 4: Creare la schermata AssegnaManager

In questo passaggio, verrà usata una raccolta per visualizzare tutti i progetti che sono stati approvati ma che non hanno ancora un manager. Verranno aggiunti altri controlli, così da poter assegnare un manager.

Nota: in seguito, nell'app verrà creata una pagina che consente di modificare tutti i campi per un progetto (incluso il campo relativo al manager), ma può essere interessante creare anche una schermata simile a questa.

  1. Salvare le modifiche apportate finora.

  2. Nella barra di spostamento di sinistra fare clic o toccare la schermata AssegnaManager.

Aggiornare il titolo e inserire un testo introduttivo

  1. Modificare [Titolo] in Assegna manager.

  2. Aggiungere un'etichetta con le proprietà seguenti:

    • Proprietà Colore = GrigioScuro
    • Proprietà Dimensione = 18
    • Proprietà Testo = "Selezionare un progetto, quindi assegnare un manager"

    Layout Assegna manager

Aggiungere una freccia Indietro per tornare alla schermata SelezionaAttività

  1. Fare clic o toccare la barra blu nella parte superiore della schermata.

  2. Nella scheda Inserisci fare clic o toccare Icone e quindi fare clic o toccare Sinistra.

    Inserire freccia sinistra

  3. Spostare la freccia a sinistra della barra blu e impostare le proprietà seguenti:

    • Proprietà Colore = Bianco
    • Proprietà Altezza = 40
    • Proprietà DopoSelezione = Navigate(SelezionaAttività, Dissolvenza)
    • Proprietà Larghezza = 40

    Aggiungere pulsante Indietro

Aggiungere e modificare una raccolta

  1. Nella scheda Inserisci scegliere o toccare Raccolta, quindi Verticale.

    Aggiungere una raccolta verticale

  2. Selezionare Titolo, sottotitolo e corpo dal menu Layout nel riquadro destro.

    Modificare il layout raccolta

    La raccolta include ora il layout giusto, ma contiene ancora il testo di esempio predefinito, che verrà modificato in seguito.

    Raccolta con testo predefinito

  3. Impostare le proprietà seguenti per la raccolta:

    • Proprietà BorderThickness = 1
    • Proprietà BorderStyle = Punteggiato
    • Proprietà Items = Filter('Dettagli progetto', AssegnatoPM="Non assegnato"). Solo i progetti senza alcun manager assegnato sono inclusi nella raccolta.

    Raccolta con il testo dall'elenco

  4. Nel riquadro destro, aggiornare i campi in modo che corrispondano all'elenco seguente:

    • ApprovedDate
    • Stato
    • Titolo

    Campi della raccolta

  5. Ridimensionare le etichette nella raccolta come appropriato e rimuovere la freccia del primo elemento della raccolta (non è necessario spostarsi da questa raccolta).

    Rimuovere l'icona a forma di freccia

    La schermata deve ora apparire come nell'immagine seguente.

    Raccolta formattata

Modificare il colore di un elemento, se è selezionato

  1. Selezionare la raccolta, quindi impostare la proprietà TemplateFill If (ThisItem.IsSelected=true, Orange, White).

  2. Selezionare un elemento nella raccolta. La schermata deve ora apparire come nell'immagine seguente.

    Raccolta con l'elemento selezionato

Aggiungere un'etichetta, input di testo e il pulsante OK per inviare le assegnazioni del manager

  1. Fare clic o toccare fuori dalla raccolta che è stata modificata.

  2. Nella scheda Inserisci fare clic o toccare Etichetta. Trascinare l'etichetta sotto la raccolta, a sinistra. Impostare le proprietà seguenti per l'etichetta:

    • Proprietà Dimensione = 20
    • Proprietà Testo = "Manager:"

    Aggiungere etichetta Manager

  3. Nella scheda Inserisci fare clic o toccare Testo e quindi Input di testo. Trascinare l'input di testo sotto la raccolta, al centro. Impostare le proprietà seguenti per l'elenco a discesa:

    • Proprietà Predefinita = ""
    • Proprietà Altezza = 60
    • Proprietà Dimensione = 20
    • Proprietà Larghezza = 250

    Aggiungere un input di testo

  4. Nella scheda Inserisci fare clic o toccare Pulsante. Trascinare il pulsante sotto la raccolta, a sinistra. Impostare le proprietà seguenti per il pulsante:

    • Proprietà Altezza = 60
    • Proprietà DopoSelezione = Patch('Dettagli progetto', LookUp('Dettagli progetto', ID = Gallery1.Selected.ID), {AssegnatoPM: TextInput1.Text}). Per altre informazioni, vedere Approfondimento sulle formule.
    • Questa formula aggiorna l'elenco Dettagli progetto, impostando un valore per il campo AssegnatoPM.
    • Proprietà Dimensione = 20
    • Proprietà Testo = "OK"
    • Proprietà Larghezza = 80

    Aggiungere un pulsante OK

La schermata completata deve ora apparire come nell'immagine seguente.

Schermata Assegna manager completata

Passaggio 5: Creare la schermata VisualizzaProgetti

In questo passaggio verranno modificate le proprietà per la raccolta nella schermata VisualizzaProgetti. Questa raccolta mostra gli elementi d'elenco Dettagli progetto. Selezionare un elemento in questa schermata, quindi modificare i dettagli nella schermata AggiornaDettagli.

  1. Nella barra di spostamento di sinistra fare clic o toccare la schermata VisualizzaProgetti.

  2. Modificare [Titolo] in "Visualizza progetti".

  3. Nella barra di spostamento di sinistra toccare o fare clic BrowserGallery1 sotto VisualizzaProgetti.

  4. Selezionare Titolo, sottotitolo e corpo dal menu Layout nel riquadro destro.

    Modificare il layout raccolta

    La raccolta include ora il layout giusto, con il testo di esempio predefinito.

    Raccolta con testo predefinito

  5. Selezionare il pulsante di aggiornamento icona di aggiornamento e impostare la relativa proprietà DopoSelezione su Refresh('Dettagli progetto').

  6. Selezionare il pulsante di nuovo elemento Icona Aggiungi nuovo e impostare la relativa proprietà DopoSelezione su NewForm(EditForm1); Navigate(AggiornaDettagli, ScreenTransition.None).

Aggiungere una freccia Indietro per tornare alla schermata SelezionaAttività

  1. Nella barra di spostamento di sinistra fare clic o toccare la schermata AssegnaManager.

  2. Selezionare la freccia indietro ivi aggiunta e copiarla.

  3. Incollare la freccia nella schermata VisualizzaProgetti e posizionarla a sinistra del pulsante di aggiornamento.

    Pulsante Indietro

    Tutte le relative proprietà saranno incluse, tra cui la proprietà DopoSelezione di Navigate(SelezionaAttività, Dissolvenza).

Modificare l'origine dati per la raccolta BrowseGallery1

  1. Selezionare la raccolta BrowseGallery1, quindi impostare la proprietà Elementi della raccolta su SortByColumns(Filter('Dettagli progetto', StartsWith(Title, TextSearchBox1.Text)), "Titolo", If(SortDescending1, Descending, Ascending)).

    In questo modo, l'origine dati della raccolta viene impostata sull'elenco Dettagli progetto e viene usato il campo Titolo per la ricerca e l'ordinamento.

  2. Selezionare l'icona freccia Dettagli nel primo elemento della raccolta e impostare la proprietà DopoSelezione su Navigate(AggiornaDettagli, None).

     Raccolta Visualizza progetti - primo elemento selezionato

  3. Nel riquadro destro, aggiornare i campi in modo che corrispondano all'elenco seguente:

    • Stato
    • AssegnatoPM
    • Titolo

    Campi della raccolta

    La schermata completata deve ora apparire come nell'immagine seguente.

    Schermata Visualizza progetti completata

Passaggio 6: Creare la schermata AggiornaDettagli

In questo passaggio, verrà effettuata la connessione del modulo di modifica nella schermata AggiornaDettagli all'origine dati, quindi verranno apportate alcune modifiche a proprietà e campi. In questa schermata modificare i dettagli per un progetto selezionato nella schermata Visualizza progetti.

  1. Nella barra di spostamento di sinistra fare clic o toccare la schermata AggiornaDettagli.

  2. Modificare [Titolo] in "Aggiorna dettagli".

  3. Nella barra di spostamento di sinistra fare clic o toccare EditForm1 sotto AggiornaDettagli.

  4. Impostare le proprietà seguenti per il modulo:

    • Proprietà OrigineDati = 'Dettagli progetto'
    • Proprietà Elemento = BrowseGallery1.Selected
  5. Con il modulo ancora selezionato, nel riquadro destro fare clic o toccare la casella di controllo per i campi seguenti, nell'ordine indicato:

    • Titolo
    • AssegnatoPM
    • Stato
    • ProjectedStartDate
    • ProjectedEndDate
    • ProjectedDays
    • GiorniEffettivi

    Campi modulo di modifica

  6. Selezionare il pulsante di annullamento icona Annulla e impostare la relativa proprietà DopoSelezione su ResetForm(EditForm1); Back().

  7. Selezionare il pulsante di salvataggio icona segno di spunta e controllare la formula DopoSelezione: SubmitForm(EditForm1). Dato che si sta usando il controllo di modulo di modifica, è possibile usare Submit(), anziché Patch() come in precedenza.

La schermata completata dovrebbe apparire come nell'immagine seguente (se i campi sono vuoti, assicurarsi di selezionare un elemento nella schermata Visualizza progetti).

Schermata Aggiorna dettagli completata

Passaggio 7: Eseguire l'app

Ora che l'app è stata completata, verrà eseguita per verificarne il funzionamento. Nel sito di SharePoint verrà aggiunto un collegamento all'app. Sarà possibile eseguire l'app nel browser, ma potrebbe essere necessario condividerla con altri utenti perché possano eseguirla. Per altre informazioni, vedere Condividere le app.

Aggiungere un collegamento all'app

  1. Nell'utilità di avvio delle app di Office 365, fare clic o toccare PowerApps.

    PowerApps nell'utilità di avvio delle app di Office 365

  2. In PowerApps, fare clic o toccare i puntini di sospensione (... ) per App di gestione progetto, quindi Apri.

    Selezionare App di gestione progetto

  3. Copiare l'indirizzo (URL) per l'app nel browser.

    Copiare l'URL dell'app

  4. In SharePoint, fare clic o toccare MODIFICA COLLEGAMENTI.

    Modificare i collegamenti del sito di SharePoint

  5. Fare clic o toccare (+) collegamento.

    Aggiungere il collegamento all'app al sito di SharePoint

  6. Immettere "App di gestione progetto" e incollare l'indirizzo dell'app.

    Modificare le proprietà del collegamento

  7. Fare clic o toccare OK, quindi Salva.

    Salvare le modifiche del collegamento

Assegnare un manager a un progetto

Ora che l'app è disponibile nel sito di SharePoint, si supporrà il ruolo del revisore del progetto (verranno esaminati tutti i progetti a cui non è stato assegnato un manager) e verrà assegnato un manager a uno dei progetti. Quindi, si supporrà il ruolo del project manager e verranno aggiunte alcune informazioni su un progetto assegnatoci.

  1. Prima di tutto, si esaminerà l'elenco Dettagli progetto in SharePoint. Due progetti hanno un valore Non assegnato nella colonna AssegnatoPM. Saranno visualizzati in seguito nell'app.

    Progetti non assegnati nell'elenco di SharePoint

  2. Fare clic o toccare il collegamento all'app creato.

  3. Nella prima schermata, fare clic o toccare Assegna manager.

    Schermata di introduzione all'app

  4. Nella schermata Assegna manager saranno visualizzati i due progetti non assegnati dall'elenco. Selezionare il progetto Nuovo software BI.

    Raccolta con elemento selezionato

  5. Nell'input di testo Manager immettere "Fiamma Greco", quindi fare clic su OK.

    La modifica viene applicata all'elenco e la raccolta viene aggiornata in modo da visualizzare solo il progetto non assegnato rimanente.

    Assegnare il manager al progetto

  6. Tornare all'elenco di SharePoint e aggiornare la pagina. Si noterà che la voce di progetto è ora aggiornata con il nome del project manager.

    Project manager assegnato nell'elenco di SharePoint

Aggiornare i dettagli per il progetto

  1. Fare clic o toccare l'icona Indietro per tornare alla prima schermata, quindi fare clic o toccare Aggiorna dettagli.

    Schermata di introduzione all'app

  2. Nella schermata Visualizza progetti immettere "Nuovo" nella casella di ricerca.

    Eseguire la ricerca nella raccolta di app

  3. Fare clic sull'icona a forma di freccia Dettagli per l'elemento Nuovo software BI.

    Elemento della raccolta selezionato

  4. Nella schermata Aggiorna dettagli impostare i seguenti valori:

    • Campo DataInizioPrevista = "6/3/2017"
    • Campo DataFinePrevista = "24/3/2017"
    • Campo GiorniPrevisti = "15"

    Aggiornare i dettagli dell'elemento

  5. Fare clic o toccare l'icona del segno di spunta, per applicare la modifica all'elenco di SharePoint.

  6. Chiudere l'app e tornare all'elenco. Si noterà che la voce di progetto è ora aggiornata con le modifiche apportata a date e giorni.

    Elenco SharePoint aggiornato

Approfondimento sulle formule

Questa è la seconda sezione facoltativa sulle formule di PowerApps. Nel primo approfondimento, è stata esaminata una delle formule generata da PowerApps per la raccolta di esplorazione in un'app a tre schermate. In questo approfondimento, verrà esaminata la formula usata per la schermata AssegnaManager della seconda app. La formula è:

Patch ( 'Dettagli progetto', LookUp ( 'Dettagli progetto', ID = Gallery1.Selected.ID ), {AssegnatoPM: TextInput1.Text} )

Lo scopo di questa formula, quando si seleziona un elemento nella raccolta e si fa clic sul pulsante OK, è quello di aggiornare l'elenco Dettagli progetto e impostare la colonna AssegnatoPM sul valore specificato nell'input di testo. La formula usa le funzioni per eseguire queste operazioni:

  • La funzione Patch modifica uno o più record di un'origine dati.

  • La funzione LookUp trova il primo record in una tabella che soddisfa una formula.

Quando si uniscono le funzioni nella formula, ecco cosa succede:

  1. Quando si fa clic sul pulsante OK, la funzione Patch viene chiamata per aggiornare l'elenco Dettagli progetto.

  2. All'interno della funzione Patch, la funzione LookUp identifica quale riga dell'elenco Dettagli progetto occorre aggiornare. A tale scopo, confronta l'ID dell'elemento della raccolta selezionato con l'ID nell'elenco. Ad esempio, un ID pari a 12 significa che la voce per Nuovo software BI deve essere aggiornata.

  3. Ora che la funzione Patch ha ottenuto l'ID corretto, aggiornerà il campo AssegnatoPM con il valore contenuto in TextInput1.Text.

Passaggi successivi

Il passaggio successivo di questa serie di esercitazioni consiste nel creare un report di Power BI per analizzare i progetti.