What is the Power Apps Component Framework (PCF) and when is it worth using?

PCF is a mechanism that lets you develop custom components in TypeScript/React.js and integrate them into Power Apps as if they were native. It is worth using when the standard features are not enough for the interface or data-visualisation requirements, but you want to keep the rest of the Power Apps architecture with its governance and licensing advantages.

Can SharePoint be used as the data source for a complex Power Apps application?

Yes, with careful design of the lists and their relationships. SharePoint handles far more complex scenarios than commonly assumed, as long as you do not treat lists like spreadsheets: the data structure must be designed from the start with volume, required queries and future reporting in mind.

What is the difference between Power Apps Canvas and Model-Driven?

Power Apps Canvas offers maximum interface-design freedom and connects to any data source, including SharePoint. Model-Driven is based on Dataverse and suits structured processes with complex relationships between entities. For KPI management with custom interfaces and a SharePoint data source, Canvas is generally the more efficient choice.

How long does it take to build a Power Apps application like this?

Timelines depend on requirement complexity and the number of custom components. Compared with an equivalent custom build, Power Apps significantly cuts development and go-live time. The critical phase is often defining the business rules — permissions, update flows, data structure — more than the technical development itself.

Is Power Automate enough for notifications and automation in these scenarios?

For most enterprise use cases — deadline-based email notifications, automatic reminders, orchestration of approval steps — Power Automate is adequate and well integrated with Power Apps and SharePoint. For more complex logic or high-volume scenarios it may be worth evaluating Azure Functions as a complement.

ESG KPIs with Power Apps and React (PCF) Components

The Power Apps Component Framework (PCF) is the mechanism that lets you develop custom React.js components and integrate them into Power Apps as if they were native, overcoming the limits of the standard interface without leaving the platform. For a regional railway transport company we used it to centralise ESG KPI management, which was spread across too many focal points with no common oversight.

The company manages its ESG (Environmental, Social, Governance) indicators through focal points distributed across business areas. Before our intervention the process ran on shared Excel files: versions overwriting each other, no update traceability, no notification system. We built a centralised application with Power Apps Canvas, extending the platform with React.js components where the native limits fell short — the same low-code principle as digitising internal requests with Power Apps.

The problem: too many focal points, no central oversight

ESG KPI monitoring is distributed: each area has its own focal points, responsible for periodically updating the values they own. The existing process was not sustainable. There was no single interface where focal points could work autonomously, with clear rules on who can do what. There was no update traceability and no notification system to remind the right people to update the data on time.

The brief was clear: a centralised, easy-to-use application that manages the full lifecycle of the ESG KPIs — entry, update, history, notifications — in one place.

The solution: Power Apps Canvas with custom React.js components

We chose Power Apps Canvas as the base: it is the right technology for this scenario — rapid development, native integration with SharePoint as the data source, full compatibility with the Microsoft 365 ecosystem already in use. The real challenge arrived when the interface requirements exceeded what Power Apps offers natively: some data-visualisation and interaction features could not be reproduced with the standard components.

Power Apps Canvas app with custom React.js components via PCF for managing and visualising ESG KPIs, with a SharePoint data source

The answer was to develop custom components in React.js, integrable into Power Apps through the PCF (Power Apps Component Framework). This let us keep Power Apps — with all its governance, licensing and Microsoft 365 integration advantages — while building a user experience that goes beyond the out-of-the-box limits of the platform.

The technology stack

SharePoint Online — data source for all KPIs, change history, configurations
Power Apps Canvas — main interface for the focal points
React.js (PCF) — custom components for advanced visualisations and interactions not available natively
Power Automate — automatic email notifications to focal points based on update deadlines

A web application built entirely in React.js with a dedicated backend would have required infrastructure, deployment, maintenance and continuous security updates. Power Apps lives inside the already-adopted Microsoft 365 ecosystem: authentication integrated with Azure AD, permissions managed through SharePoint, no server to maintain. The hybrid approach — Power Apps as the container, React.js for what is missing — delivered development speed and management simplicity without giving up technical freedom.

The results

The application is now used by the company’s ESG focal points to manage internal environmental indicators. Each focal point accesses their own area, updates the reference values and receives automatic email notifications as an update deadline approaches. The change history is tracked on SharePoint and available at any time.

The most demanding phase was not technical but the definition of the management rules: who can update what, what permission granularity is needed, how to structure the data for future reporting — the same care we bring to building KPI reporting on SharePoint as an alternative to Power BI. PCF proved it can open scenarios many consider impossible with Microsoft low-code, with a manageable learning curve and a result that behaves like a custom app without the operational cost of one.

Who this approach is for

The pattern is relevant for organisations that manage distributed data-collection processes — sustainability KPIs, periodic reporting indicators — and have already adopted Microsoft 365. Especially for companies where the native limits of Power Apps are a constraint: integrating React.js components through PCF lets you extend the platform without abandoning it, keeping the governance and integration advantages of the Microsoft ecosystem and pairing it, where needed, with a Power BI dashboard for executive reporting.

If ESG KPI management or other corporate data in your organisation still runs on shared Excel files, we can help you build a centralised tool quickly, with no extra infrastructure to manage. Contact us for an assessment →