Lavorando in un dipartimento IT so benissimo quanto spesso capiti che venga richiesto di creare per il business applicazioni personalizzate sempre più integrate, che siano in grado di raccogliere e mostrare in modo trasparente per l’utente i dati proveniente da sistemi ed sorgenti diverse.

Purtroppo le soluzioni custom sono spesso costose da implementare ma anche, e soprattutto, da manutenere e far evolvere in funzione delle esigenze di business.

Questa sfida è diventata ancor più impegnativa dal momento in cui vengono adottate sempre più soluzioni verticali spesso in cloud, complicando notevolmente la complessità delle integrazioni e rischiando di aumentare l’investimento di tempo e denaro per assicurarsi il funzionamento desiderato.

Con l’obiettivo di rendere più semplice e diretto lo sviluppo di applicazioni, è nata una business application che aiuta ad estendere Microsoft 365, Dynamics 365 ed Azure con servizi e applicazioni di terze parti o personalizzate: la Microsoft Power Platform. La chiave di volta di una Power Platform risiede nello sviluppo a basso utilizzo di codice, unendo processi automatizzati di tipo data-driven e business logic configurabili per le proprie esigenze.

In questo articolo ti voglio spiegare come puoi creare passo dopo passo una applicazione ottimizzata per tablet o mobile, ma utilizzabile da qualunque browser, in pochi semplici passi.

Come accedere a Power Apps

Per utilizzare Power Apps dal tuo account aziendale di Office 365, deve essere stata precedentemente attivata la licenza di utilizzo.

• Per avviare Power Apps accedi ad Office 365 e clicca sul menù Applicazioni

• Seleziona Power Apps.

• Se non lo trovi subito, puoi cliccare sul link Tutte le App e tramite la form di ricerca, trovare Power Apps.

• Si avvia Power Apps Studio, l’ambiente di sviluppo in grazie al quale potrai creare le tue applicazioni

• Dall’ Home Page di Power Apps Studio puoi creare tre tipologie di applicazione
  • App Canvas: si tratta di applicazioni ottimizzate per dispositivi mobile e tablet, ma che possono essere usate anche da browser. Oltre a dover usare un po’ di codice per definire il suo comportamento, con questo tipo di applicazione puoi creare il layout dell’applicazione come meglio credi.
  • App basata su Modello: la progettazione di app basate su modello non richiede codice e le app create possono essere semplici o molto complesse. A differenza dello sviluppo di app canvas in cui il progettista ha il controllo completo sul layout dell’app, con le app basate su modello molto del layout viene determinato automaticamente e in gran parte designato dai componenti che si aggiungono all’app.
  • Portale: ti permette di creare siti web personalizzati che possono essere utilizzati sia da utenti della tua azienda che da utenti esterni (clienti, partner, fornitori) affinché possano interagire con i tuoi processi.

In questo articolo ci focalizzeremo sulla prima opzione: App Canvas.

Power Apps Studio: concetti principali

Creiamo una nuova App Canvas.

• Dopo aver avvitato Power Apps, clicca Crea App Personalizzata > App Canvas

• Inserisci il nome dell’applicazione e il tipo di Formato (Tablet o Telefono) e clicca Crea

• Viene creata una nuova applicazione che però è vuota.

• Power Apps ha creato una schermata vuota chiamata Screen1, puoi eliminarla
• Per fare questo esercizio andremo a creare una applicazione per la gestione degli appuntamenti in agenda, molto simile a quella che abbiamo visto in questo articolo.

Come connettere i dati

La prima cosa da fare dopo aver creato la tua applicazione è quella di connettere i dati.

Power Apps supporta svariate tipologie di sorgenti dati: Microsoft Dynamics, Salesforce, Share Point, One Drive, ecc.

In questo esercizio ci collegheremo allo stesso foglio Excel che abbiamo usato in questo tutorial.

Ricordati che prima di iniziare, il file Excel va opportunamente preparato: non preoccuparti, se segui le indicazioni che ho scritto non avrai problemi.

• Accedi al workspace della tua applicazione e clicca su connettersi ai dati.

• Clicca su Aggiungi Dati > Connettori > One Drive for Business

• Seleziona il file Excel da collegare

• Seleziona la tabella che Power Apps utilizzerà per leggere i scrivere i dati e clicca su Connetti

