Se applicazioni obsolete rallentano i tuoi processi aziendali, in questo articolo vedremo come implementare un’app in modo semplice e veloce usando Power Apps.

Dall'ottimizzazione dei flussi di lavoro al miglioramento della collaborazione, scopri in prima persona come Power Apps può rivoluzionare la tua organizzazione. Quindi allacciati le cinture e preparati per un tuffo nel mondo della trasformazione digitale!

Si consiglia di leggere il nostro articolo Power Apps Basics prima di proseguire per avere una maggiore familiarità con lo strumento. Se però preferisci andare direttamente all’azione, non ti preoccupare, non sarà strettamente necessario per poter seguire il seguente tutorial.

Breve ripasso su Power Apps

Power Apps è una suite di servizi Microsoft che permette l’implementazione rapida e low code di complesse app aziendali personalizzate connesse a varie origini dati online e locali (Dataverse, SharePoint, Excel,Office 365, Dynamics 365, SQL Server e così via).

Come Power Automate, Power Apps fa parte della Microsoft Power Platform, un insieme di piattaforme che permettono la creazione di soluzioni software su misura, composto principalmente dalle seguenti componenti:

• Power BI
• Power Apps
• Power Automate
• Power Virtual Agents
• Power Pages

È importante ricordare che una Power App viene sviluppata in e per un contesto prettamente aziendale. Nel caso ci fosse invece l’esigenza di implementare, per esempio, un e-commerce visibile anche a utenti esterni, sarebbe necessario usare Power Pages, piattaforma dedicata alla creazione di website external-facing.

Il caso: Innovation Projects

Di recente abbiamo avuto un Cliente che desiderava utilizzare PowerApps per tenere traccia dei progetti di innovazione interna.

Abbiamo quindi creato una Power App personalizzata che soddisfacesse tutti i requisiti e in questo articolo ne vedremo una versione molto semplificata, su dati fittizi, a titolo didattico. Nel complesso, la PowerApp che abbiamo creato ha avuto molto successo nel tracciare i progetti: era facile da usare e forniva tutte le informazioni di cui si aveva bisogno in un unico posto.

Il caso reale vedeva inoltre molte funzionalità aggiuntive e avanzate, ma in questo Case Study costruiremo un’app in grado di consentire agli utenti di creare nuovi progetti, modificarli, cancellarli e inviare email.

Come implementare un'app in Power Apps da zero: App Canvas vuota

Ci sono molti modi di implementare un’app in Power Apps, e oggi partiremo da un’app Canvas vuota.

Le app canvas sono un ottimo modo per creare rapidamente app per dispositivi mobili senza dover scrivere alcun codice. Sono facili da usare e consentono di creare rapidamente un'app dall'aspetto nativo su qualsiasi piattaforma.

Per prima andiamo su https://powerapps.microsoft.com/it-it/ e accediamo con le credenziali Microsoft aziendali. Attenzione: a meno dell’ottenimento di una licenza di prova gratuita, sarà necessario avere un’apposita licenza per l’utilizzo e la condivisione del prodotto, per esempio MS Office 365.

Dopo l’accesso si verrà rimandati alla Home Page di Power Apps, dove sarà possibile creare una nuova App, entrare in modifica/visualizzazione di una già creata, condividerla o eliminarla. Qui è inoltre possibile vedere tutte le app da noi create o che ci sono state condivise.

Creare un'App canvas vuota

Cliccando su App Vuota > (App canvas vuota) Crea> (Tablet) Crea si avvierà il processo di creazione di una nuova App.

È importante progettare l'app per il dispositivo principale in cui verrà utilizzata.

Esistono due fattori di forma tra cui scegliere: il fattore di forma Telefono e il fattore di forma Tablet. La differenza principale è costituita dalle dimensioni dello schermo, che determinano la quantità di spazio disponibile per compilare l'app.

Dopo qualche secondo saremo rimandati all’area di lavoro che permette di modificare il nostro applicativo: Power Apps Studio.

