How to extend the Power Apps Platform – when native components are not up for the challenge

If you are wondering how to take your IT to the next level or discussing business improvements, it’s barely impossible not to talk about the Power Apps Platform these days. It’s the best way to do more with less being a powerful set of tools that allows app makers to create low code solutions for their business needs. 

However, as powerful as it is, their native components may not be the solution for more complex challenges. In that case there are two ways to extend the Power Platform solutions: PCF and custom connectors. PCF allows developers and app makers to create code components that can be integrated into Power Apps, while custom connectors enable the use of existing APIs to easily use your systems data. Let’s dig into this. 


The Power Apps Platform  

Power Apps Platform includes a set of low code apps that empower users (app makers) to create solutions for improving their business’ needs. It has a native component that allows citizens to make remarkable things without any customization.  

When it is not possible to meet requirements with native components, one can move on to custom components to achieve the specific proposal of the project using Power Apps Component Framework (PCF) or custom connector. 


Power Apps Component Framework (PCF)

PCF empowers developers and app makers to build code components when out-of-the-box controls don’t fit the app maker’s needs, helping to create reusable components that can be integrated in Power Apps.

In the following example, we will explain the code component that displays a paged, scrollable dataset grid that supplies sortable and filterable columns. It also allows highlighting of specific rows by configuring an indicator column.  

Once the PCF was chosen to build the code component, we used the forementioned technologies:

  • TypeScript, node, react, html, and css.
  • Microsoft Fluent UI React libraries
  • PCF CLI, commands to perform operation in PCF projects
  • Windows terminal


But first, the following prerequisites needed to be installed:

  1. Visual Studio Code (VSCode)
  2. node.js (LTS version is recommended)
  3. Microsoft Power Platform CLI (Use either the Visual Studio Code extension or the MSI installer)
  4. .NET Build tools.


The next step was to create the new component project with the following command:

pac pcf init –namespace mycomponentname –name ComponentGrid –template dataset


This adds a new component project and related files to the current folder, including the packages.json that defines the modules needed.


The required modules were installed using the command:  

npm install

The code component includes an index.ts file with essential functions (e.g. Init, updateView and destroy) that control the lifecycle of the code component. (According to MST documentation)

After that, the Microsoft Fluent UI and React was used for UI creation, so the following dependencies were installed at the terminal:  

npm install react react-dom @fluentui/react


Subsequently, the ComponentGrid\ControlManifest.Input.xml file is created that describes the meta data for the behavior of the code component as dataset, input and output properties.


Finally, the component logic implementation using TypeScript and Fluent UI React component was implemented inside the index.ts file on the Visual Studio Code with the essential functions predefined.


In the final step the solution was deployed and configured on the Power Platform environment with the packaging command:  

pac solution init –publisher-name Samples –publisher-prefix componentGrid


Once the new solution project is created, the refer to the location where the component was created is need, by using the following command:  

pac solution add-reference –path ..\


After the zip file from the solution project is generated, and when inside the solution project directory, using the following command:  

msbuild /t:restore


Again, run the following command:  



The generated solution zip file is in the Solution\bin\debug folder to be imported in the solution into Power Platform environment.

Power Apps Platform


This is a common request from users/app makers and can be complex to implement using native canvas app components.

Power Apps Platform


Custom connectors in PowerApps canvas app

PCF is great to extend the Microsoft Power Platform, but also as a custom connector to use existing APIs easily.

When building the custom connector, the following components were used:

  • The Azure function that implements the API was created
  • A custom connector was created in the solution
  • The security and actions were configured on the custom connector
  • The Power Apps canvas app was configured to use the connector


In this example, an Azure function app and the function to return calculated values were used.

In the first step, the Custom Connector was created on the Power Apps maker portal > Automation > Custom Connector.

Power Apps Platform


Next, the Host column was filled with the Function URL from the API

Then, the API key for security was selected and the connector was saved

Power Apps Platform


After that, the action was created by filling in the required fields, importing the sample to the verb and adding a Default Response.

Finally, the Custom Connector was used in a Power Apps canvas app and in a Power Automate as shown on the picture below.

Power Apps Platform


The action to call the connector was added on the OnSelect button action as shown on the image below:

Power Apps Platform


The custom connector was added on the Power Automate as well, to return the results from the API implemented:

Power Apps Platform



While custom development may be necessary at times, it is important to keep in mind that it adds complexity and more costs to the project, such as premium licensing and maintenance needs. Therefore, it is always better to use the out-of-the-box features whenever possible to minimize complexity and costs.  

If you are looking to extend Power Apps Platform solutions with complex UI requirements or custom data integration, it is important to work with experts who have experience in implementing these types of solutions.  

At Stellium, we understand that the success of any implementation project lies in careful planning and execution, and we can help improve solutions with best practices in mind, so that you can optimize your business processes and workflows while minimizing maintenance costs and complexity. 

Our team of experts can work with you to identify your specific business needs and recommend the most effective solutions to meet them. Being experts in  Power Platform governance, we recommend and follow the best standards when it comes to data integration, custom components, and release management. This certifies your organization uses the right policies defined to implement corporate solutions at scale with control on cost, security, and operations. 

In conclusion, if you are looking to build advanced solutions with Power Apps, it is important to work with a team of experts who provide you the ability and support to ensure that your solutions are effective, efficient, and optimized for your specific business needs. Click here to know more.

Back to top

What's your Challenge?

We’re not great fans of templates for proposals as our experience taught us that there is no such thing as two clients with exactly the same needs that can be addressed equally.

We want to understand how we can help your business to grow and present you with a customized solution.

Challenge us to do so by getting in touch below.