• Puoi controllare il qualunque momenti quali e quante sorgenti dati sono state collegate alla tua applicazione cliccando sulla sezione Dati

Come creare una pagina di ricerca

Creiamo una nuova schermata in una applicazione Power Apps che servirà per cercare i record della tabella sorgente.

• Clicca su Nuova Schermata e seleziona il tipo layout Elenco

• Power Apps ha aggiunto una nuova pagina.

Configurazione di una gallery

• Clicca sull’oggetto Gallery raccolta_appuntamenti

• Imposta l’origine dati da mappare con questo elenco

• Clicca su Layout per scegliere il formato di visualizzazione desiderato

• Seleziona come l’opzione Titolo, Sottotitolo e Corpo

• Clicca su Modifica Campi e seleziona nel menù a tendina i campi che desideri mostrare

• Power Apps ti mostra in tempo reale una preview della maschera

• Clicca sull’etichetta nella barra del titolo per modificarla.
• Ogni elemento può, inoltre, essere personalizzato cambiandone il colore, il font e le dimensioni del carattere

• Per modificare l’aspetto della raccolta, è sufficiente modificare l’aspetto del primo record: tutti gli gli altri elementi della raccolta saranno formattati esattamente nella stessa maniera.

Bene, ora che hai personalizzato l’aspetto della tua prima pagina puoi lanciare l’anteprima. Tuttavia, ti renderai subito conto che schiacciando sui vari pulsanti non succede nulla.

Non preoccuparti! Questo succede perché devi configurare il comportamento della maschera, ovvero dei dire cosa succedere quando premi sui vari pulsanti della pagina.

Nei prossimi paragrafi ti spiegherò come configurare i vari elementi della tua applicazione.

Per comodità, ti consiglio di rinominare gli elementi più significativi della schermata di ricerca; in questo modo sarà più semplice referenziarli nelle varie funzioni che andrai a scrivere.

• Per rinominare un elemento, accedi alla struttura dell’applicazione e fai doppio clic sull’elemento che vuoi rinominare.

• Scrivi il nuovo nome e premi Invio

Ecco come ho rinominato i vari componenti

• Icona e Campo di Ricerca

• Toolbar della schermata con i pulsanti per aggiornare, ordinare e creare un nuovo record

• Galleria e campi della galleria

Funzione Search

La prima funzione che andremo ad implementare serve per effettuare una ricerca all’interno di una Galleria di record.

Per poter effettuare una ricerca, abbiamo bisogno di un campo di testo in cui l’utente deve poter scrivere una parola o una frase che poi l’applicazione utilizzerà per filtrare i record.

• Quando abbiamo creato la schermata, Power Apps ha aggiunto automaticamente un campo di testo che servirà proprio a questo scopo.
• Nell’esempio che sto facendo, ho rinominato il campo di testo come nella figura di seguito.
• Quello che faremo è configurare la raccolta affinché venga aggiornata in funzione di quello che è scritto in questo campo di testo

• Seleziona l’elemento Galleria e posizionati sul campo della formula (barra in alto) e cerca la proprietà Items.
• La proprietà Items ci dice qual è la sorgente dati che la galleria sta usando per mostrare a video i dati
• In questo momento, la galleria è mappata con l’origine dati della nostra applicazione

• Scrivi nel campo della formula questa espressione: Search(TODO_T;CercaAppuntamentiTesto.Text;”Attività”;”Note”)
• Search è una funzione di Power Apps che serve per eseguire una ricerca all’interno di una raccolta.
• Questa funzione vuole 3 parametri:
  • il nome della tabella su cui eseguire la ricerca: in questo caso userò la tabella del file Excel che ho connesso all’applicazione
  • il campo da cui prendere la stringa di ricerca: CercaAppuntamentiTesto.Text
  • le colonne della tabella sui cui eseguire la ricerca: “Attività“ e “Note“

Se esegui la preview della tua applicazione puoi testare come la tua raccolta viene aggiornata in funzione di quello che scrivi nel campo di ricerca

Funzione SortByColumn

La funzione SortByColumn permette di ordinare i dati di una raccolta per una determinata colonna.

• Seleziona la raccolta e posizionati sul campo della formula sotto la proprietà Items.
• Nel campo della formula scrivi questa espressione:
  • SortByColumns(Search(TODO_T;CercaAppuntamentiTesto.Text;”Attività”;”Note”);”Attività”)

