Nella prima parte di questa serie di tutorial abbiamo visto come migrare una applicazione per la gestione del Customer Service sviluppata in Access su Power Apps usando le liste Share Point per salvare i dati.

In questa seconda parte del tutorial vorrei mostrarti come, partendo da semplici liste Share Point, ho replicato l’applicazione Customer Service in Access su piattaforma Power Apps in meno di un’ora.

Perché usare Power Apps

Qualche settimana fa, come molti altri giorni da una anno a questa parte, stavo partecipando all’ennesima videoconferenza su Teams quando ricevo in chat un messaggio da uno dei miei colleghi del Marketing.

“Daniele – mi chiede – avresti cinque minuti?“

“Si certo, dimmi pure” – la call Teams era abbastanza noiosa…

“Senti, mi dovresti aiutare. Ho bisogno di uno strumento per gestire le richieste d’ordine per la stampa delle brochure che i rivenditori richiedono dal sito aziendale.

In questo momento stiamo usando una casella di posta ma non va più bene: non riusciamo ad organizzare le attività.

Avresti qualche proposta?“

Come molte aziende di medie e grandi dimensioni, si fa spesso uso di sistemi di ticketing per gestire le richieste di assistenza. Tuttavia, in genere si tratta di applicativi pensati gestire l’AMS oppure per chi offre servizi di Post Vendita (Service o Ricambi).

Sicuramente qualcosa del genere avrebbe coperto il requisito ma di certo l’investimento sarebbe stato esagerato per il tipo di richiesta. L’unica soluzione percorribile era quella di pensare ad una soluzione custom, possibilmente sviluppata internamente. Ma quale?

L’esigenza era molto più semplice: un sistema per raccogliere ed organizzare le richieste provenienti dalla rete commerciale, facile e veloce da usare.

“Bene, dico io, riparliamone più tardi che ti faccio vedere”

“Perché, abbiamo già qualcosa?”

Faccio una veloce ricerca in Internet e vedo che esiste un modello Access per gestire il Customer Service.

Ma volevo dare qualcosa di più: quindi decido di scaricare quel modello ed implementarlo in Power Apps, personalizzandolo per le esigenze del mio collega

In questo articolo di farà vedere come ho realizzato questa applicazione.

Customer Service in Access

Customer Service è una applicazione Access disponibile tra i template che Microsoft mette a disposizione e che permette di gestire richieste di assistenza.

L’applicazione gestisce tre oggetti principali:

• Employees: sono i dipendenti dell’azienda che si occupano si gestire le richieste di assistenza
• Customers: i clienti che sottomettono le richieste di supporto
• Cases: le richieste di assistenza

Il layout di questo template è molto semplice e funzionale: per ciascuno dei tre oggetti è stata creata una maschera di riepilogo dove puoi vedere tutto l’elenco del record ed eventualmente puoi filtrare i dati.

Ad esempio questa è la lista del Cases:

Cliccando sul bottone New Case è possibile inserire un nuovo record usando una form personalizzata nella quale è possibile, tra le altre cose, inserire anche degli allegati.

Mi sono reso conto che realizzare una applicazione web simile, in poco tempo con Power Apps non era una cosa così complicata, così in qualche ora ora di lavoro ho creato una soluzione completamente funzionante ed integrata con la piattaforma Office 365.

Customer Service in Power Apps

Home Page

L’home page dell’applicazione consiste in una schermata molto semplice dove sono presenti dei bottoni per accedere ai tre oggetti principali.

Inoltre, 3 contatori mostrano in tempo reale il numero di richieste caricate nel sistema. Cliccando su uno dei tre bottoni è possibile aprire le schermate dove gestire i record.

Se preferisci, potresti inserire un piccolo grafico a barre per mostrare dei dati in maniera aggregata, oppure limitarti ad una semplice landing page con i link alle sotto-funzionalità specifiche.

In generale, il mio consiglio è di creare una home page il più possibile semplice e pulita, senza troppi contenuti.

Un posto dove l’utente può tornare velocemente tutte le volte che vuole e dal quale può iniziare la navigazione all’interno della tua app.

Case List

