Introduction
In Power Apps, the default controls are often enough for typical business needs, but what if you need a more customized user interface or logic that goes beyond the built-in features? That’s where the PowerApps Component Framework (PCF) comes into play.PCF enables developers to create custom components using modern web technologies like HTML, CSS, and TypeScript. These components can be reused just like standard Power Apps controls but offer much greater flexibility and power.
With PCF, you can build:
- Rich visual components like sliders, charts, or custom input fields
- Controls that connect to external data sources
- Reusable UI elements across different apps and environments
In this blog, we’ll walk you through creating a custom PCF control that records video directly within a Power Apps, perfect for scenarios like field service reporting.
Prerequisites
Before you begin, ensure you have the following tools and knowledge:
- Node.js (LTS version)
- Power Platform CLI (pac)
- Visual Studio Code
- A Microsoft Power Apps Developer Environment
Use Case: Record Video in Power Apps
Imagine a field engineer needing to quickly document a machine fault. Instead of recording a video externally and uploading it later, a custom PCF control enables the engineer to record and save the video directly within the mobile app, streamlining the entire submission process.
Step-by-Step Guide to Creating the PCF Control
1. Create the PCF Control
- Open Visual Studio Code and run:
pac pcf init --namespace VideoRecoder --name VideoRecoder --template field
- Then install the dependencies:
npm install
2. Add Video Recording Logic (in index.ts)
- Use the MediaRecorder API to access the camera and record video.
private async startRecording(): Promise<void> {
this._errorElement.innerText = "";
try {
// Request back camera with facingMode: "environment"
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: "environment" },
audio: true
});
this._videoElement.srcObject = stream;
this._videoElement.play();
this._mediaRecorder = new MediaRecorder(stream);
this._recordedChunks = [];
this._mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
this._recordedChunks.push(event.data);
}
};
this._mediaRecorder.start();
this._startButton.disabled = true;
this._stopButton.disabled = false;
this._uploadButton.disabled = true;
} catch (error) {
this._errorElement.innerText = "Failed to access camera/microphone. Please
ensure permissions are granted.";
console.error("Recording error:", error);
}
}
private stopRecording(): void {
if (this._mediaRecorder && this._mediaRecorder.state !== "inactive") {
this._mediaRecorder.stop();
this._videoElement.srcObject = null;
this._startButton.disabled = false;
this._stopButton.disabled = true;
this._uploadButton.disabled = false; // Enable upload button after stopping
}
console.log("from stopRecording() test");
}
You can view the complete source code here.
- Run the development server to test locally:
npm start
3. Build the PCF Control into a Solution
- Create a new solution folder and initialize it:
mkdir VideoRecoderSolutioncd VideoRecoderSolutionpac solution init --publisher-name YourPublisher --publisher-prefix yourprefixThen add the reference and build:pac solution add-reference --path ..\..\dotnet build
- A .zip file will be created inside VideoRecoderSolution > bin > Debug
- Open your Power Apps portal
- Navigate to Solutions
- Click Import Solution and select the generated .zip file
- Click Next > Import
- Go to your app
- Click Insert > Get More Components
- Click on code and select your custom component
- Click Import, and it will be available under Code Components
Conclusion
With PCF, you unlock a whole new level of customization in Power Apps. In this tutorial, we created a practical video recording control - ideal for industries like field services, insurance, or any scenario where direct media input is valuable.
If you have any questions you can reach out our SharePoint Consulting team here.