• La funzione SortByColumns vuole tre parametri
  • la raccolta che deve essere ordinata.
    • Nel nostro caso sarà l’output della funzione che abbiamo inserito precedentemente per gestire la ricerca: Search(TODO_T;CercaAppuntamentiTesto.Text;”Attività”;”Note”)
  • la colonna in base alla quale eseguire l’ordinamento: “Attività“
  • l’ordinamento ascendente o discendente.

Per cambiare l’ordinamento in senso ascendente o discendente, possiamo gestire il terzo parametro della funzione SortByColumns in funzione del valore di questa condizione: If(SortDescending1; SortOrder.Descending;Ascending) che è gestita da questo bottone

Pertanto, la formula completa da inserire diventa: SortByColumns(Search(TODO_T;CercaAppuntamentiTesto.Text;”Attività”;”Note”);”Attività”;If(SortDescending1; SortOrder.Descending;Ascending))

Funzione Refresh

La funzione Refresh viene utilizzata per far si che l’applicazione aggiorni i dati visualizzati rileggendoli dall’origine dai collegata.

Questa funzione è utile in quei casi in cui più utenti possono accedere alla stessa origine dati e vuoi far si che l’applicazione mostri sempre dai aggiornati.

• Per richiamare manualmente la funzione Refresh, clicca sull’icona relativa
• Seleziona la proprietà OnSelect ed imposta la seguente funzione
  • Refresh(TODO_T)

Come visualizzare un record

In una applicazione Power Apps una Raccolta (o Gallery) è un elemento molto utile quando vuoi mostrare all’utente un elenco di record (ad esempio un elenco di appuntamenti oppure di contatti).

Tuttavia, nella maggior parte dei casi avrai a che fare con record che hanno molte informazioni (o campi) da mostrare.

Per fare questo serve una pagina di dettaglio che mostra tutti i dettagli del record; questa pagina sarà raggiungibile dalla schermata iniziale cliccando su questo pulsante Visualizza Dettagli

• Clicca su Nuova Schermata > Modulo

• Dai un nome alla nuova schermata

• Clicca sul componente EditForm1

• Vai sulle proprietà e clicca su Origine Dati per collegare i dati alla form

• Clicca su Modifica Campi per configurare i campi della form

• Clicca su Aggiungi Campi e seleziona i campi da visualizzare

• Dopo aver selezionato campi da visualizzare, nella schermata potrai vedere l’aspetto della form

• Cliccando nuovamente sul modulo EditForm1 e su Modifica Campi, puoi riordinare i campi

• L’ultima cosa da fare è modificare i campi affinché siano in sola lettura. Per far questo devi selezionare le proprietà del campo ed impostare l’attributo Tipo di Controllo a Visualizza il Testo

• Elimina questa icona

• Rinomina il modulo EditForm1 come DettagliAppuntamento
• Cambia l’icona Cancel come da Figura

Anche in questo caso, per comodità, ho rinominato i componenti più significativi della schermata.

Funzione Navigate

La funzione Navigate ci consente di spostarti tra le varie maschere della form: useremo questa funzione per aprire la schermata di dettaglio dalla pagina di ricerca e viceversa.

Collegare la schermata di ricerca alla schermata di dettaglio

Quello che vogliamo è fare si che dalla pagina di ricerca quando l’utente clicca su questo bottone, Power Apps deve aprire la form di dettaglio per visualizzare le informazioni del record selezionato.

• Apri la struttura della form di dettaglio e clicca sul modulo DettagliAppuntamento

• Nella barra degli strumenti, seleziona la proprietà Items ed inserisci la funzione GalleriaAppuntamenti.Selected dove GalleriaAppuntamenti è la raccolta che avevamo creato nella schermata principale di ricerca

• Vai alla schermata di ricerca (SchermoPrinciplae) e seleziona il bottone per aprire la schermata di dettaglio

• Nella barra degli strumenti seleziona la proprietà OnSelect e poi clicca su Azione
• Seleziona l’azione Navigate e la schermata sulla quale deve spostarsi (schermata di dettaglio).
• Puoi indicare anche un tipo di transizione (es: Fade)

• Il risultato è la funzione che viene inserita da Power Apps: Navigate(SchermoDettagli; ScreenTransition.Fade)

Collegare la schermata di dettaglio alla schermata di ricerca

Implementiamo un bottone per tornare alla pagina di ricerca dalla schermata di dettaglio.