In questa pagina l’utente vede l’elenco di tutti i Case che sono stati creati.

Ogni record di questa raccolta mostra alcune delle informazioni, quelle più importanti: una descrizione del case, il cliente che ha fatto la richiesta, la data di apertura e così via.

Per implementare questa pagina ho usato un oggetto raccolta (Gallery), che ho poi personalizzato per mostrare i campi più importanti.

Ho inserito un campo di ricerca globale e dei filtri per visualizzare i case in base allo stato.

Case Details

Da questa schermata l’utente è in grado di gestire tutte le informazioni relative al Case come, ad esempio, la data di apertura e di chiusura, un titolo, la descrizione, la priorità e l’assegnatario.

Ti faccio notare che alcuni dei campi presenti non sono campi di testo ma menù a tendina o combo-box.

Ad esempio nel campo Assigned To verrà inserito il nome dell’impiegato che ha in carico il case mentre nel campo Status sarà possibile inserire un valore tra quelli previsti (New, Active, Closed)

Customer List

Nella scheda Customer List è possibile vedere l’elenco dei clienti che sono stati caricati a sistema.

Per ciascun cliente viene riportato il numero di case nuovi e quelli in lavorazione.

Ho realizzato questa tabella usando una raccolta che ho poi personalizzato per renderla simile ad una tabella (più avanti ti spiego come ho fatto).

Ho creato un campo di ricerca che permette di filtrare la lista e un bottone Nuovo Cliente che consente di creare una nuova anagrafica.

Cliccando sul bottone Aggiorna è possibile aprire la scheda cliente per aggiornarne le informazioni del record selezionato.

Customer Details

La Scheda Cliente è organizzata in varie sezioni all’interno delle quali o raggruppato i campi per area tematica.

• General Information: informazioni di carattere generale come la ragione sociale, il nome e cognome del contatto e l’email.
• Phone Numbers: i contatti telefonici del cliente
• Address: recapiti del cliente

• Others: una sezione aggiuntiva per inserire delle note e degli allegati

Employee List

A differenza delle schede precedenti, nella schermata Lista Dipendenti ho utilizzata una Tabella Power Apps invece di una raccolta.

Questo tipo di vista è particolarmente indicato quando vuoi mostrare i dati in maniera molto compatta.

Cliccando sulla colonna Display Name viene aperta la scheda di dettaglio del dipendente.

Employee Details

La scheda di dettaglio del dipendente permette di gestire le informazioni come il nome, il cognome, l’indirizzo email e così via.

La sua struttura è molto simile alla scheda cliente. Tutti i campi sono stati raggruppati sotto aree tematiche specifiche per aiutare l’utente nella loro compilazione.

Come creare l’applicazione Customer Service

Se sei arrivato fino a qui, immagino tu sia desideroso di capire come ho realizzato questa applicazione.

Bene, andiamo.

Schermata ElencoDipendenti

La schermata ElencoDipendenti mostra l’elenco dei record di tipo Employees.

Da qui è possibile effettuare una ricerca per accedere al dettaglio del dipendente oppure aprire la schermata per creare un nuovo record.

Data Table

• Aggiungi una nuova schermata alla tua applicazione

• Clicca su Inserisci > Tabella Dati

• Seleziona la tabella ed imposta la sorgente dati: nel mio caso si tratta di una lista Share Point.
• Per comodità puoi rinominare la tabella come TableDipendenti

• Clicca su Modifica Campi per organizzare l’ordinamento dei campi da visualizzare nella tabella.

• Per creare un link alla schermata di dettaglio ho selezionato la colonna Display Name

