Mattia Musazzi

KPI ESG con Power Apps e componenti React (PCF)

Come abbiamo centralizzato la gestione dei KPI ESG di un'azienda di trasporti con Power Apps Canvas esteso da componenti React.js custom (PCF) e SharePoint.

Applicativo Power Apps Canvas esteso con componenti React.js (PCF) per la gestione centralizzata dei KPI ESG su SharePoint

Il Power Apps Component Framework (PCF) è il meccanismo che permette di sviluppare componenti custom in React.js e integrarli in Power Apps come se fossero nativi, superando i limiti dell’interfaccia standard senza abbandonare la piattaforma. Per un’azienda di trasporto ferroviario regionale l’abbiamo usato per centralizzare la gestione dei KPI ESG, distribuita su troppi focal point e senza una regia comune.

L’azienda gestisce gli indicatori ESG (Environmental, Social, Governance) attraverso focal point distribuiti nelle diverse aree aziendali. Prima del nostro intervento il processo avveniva su fogli Excel condivisi: versioni che si sovrascrivevano, nessuna tracciabilità degli aggiornamenti, nessun sistema di notifica. Abbiamo costruito un applicativo centralizzato con Power Apps Canvas, estendendo la piattaforma con componenti React.js dove i limiti nativi non bastavano — lo stesso principio low-code della digitalizzazione delle richieste interne con Power Apps.

Il problema: troppi focal point, nessuna regia centrale

Il monitoraggio dei KPI ESG è distribuito: ogni area ha i propri focal point, responsabili di aggiornare periodicamente i valori di competenza. Il processo esistente non era sostenibile. Mancava un’interfaccia unica in cui i focal point potessero operare in autonomia, con regole chiare su chi può fare cosa. Mancavano la tracciabilità degli aggiornamenti e un sistema di notifica che ricordasse alle persone giuste di aggiornare i dati nei tempi previsti.

La richiesta era chiara: un applicativo centralizzato, facile da usare, che gestisse l’intero ciclo di vita dei KPI ESG — inserimento, aggiornamento, storico, notifiche — in un unico punto.

La soluzione: Power Apps Canvas con componenti React.js personalizzati

Abbiamo scelto Power Apps Canvas come base: è la tecnologia giusta per questo scenario — sviluppo rapido, integrazione nativa con SharePoint come base dati, piena compatibilità con l’ecosistema Microsoft 365 già in uso. La sfida reale è arrivata quando i requisiti dell’interfaccia hanno superato ciò che Power Apps offre nativamente: alcune funzionalità di visualizzazione e interazione con i dati non erano replicabili con i componenti standard.

Applicativo Power Apps Canvas con componenti React.js custom via PCF per la gestione e visualizzazione dei KPI ESG, con base dati SharePoint

La risposta è stata sviluppare componenti custom in React.js, integrabili in Power Apps tramite il meccanismo dei PCF (Power Apps Component Framework). Questo ci ha permesso di non abbandonare Power Apps — con tutti i vantaggi di governance, licensing e integrazione con Microsoft 365 — costruendo al contempo un’esperienza utente che va oltre i limiti della piattaforma out-of-the-box.

Lo stack tecnologico

  • SharePoint Online — base dati per tutti i KPI, storico delle modifiche, configurazioni
  • Power Apps Canvas — interfaccia principale per i focal point
  • React.js (PCF) — componenti custom per visualizzazioni e interazioni avanzate non disponibili nativamente
  • Power Automate — notifiche email automatiche ai focal point in base alle scadenze di aggiornamento

Un’applicazione web sviluppata interamente in React.js con backend dedicato avrebbe richiesto infrastruttura, deployment, manutenzione e aggiornamenti di sicurezza continuativi. Power Apps vive nell’ecosistema Microsoft 365 già adottato: autenticazione integrata con Azure AD, permessi gestiti tramite SharePoint, nessun server da mantenere. L’approccio ibrido — Power Apps come contenitore, React.js per ciò che manca — ha dato velocità di sviluppo e semplicità di gestione senza rinunciare alla libertà tecnica.

I risultati ottenuti

L’applicativo è oggi in uso da parte dei focal point ESG dell’azienda per la gestione degli indicatori ambientali interni. Ogni focal point accede alla propria area di competenza, aggiorna i valori di riferimento e riceve notifiche automatiche via email quando si avvicina la scadenza di un aggiornamento. Lo storico delle modifiche è tracciato su SharePoint e accessibile in qualsiasi momento.

La fase più impegnativa non è stata quella tecnica, ma la definizione delle regole di gestione: chi può aggiornare cosa, quale granularità di permessi serve, come strutturare i dati per il reporting futuro — la stessa cura che mettiamo quando costruiamo una reportistica KPI su SharePoint come alternativa a Power BI. Il PCF ha dimostrato di aprire scenari che molti considerano impossibili con il low-code Microsoft, con una curva di apprendimento gestibile e un risultato che si comporta come un’app custom, senza i costi operativi di una custom.

A chi è utile questo approccio

Il pattern è rilevante per le organizzazioni che gestiscono processi di raccolta dati distribuiti — KPI di sostenibilità, indicatori di reportistica periodica — e che hanno già adottato Microsoft 365. In particolare, per le aziende in cui i limiti nativi di Power Apps rappresentano un freno: l’integrazione con componenti React.js tramite PCF consente di estendere la piattaforma senza abbandonarla, mantenendo i vantaggi di governance e integrazione dell’ecosistema Microsoft e affiancandola, dove serve, a una dashboard Power BI per il reporting direzionale.

Se nella tua organizzazione la gestione dei KPI ESG o di altri dati aziendali avviene ancora su Excel condivisi, possiamo aiutarti a costruire uno strumento centralizzato in tempi rapidi, senza infrastrutture aggiuntive da gestire. Contattaci per una valutazione →

Mattia Musazzi

Scritto da

Mattia Musazzi

Modern Work · Dev4Side