• Vai alla scherma di dettaglio e clicca sull’icona Indietro che abbiamo creato precedentemente

• Vai alla proprietà OnSelect dell’icona che abbiamo appena creato ed inserisci questa azione: Navigate(screen_appuntamenti; ScreenTransition.Fade)

Come eliminare un record

Implementiamo un bottone per eliminare un record dal file Excel

• Accedi alla schermata di dettaglio ed inserisci un nuova icona per la cancellazione del record.

• Vai alla proprietà OnSelect di questa icona ed inserisci la funzione Remove(TODO_T; DettagliAppuntamento.Current)

Funzione Remove

• La funzione Remove vuole due parametri: la tabella dati dalla quale eliminare il record ed il riferimento al record da eliminare.
• Nell’esempio che sto facendo, TODO_T è l’origine dati che abbiamo collegato alla form DettagliAppuntamento

• Per far si che dopo la cancellazione del record l’applicazione torni alla schermata principale, possiamo aggiungere l’istruzione Back() alla proprietà OnSelect dell’icona di cancellazione.
• Ricorda che puoi concatenare le istruzioni in una funzione usando il doppio “punto e virgola”

• Grazie alla funzione Remove, potrai eliminare dei record dal file Excel usando la tua app

Come modificare un record

Per creare una pagina di modifica, andremo ad inserire una nuova Schermata di tipo Modulo, esattamente come abbiamo fatto poco fa.

• Clicca su Inserisci > Nuova Schermata > Modulo

• Dopo aver collegato la sorgente dai al modulo form e configurato i campi da visualizzare dovresti ottenere una schermata simile alla seguente

• Anche in questo caso, dovremo impostare la proprietà Item del modulo form (che nel mio esempio si chiama ModificaAppuntamento)
• Inserisci la funzione raccolta_appuntamenti.Selected dove raccolta_appuntamenti è la solita raccolta che abbiamo creato nella maschera di ricerca

Funzione SubmitForm

La funzione SubmitForm serve a salvare le modifiche che vengono inserite da un utente attraverso un modulo di modifica.

• Accedi alla schermata di modifica del record
• Clicca sull’icona ApplicaModifiche

• Nella proprietà OnSelect inserisci la funzione SubmitForm(ModificaAppuntamento)
• Se vuoi puoi aggiungere l’istruzione Back() per tornare alla schermata di dettaglio una volta applicata la modifica.

Funzione ResetForm

La funzione ResetForm serve per annullare le modifiche che sono state fatte ad un record tramite un modulo di modifica e che non sono ancora state salvate.

• Accedi alla schermata di modifica del record
• Clicca sull’icona AnnullaModifiche

• Nella proprietà OnSelect inserisci la funzione ResetForm(ModificaAppuntamento);;Back()

Funzione EditForm

Per aprire la form di modifica del record creeremo un bottone della scherma di dettaglio e tramite la funzione EditForm gestiremo l’apertura della form di modifica.

• Apri la schermata di dettaglio
• Aggiungi una nuova icona e rinominala in IconaModifica

• Modifica la proprietà OnSelect dell’icona IconaModifica con la funzione EditForm(ModificaAppuntamento)

• ModificaAppuntamento è il nome del modulo che abbiamo creato nella schermata di modifica
• Per avviare la transizione alla form di modifica, aggiungeremo alla proprietà OnSelect dell’icona IconaModifical’istruzione Navigate

Come creare un record

L’ultima funzionalità che vediamo in questo tutorial riguarda come implementare la funzionalità di inserimento o creazione di un nuovo record.

Per fare questo useremo la funzione NewForm.

Funzione NewForm

• Clicca sulla schermata di ricerca e seleziona l’icona per la creazione del nuovo record

• Vai alla proprietà OnSelect e scrivi la seguenti istruzione:
  • NewForm(ModificaAppuntamento);;Navigate(SchermoModifica)

Cosa abbiamo imparato

In questa articolo abbiamo imparato a configurare i componenti principali di una applicazione sviluppata in Power Apps.

Abbiamo visto come filtrare i record di una raccolta e come modificare, cancellare e creare nuovi record.

Infine, abbiamo imparato ad utilizzare alcune le funzioni base di Power Apps:

• Search
• SortByColumns
• Refresh
• Navigate
• EditForm
• SubmitForm
• ResetForm
• Remove
• NewForm