• Ho impostato la proprietà On Select della colonna affinché cliccandoci sopra venga aperta la schermata di dettaglio del cliente (che ancora non abbiamo creato ma che vedremo tra pochissimo

• Infine ho attivato la proprietà Collegamento Ipertestuale per formattare la colonna come un link

Toolbar

Ho creato una toolbar con 2 funzioni: una funzione di ricerca ed un pulsante per aprire la form di creazione di un nuovo dipendente.

• Per implementare la ricerca crea un campo di testo txtCercaDipendente

• Seleziona la tabella TableDipendenti e vai alla proprietà Items.
• Inserisci nella formula l’espressione per effettuare la ricerca. Io ho usato la funzione Search. Ad esempio, nel mio caso ho scritto la seguente espressione Search(DEMO_APP_Employees;txtCercaDipendente.Text;”Title”;”Display_x0020_Name”; “Job_x0020_Title”)
  • DEMO_APP_Employees è il nome della sorgente dato
  • txtCercaDipendente è il nome del campo di testo in cui scrivere la parola da cercare
  • Title, Display_x0020_Name e Job_x0020_Title sono le colonne su cui la funzione Search effettua la ricerca

• Crea un nuovo bottone e posizionalo dove preferisci

• Se hai già creato la schermata e la relativa form per creare e aggiornare un dipendente puoi impostare la formula che deve scattare alla seleziona del pulsante
• Seleziona il bottone e vai alla proprietà OnSelect
• Inserisci l’espressione per aprire la form di creazione di un nuovo dipendente: NewForm(FormDipendente);;Navigate(SchedaDipendente)
  • SchedaDipendente è la schermata di creazione del nuovo dipendente
  • FormDipendente è il componente Form presente all’interno della schermata di SchedaDipendente

Schermata SchedaDipendente

Questa pagina serve per visualizzare ed aggiornare le informazioni di un dipendente piuttosto che per crearne uno nuovo.

• Aggiungi una nuova Schermata e rinominala SchedaDipendente.
• Aggiungi un Modulo di tipo Modifica

• Seleziona l’origine dati dove andrai a salvare i dati degli impiegati
• Imposta le seguenti proprietà
  • Colonna: 2
  • Layout: Verticale

• Clicca su Modifica Campi e riordina i campi come preferisci

Layout Form

Per organizzare e separare visivamente i vari attributi andremo a creare delle sezioni specifiche all’interno della form.

• Clicca su Modifica Campi > Aggiungi Una Scheda Personalizzata

• Seleziona la nuova scheda

• Posiziona la nuova scheda in prima posizione

• Allarga la scheda affinché occupi entrambe le colonne

• Clicca su Aggiungi un elemento dal riquadro Inserisci e seleziona un item di tipo Etichetta di Testo

• Inserisci il testo dell’etichetta, imposta il colore di sfondo e ridimensiona l’altezza della scheda

• Alla fine dovresti ottenere qualcosa di simile.

• Esegui la stessa operazione per inserire tutte le altre schede
  • General Information
  • Phone Numbers
  • Address
  • Others
  • ecc..

Toolbar

Nella toolbar di questa schermata ho aggiunto le funzionalità per salvare le modifiche, annullare le modifiche ed eliminare il record.

• Per implementare il salvataggio ho aggiungo un bottone che richiama la funzione: SubmitForm(FormDipendente);;Back()
  • FormDipendente è il nome del modulo Form che ho creato in questa schermata

• Per tornare alla schermata di ricerca dei dipendenti ho creato il bottone Annulla che esegue due operazioni
  • annulla le modifiche inserite e non salvate
  • torna alla schermata precedente
• Per effettuare queste due operazioni ho inserito la seguente funzione: ResetForm(FormDipendente);; Navigate(ElencoDipendenti)
  • FormDipendente è la form di modifica inserimento della schermata corrente
  • ElencoDipendenti è la schermata che abbiamo creato prima

• Per gestire la cancellazione di un record ho inserito un bottone che richiama questa funzione: Remove(DEMO_APP_Employees;FormDipendente.Current);;Back()
  • DEMO_APP_Employees è l’origine dati della form
  • FormDipendente.Current è il record corrente selezionato nella form

Schermata ElencoClienti

In questa schermata l’utente è in grado di vedere e l’elenco dei clienti che sono stati caricati nell’applicazione e di accedere al dettaglio tramite il bottone Aggiorna.

Grazie ad un campo di ricerca è possibile filtrare l’elenco e grazie al bottone Nuovo Cliente è possibile inserire un nuovo record di tipo Employee.

Come puoi notare, il layout di questa griglia è tabellare, tuttavia in questo caso non ho utilizzato un componente di tipo Data Table (come nel caso della schermata ElencoDipendenti) ma un componente di tipo Gallery.

Vediamo come fare.

Layout galleria clienti

• Crea una nuova Schermata ed inserisci una Raccolta Verticale

• Connetti la Raccolta Verticale all’Origine Dati.

• Modifica il Layout della Raccolta con il tipo Titolo, sottotitolo e corpo

• Aggiusta le dimensioni della Raccolta affinché occupi tutto lo spazio disponibile in larghezza

• Seleziona la prima riga della raccolta

• Con la selezione sulla prima riga della Raccolta attiva, clicca su Inserisci > Etichette

• Power Apps andrà cosi a creare una nuova etichetta all’interno della Raccolta
• Puoi aggiungere anche un Pulsante

• Seleziona i vari campi e posizionali tutti su una riga

• Aggiusta le loro dimensioni ed il formato del carattere come preferisci.
• Ovviamente puoi usare delle formule per presentare come meglio credi le informazioni

• Aggiusta l’altezza delle riga della Raccolta ed elimina l’icona di navigazione che è stata aggiunta automaticamente quando hai creato la raccolta

• Rinomina il pulsante ed allinealo al resto dei campi. Se hai già creato la scheda di dettaglio del cliente puoi già impostare la proprietà OnSelect: EditForm(FormCliente);; Navigate(SchedaCliente)
  • FormCliente è il nome del componente di tipo Form usato per vedere i campi del record Customer
  • SchedaCliente è la schermata di dettaglio del cliente

• Creiamo l’intestazione della nostra “tabella”.
• Clicca su Inserisci e seleziona un componente Rettangolo

• Ridimensiona il rettangolo affinché sia della stessa larghezza della Raccolta e posizionalo al di sopra di quest’ultima

• Inserisci una nuova Etichetta per ciascuna colonna e posizionala al di sopra della rispettiva colonna

• Per gestire l’ordinamento dei record in base ad uno dei campi visualizzati, crea una icona e posizionala vicino al campo per il quale effettuare l’ordinamento.

• Vai alla proprietà OnSelect dell’icona ed inserisci la seguente funzione: UpdateContext({SortDescendingCliente: !UpdateContext({SortDescending: !SortDescending});;Set(OrderColumns; “Title”)})
  • SortDescending è una variabile che stiamo creando in questo momento e che utilizzeremo per gestire l’ordinamento dei dati
  • OrderColumns è un altra variabile in cui vado a memorizzare la colonna per la quale è stato cliccato l’ordinamento

• Aggiungi altre icone di ordinamento per tutte le colonne che vuoi.
• Imposta su ciascuna icona sempre la stessa funzione con l’unica differenza che andrai a valorizzare la variabile OrderColumns con il nome della colonna specifica

• Clicca sulla Raccolta e vai alla proprietà Items ed inserisci questa funzione: SortByColumns(DEMO_APP_Customers; OrderColumns; If(SortDescending; Descending; Ascending))
  • Come puoi notare, in questa formula utilizzo le variabili precedentemente valorizzati.

Schermata SchedaCliente

La schermata di SchedaCliente è una maschera che consente di aggiornare o creare un nuovo cliente.

Per implementarla ho eseguito gli stessi passaggi visti in precedenza per la schermata SchedaDipendente.

• Creazione di una nuova schermata
• Aggiunta di un componente Form collegato all’origine dati Customers
• Setup e definizione del layout

Scheda ElencoCases

La schermata di elenco dei Cases è basata sempre su una raccolta ma che ho personalizzato per evidenziare le informazioni più importante.

La personalizzazione di questa raccolta è stata fatta usando la stessa metodologia vista per la raccolta dei clienti.

Voglio farti presente un paio di funzionalità interessanti.

Alert Case in Ritardo

Per aiutare gli utenti ad individuare i case che sono in ritardo ho creato all’interno della raccolta un campo calcolato che mostra una segnalazione in funzione dello stato del case. Se il case è ancora aperto ed è stata superata la data di completamento previsto mostra il messaggio “ATTENZION: Case in ritardo!”.

• Aggiungi alla raccolta un nuovo campo di tipo Etichetta
• Seleziona la proprietà Text ed imposta la seguente formula: If(Today() > ThisItem.’Due Date’;”ATTENZIONE: Case in ritardo!”;”Case On Track”)
  • ThisItem.’Due Date’ è un campo del case che rappresenta la data target entro cui chiudere il case
• Seleziona la proprietà Color ed inserisci questa formula: If(Today() > ThisItem.’Due Date’;RGBA(255; 0; 0; 1);RGBA(54; 176; 75; 1))
  • Il messaggio assumerà un colore diverso in funzione della condizione specificata nella formula

Filtri

Quando l’utente si collega all’applicazione deve vedere l’elenco di tutti i Case in stato New o Active mentre sono nascosti quelli Closed.

In questo modo potrà concentrarsi solo sui record che meritano attenzione. In ogni caso l’utente può visualizzare anche i case chiusi usando i filtri nella toolbar.

• Crea 3 check-box per gestire i filtri sugli stati del Case: New, Active, Closed

• Seleziona la raccolta ed inserisci questa formula nella proprietà Items: Filter(DEMO_APP_Cases;(Status.Value=”New” And check_nuovi.Value) Or (Status.Value=”Active” And check_in_lavorazione.Value) Or (Status.Value=”Closed” And check_chiusi.Value))
  • Questa funzione filtra le righe in funzione delle selezione dei vari check-box

Schermata SchedaCase

La schermata di dettaglio del Case è una form abbastanza classica. Per configurarla segui la classica procedura di configurazione di una form Power Apps:

• Aggiungi una nuova schermata
• Inserisci un componente di tipo Form
• Collega la form all’Origine Dati
• Organizza il layout della form come preferisci

La particolarità rispetto a quanto viso finora è la presenza di alcuni campi collegati ad un’origine diversa.

Ad esempio, nel campi Assigned To deve essere mostrato il nome del dipendente che ha in carico il ticket mentre nella lista Share Point collegata viene salvato il suo ID

Anche il campo Customer è collegato ad origine dati diversa, ossia quella dei clienti.

In generale, quando devi collegare sorgenti dati diverse, non puoi usare dei campi di testo semplici ma devi usare dei menù a tendina o, come in questo caso, delle caselle combinate che hanno diverse funzionalità interessanti come la possibilità della multi-selezione e la possibilità di effettuare delle ricerche sui record da inserire

Vediamo come configurare una casella combinata.

Casella Combinata (Combo Box) Assigned To

• Seleziona la Scheda Dati

• Elimina il campo di testo che Power Apps ha creato automaticamente

• Inserisci un elemento di tipo Casella Combinata

• Nella proprietà Items specifica l’origine dati dalla quale la lista valori deve recuperare i dati: nel mio caso sarà la lista Share Point dove l’applicazione va a salvare i record degli impiegati

• Nella proprietà DefaultSelectedItems inserisci la formula: Filter (DEMO_APP_Employees; ID= ThisItem.’Assigned To’)

• Disattiva la proprietà SelectMultiple

• Seleziona la scheda del campo e correggi la proprietà Update inserendo la formula per recuperare l’ID del record Employee

• Correggi eventuali altre formule in errore

Alla fine dovresti aver ottenuto un campo che ti permette di cercare e selezionare un record dalla tabella degli Employees da collegare alla tabella Cases.

Cosa abbiamo imparato

In questo articolo abbiamo visto che Power Apps ha tutti gli strumenti necessari per implementare egregiamente tutte le funzionalità che possono essere sviluppate in una generica applicazione Access.

Il vantaggio che deriva dalla scelta di implementare in Power Apps una APP aziendale diventa strategico quando inizi a sfruttare le enormi potenzialità della piattaforma Office 365.

In particolare, puoi integrare all’interno della tua applicazione dei workflow automatizzati che non solo semplificheranno il lavoro degli utenti, ma porteranno la tua applicazione ud un livello superiore.

Nel prossimo articolo di questa serie andremo a scoprire come utilizzare le funzionalità di Power Automate per creare dei flussi di lavoro automatici.