Creare un'app per gestire progetti

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

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.

   

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

   

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.

   

4. Fare clic o toccare 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.

   

2. Rinominare la schermata SelezionaAttività.

   

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.

   

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

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.

   

3. Toccare o fare clic su Nuova connessione.

   

4. Fare clic o toccare SharePoint.

   

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

   

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

   

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

   

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

   

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

   

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

   

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

   

Aggiungere due pulsanti di navigazione

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

   

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.

   

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

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

   

   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 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 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"

   

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.

   

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 e modificare una raccolta

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

   

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

   

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

   

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.

   

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

   • ApprovedDate
   • Stato
   • Titolo

   

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

   

   La schermata deve ora apparire come nell'immagine seguente.

   

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.

   

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:"

   

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

   

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

   

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

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.

   

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

   

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

6. Selezionare il pulsante di nuovo elemento 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.

   

   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 nel primo elemento della raccolta e impostare la proprietà DopoSelezione su Navigate(AggiornaDettagli, None).

   

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

   • Stato
   • AssegnatoPM
   • Titolo

   

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

   

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

   

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

7. Selezionare il pulsante di salvataggio 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).

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.

   

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

   

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

   

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

   

5. Fare clic o toccare (+) collegamento.

   

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

   

7. Fare clic o toccare OK, quindi Salva.

   

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.

   

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

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

   

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

   

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.

   

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.

   

Aggiornare i dettagli per il progetto

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

   

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

   

3. Fare clic sull' per l'elemento Nuovo software BI.

   

4. Nella schermata Aggiorna dettagli impostare i seguenti valori:

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

   

5. Fare clic o toccare 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.

   

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.