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 system 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 into 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 the highlighting of specific rows by configuring an indicator column.
Once the PCF was chosen to build the code component, we used the aforementioned technologies:
- TypeScript, node, react, html, and css.
- Microsoft Fluent UI React libraries
- PCF CLI, commands to operate PCF projects
- Windows terminal
But first, the following prerequisites need to be installed:
- Visual Studio Code (VSCode)
- node.js (LTS version is recommended)
- Microsoft Power Platform CLI (Use either the Visual Studio Code extension or the MSI installer)
- .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 metadata for the behaviour 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 needed, 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, use the following command:
msbuild /t:restore
Again, run the following command:
msbuild
The generated solution zip file is in the Solution\bin\debug folder to be imported into the solution into the Power Platform environment.
This is a common request from users/app makers and can be complex to implement using native canvas app components.
Custom connectors in PowerApps canvas app
PCF is great for extending 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.
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
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 in the picture below.
The action to call the connector was added to the OnSelect button action as shown in the image below:
The custom connector was added on the Power Automate as well, to return the results from the API implemented:
Conclusion
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 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 with the ability and support to ensure that your solutions are effective, efficient, and optimized for your specific business needs. Click here to know more.