In questa finestra è fondamentale ricordarsi di salvare sempre prima di uscire, in modo da non perdere i progressi raggiunti sul proprio lavoro.

Prima di proseguire, nel caso non lo si fosse già fatto leggendo l’articolo PowerApps Basics, si consiglia di seguire il seguente tutorial che permette in pochi minuti di prendere familiarità con lo strumento:

Aggiungere i dati

Una volta aperto Power Apps Studio, andiamo a collegare i dati - basterà cliccare la relativa icona nella barra verticale di sinistra.

In questo esempio, andremo ad aggiungere una lista Sharepoint con dati relativi a diversi progetti di innovazione. Si consiglia la lettura del seguente articolo su come collegare dati Sharepoint in caso di difficoltà nel collegare i propri dati.

Una volta inclusi i dati, possiamo iniziare a lavorare sulla creazione di un’intestazione nella parte superiore e di un menù di navigazione laterale.

Aggiungere l'intestazione

1. Andare su Inserisci>Rettangolo. Spostare quindi il rettangolo in alto e allargarlo in modo da coprire l’ampiezza dell’app. Cambiare il colore a piacere cliccandolo e usando le proprietà sulla sinistra per selezionare quello desiderato.
2. Andare su Inserisci>Immagine, posizionarla in alto a sinistra e usare il pannello di sinistra per caricare un’immagine da inserire.
3. Andare su Inserisci>Etichetta di testo, posizionarla in alto a destra, scrivere nella sua proprietà Text "Welcome,"&User().FullName&”!”
4. Andare su Inserisci>Immagine, posizionarla in alto a destra e scrivere nella sua proprietà Image User().Image

Dovremmo ottenere un risultato come il seguente:

Si consiglia di aggiungere, sempre usando un’etichetta di testo, un titolo alla pagina.

Aggiungere un menù di navigazione laterale

Supponiamo di avere 2 pagine navigabili dal menù, una con la lista dei progetti, una con un form compilabile per segnalare qualcosa al gruppo ICT di supporto, per esempio un bug o una CR.

1. Rinominiamo la prima pagina creata col nome“Projects”, duplichiamo, e chiamiamo la pagina duplicata come “Support Form”
2. Andiamo sulla pagina Project e aggiungiamo un’icona (cercandola nel menù “Inserisci”) usato prima e collochiamola a sinistra. Scriviamo nella sua proprietà OnSelect Navigate(Project). Facciamo la stessa cosa creando una seconda icona a nostro piacimento ma inserendo nella sua proprietà OnSelect Navigate('Support Form'). In questo modo, quando cliccheremo la prima icona verremo rimandati alla prima pagina e, analogamente, cliccando sulla seconda, alla seconda. Copia-incolliamo il mini menù creato anche sulla pagina Support Form, in modo da poterlo usare in entrambe le schermate.

Possiamo anche aggiungere delle altre etichette di testo e delle forme per rendere il menù più comprensibile e piacevole.

Creare Gallery dei progetti e schermata Details

Andiamo quindi a creare un elenco consultabile di progetti inserendo una “RaccoltaVerticale” e selezionando la nostra origine dati.

Tale Raccolta, o Gallery, avrà degli elementi (o controlli) al suo interno, ognuno di essi modificabile a piacimento. È inoltre possibile aggiungere altri elementi sempre usando il tasto Inserisci tenendo la Gallery selezionata.

In questo caso manteniamo il nome dei progetti e le immagini, sostituiamo il sottotitolo messo automaticamente a ID con la descrizione del progetto (modificando la sua proprietà Text da Item.ID a Item.Description). Questo è possibile perché nella nostra lista Sharepoint abbiamo una colonna di descrizioni chiamata appunto“Description”, ma potremmo mettere una qualsiasi altra informazione di nostro interesse.

Infine aggiungiamo alla freccetta a destra, nella sua proprietà OnSelect, un comando di navigazione a una schermata di dettaglio.

