delete

Contattaci

back to resources

Power Apps Tutorial – Case Study: come costruire una business app da zero

data
17/4/2023
data progetto
autore
Carla Melia
cliente
partnership
url
No items found.

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
Microsoft Power Platform

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

Home Page Power Apps

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.

Power Apps - Crea App canvas vuota

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.

Power Apps - App esempio

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.

Power Apps Studio - Aggiunta dati

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:

Power Apps - Esempio intestazione

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.

Power Apps - Esempio menù di navigazione

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);;”

Power Apps - Esempio gallery progetti

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)
Power Apps - Esempio dettaglio

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.

Power Automate - Invio 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.

Power Apps - Esempio Support Form

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

Risultati

resources

Tableau per la Business Intelligence: introduzione, tutorial e confronto

Tableau per la Business Intelligence: introduzione, tutorial e confronto

Introduzione a Qlik Sense, piattaforma di Business Intelligence avanzata

Introduzione a Qlik Sense, piattaforma di Business Intelligence avanzata

Applicazioni Cloud Native: definizione, vantaggi e tecnologie

Applicazioni Cloud Native: definizione, vantaggi e tecnologie

Power Apps Tutorial – Case Study: come costruire una business app da zero

Power Apps Tutorial – Case Study: come costruire una business app da zero

Il futuro del gaming tra F2P, GaaS, Crypto e Play to Earn

Il futuro del gaming tra F2P, GaaS, Crypto e Play to Earn

Power Apps Basics: interfacce, implementazione & vantaggi

Power Apps Basics: interfacce, implementazione & vantaggi

Strumenti di Business Intelligence: QlikSense & Power BI a confronto

Strumenti di Business Intelligence: QlikSense & Power BI a confronto

Introduzione a Serverless: non solo Lambda Function

Introduzione a Serverless: non solo Lambda Function

Metaverso: siamo pronti a cogliere l’opportunità?

Metaverso: siamo pronti a cogliere l’opportunità?

Recap Flutter Forward 2023: le 7 novità più interessanti

Recap Flutter Forward 2023: le 7 novità più interessanti

Let's Redux React to a Game

Let's Redux React to a Game

Introduzione a PowerShell

Introduzione a PowerShell

Pago con carta: i trend dei pagamenti digitali e il futuro delle carte di credito

Pago con carta: i trend dei pagamenti digitali e il futuro delle carte di credito

NFT World: il fenomeno NFT tra metaverso, business e GameFi

NFT World: il fenomeno NFT tra metaverso, business e GameFi

Quick Escape Room

Quick Escape Room

Orbyta Invaders Ignition

Orbyta Invaders Ignition

Il lancio della nuova Identity di Orbyta parte dal Metaverso!

Il lancio della nuova Identity di Orbyta parte dal Metaverso!

development

design

metaverse

brand identity

Database a grafo in SQL Server

Database a grafo in SQL Server

Data Science Job Roles: i 4 ruoli più richiesti nel settore

Data Science Job Roles: i 4 ruoli più richiesti nel settore

Teoria dei giochi: Propagazione delle strategie

Teoria dei giochi: Propagazione delle strategie

The chosen one: .NET 5

The chosen one: .NET 5

Network Science e Social Network Analysis

Network Science e Social Network Analysis

Isolation levels on SSMS

Isolation levels on SSMS

Teoria dei Grafi

Teoria dei Grafi

Creare un podcast in automatico a partire da audio vocali e musica

Creare un podcast in automatico a partire da audio vocali e musica

Teoria dei Giochi

Teoria dei Giochi

Recommender systems: principali metodologie degli algoritmi di suggerimento

Recommender systems: principali metodologie degli algoritmi di suggerimento

Introduction to Quantum Computing and Qiskit

Introduction to Quantum Computing and Qiskit

System Versioned Tables

System Versioned Tables

Vim o non Vim

Vim o non Vim

I vantaggi di un Message Broker

I vantaggi di un Message Broker

PlayStation 5 e l'accesso ai dati: un cambio architetturale?

PlayStation 5 e l'accesso ai dati: un cambio architetturale?

Protezione dei Web Services

Protezione dei Web Services

need more info?

contattaci