Per far ciò creiamo una terza schermata, Details, scrivendo nella OnSelect della freccetta “Set(RecordToUse; ThisItem);; Navigate(Details);;”

Questo comando non solo permetterà di navigare alla schermata di dettaglio ma anche di salvare nella variabile RecordToUse l’item selezionato dalla raccolta.

Sarà quindi possibile arricchire la schermata di dettaglio mettendo immagini e etichette di testo che nelle loro proprietà (Image e Text rispettivamente) usando RecordToUse.<Info>dove <Info> va sostituito con l’informazione di interesse che vogliamo visualizzare, per esempio RecordId.Description.

Se vogliamo rendere facilmente editabili le informazioni relative a un record della lista Sharepoint sarà sufficiente inserire un Modulo di Modifica e selezionare nuovamente l’origine dati utilizzata, ottenendo una schermata di dettaglio preconfigurata e che prevede la modifica e l’eliminazione del record dalla base dati in maniera semplice.

Per esempio, aggiungendo nella schermata di dettaglio, vicino al form creato, anche un’icona di salvataggio e una di cancellazione, semplicemente scrivendo nelle loro relative proprietà OnSelect le seguenti formule, avremo creato un’app con queste funzionalità.

• Per salvare le modifiche: SubmitForm(NomeForm)
• Per cancellare: Remove(NomeTabellaDiOrigine;OggettoDaRimuovere)

Usando sempre un Modulo di Modifica - impostato però nella sua proprietà di “Modalità predefinita” a “Nuovo” - sarà possibile creare un form che permette, sempre usando la funzione SubmitForm, di aggiungere nuovi record dentro alla fonte dati.

Si consiglia di seguire il seguente tutorial per familiarizzare con i form di Power Apps in maniera più completa.

Aggiungere una schermata Support Form

Vediamo ora come aggiungere un form alla pagina di Support:

1. Nella pagina di Support aggiungere due caselle in input testuale, che nello specifico serviranno a immagazzinare l’oggetto e il contenuto dell’email da mandare. Chiamare i due oggetti rispettivamente BoxOggetto e BoxBody.

2. Cliccare l’icona di Power Automate a sinistra > cliccare Aggiungi flusso > selezionare l’ultimo modello di flusso. In particolare si tratta di quello che permette di cliccare un pulsante e inviare un’email. Seguire le istruzioni e in questo modo si sarà implementato un piccolo flusso Power Automate che quando chiamato invia un’email.

3. Aggiungere un’icona settando la sua proprietà OnSelect a 'ClickabuttoninPowerAppstosendanemail'.Run("Email_a_cui_inviare";BoxOggetto.Text; BoxBody.Text). In questo modo il bottone, ogni volta che verrà cliccato, farà iniziare l’esecuzione del flusso 'ClickabuttoninPowerAppstosendanemail' creato inviando un’email all’indirizzo indicato con oggetto e corpo presi direttamente dai due box di input testuali.

È possibile aggiungere ulteriori dettagli alla pagina, per esempio integrare i box con dei placeholder, aggiungervi delle etichette di testo o dei pulsanti che resettino i box: basterà mettere sulla loro proprietà OnSelect rispettivamente Reset(BoxOggetto) e Reset(BoxBody).

Come abbiamo visto, Microsoft Power Apps può essere quindi usato in combinazione con altre tecnologie per semplificare la creazione di app potenti per l'organizzazione, tra cui Power Automate.

Power Apps in verità è già in grado di eseguire numerose funzioni, ad esempio inviare un’email, e in questo esempio è stato usato un flusso Power Automate solo a titolo didattico. Rimane però chiaro che che gli strumenti di Power Platform insieme possono estendere enormemente il potenziale di ognuno dei propri componenti. Sarebbe infatti consigliabile usare Power Automate solo per soluzioni più complesse, ad esempio i workflow di approvazione, non disponibili su Power Apps.