PCF Custom Control Builder

An XrmToolBox plugin that simplifies Power Apps Component Framework (PCF) custom control development by providing a visual interface for building and deploying PCF controls without writing CLI commands.

Overview

PCF Custom Control Builder streamlines the entire lifecycle of PCF control development, from initialization to deployment. The tool automates command execution, manages project structure, and provides an intuitive UI for configuring control properties, resources, and deployment options.

Key Features

• Visual Control Creation: Create new PCF controls with a user-friendly interface
• Template Support: Choose between Field (single field) and Dataset (grid) templates
• Framework Integration: Support for Fluent UI and other modern UI frameworks
• PCF Features API: Built-in support for device capabilities:
  • Capture Audio, Video, and Images
  • Barcode scanning
  • Geolocation
  • File picking
  • Utility functions
  • Web API integration
• Resource Management:
  • Preview image configuration
  • CSS file management
  • RESX localization support
• Solution Management: Create and manage D365 CE solution packages
• Authentication Profiles: Manage multiple environment connections
• Incremental Versioning: Automatic component version management
• Build & Test: Integrated build and test project capabilities
• Direct Deployment: Deploy controls directly to D365 CE/Dataverse environments

Prerequisites

1. Node.js & npm: Install from nodejs.org (LTS version recommended)
2. Visual Studio: Any recent version with C# development tools
3. Power Apps CLI: Download from aka.ms/PowerAppsCLI
4. XrmToolBox: Download from xrmtoolbox.com

Installation

1. Open XrmToolBox
2. Click on "Tool Library" (or press F1)
3. Search for "PCF Custom Control Builder" or "Maverick.PCF.Builder"
4. Click Install
5. Restart XrmToolBox if required

Alternatively, install via NuGet Package Manager in XrmToolBox.

Getting Started

First Time Setup

The tool will automatically detect:

• npm (Node Package Manager) installation
• MSBuild path from Visual Studio
• Power Apps CLI installation
• If Power Apps CLI is not detected, use the Help menu to download and install it

Configure Settings:

• Open the tool and go to Settings
• Review the path identified for MSBuild
• Set your default namespace (optional)
• Set your default publisher name and prefix (optional)
• Enter custom PowerShell execution policy command e.g. Bypass -Scope Process (optional)

Creating a New Control

1. Click "New PCF Control" button
2. Fill in the control details:
   • Namespace: Your organization/project namespace
   • Control Name: Technical name for the control
   • Display Name: User-friendly name
   • Description: Brief description of control functionality
   • Control Type: Choose standard or virtual
   • Template: Select Field or Dataset
   • Additional Packages: Optionally add Fluent UI or other libraries
   • Version: Component version (read-only, automatically managed)
3. Click "Run 'pac' command" to initialize the project
4. Use "Build project" to compile your control
5. Use "Test project" to launch the test harness
6. Use "Create Solution Package" when ready to deploy
   • Configure Solution Details:
     • Solution Name: Unique solution name
     • Publisher Information: Prefix, name, and friendly name
     • Solution Version: Initial version number (read-only, automatically managed)
7. Use "Deploy to D365 CE" to push to your environment

Editing an Existing Control

1. Click "Edit existing PCF control" button
2. Navigate to your control's root folder
3. The tool will load existing manifest and project details
4. Make changes to properties, resources, or features
5. Build and test your changes
6. Deploy updates to your environment

Features in Detail

Control Properties Management

Edit control properties including:

• Property names and display names
• Data types and type groups
• Default values and descriptions
• Usage flags (bound/input)
• Required/optional settings

Resource Management

• Preview Images: Add custom preview images for the solution
• CSS Files: Include custom stylesheets
• RESX Files: Add localization resources for multi-language support

PCF Features API

Enable device and platform capabilities:

• CaptureAudio: Record audio input
• CaptureVideo: Record video input
• CaptureImage: Capture images from camera
• GetBarcode: Scan barcodes and QR codes
• GetCurrentPosition: Access device location
• PickFile: File picker integration
• Utility: Utility functions
• WebApi: Web API integration

Authentication Profiles

Manage multiple environment connections for easy deployment across development, test, and production environments.

Troubleshooting

Common Issues

Power Apps CLI Not Detected:

• Ensure Power Apps CLI is installed from aka.ms/PowerAppsCLI
• Restart XrmToolBox after installation
• Check that pac command is available in your system PATH

Build Failures:

• Verify npm is installed and in system PATH
• Check that Visual Studio Developer Command Prompt path is correct
• Ensure you have internet connectivity for npm package downloads

Project File Not Found:

• Verify the MSBuild path is correctly configured in Settings
• Check that Visual Studio is installed with the required build tools
• Ensure the MSBuild path points to the correct Visual Studio version

Deployment Issues:

• Verify authentication profile is configured correctly or you have connected to an environment in XrmToolBox
• Check that you have appropriate permissions in target environment
• Ensure solution package was created successfully before deployment

PowerShell Execution Policy:

• The tool supports custom PowerShell execution policy scripts
• If you encounter script execution errors, check your PowerShell execution policy

Resources

• Microsoft PCF Documentation: docs.microsoft.com/powerapps/developer/component-framework
• PCF Limitations: docs.microsoft.com/powerapps/developer/component-framework/limitations
• PCF Gallery: pcf.gallery
• Sample Controls: aka.ms/PCFSampleControls
• Wiki: github.com/Power-Maverick/PCF-CustomControlBuilder/wiki

Contributing

Contributions are welcome! Here's how you can help:

For Users

• Report bugs via GitHub Issues
• Request features through issues with clear use cases
• Share feedback and suggestions
• Star the repository if you find it useful

For Developers

• Fork the repository
• Create a feature branch (git checkout -b feature/AmazingFeature)
• Make your changes following the existing code style
• Build and test your changes
• Commit your changes (git commit -m 'Add some AmazingFeature')
• Push to the branch (git push origin feature/AmazingFeature)
• Open a Pull Request with a clear description

Development Setup

1. Clone the repository
2. Open Maverick.PCF.Builder.sln in Visual Studio
3. Restore NuGet packages
4. Build the solution
5. The output will be in Maverick.PCF.Builder/bin/Debug or Release

Debugging the Tool

1. Ensure the solution is built in Debug mode
2. Navigate to Maverick.PCF.Builder/bin/Debug
3. Copy all the contents from the Plugins folder
4. Locate the XrmToolBox storage folder (typically %AppData%\MscrmTools\XrmToolBox\Plugins)
5. Paste the content copied in step 3
6. Run XrmToolBox and open the PCF Builder tool

Code Guidelines

• Follow existing code structure and naming conventions
• Add XML documentation comments for public methods
• Test your changes thoroughly
• Update documentation as needed

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Danish Naglekar - @DanzMaverick

Support

• Sponsor: github.com/sponsors/Power-Maverick
• Discussions: github.com/Power-Maverick/PCF-CustomControlBuilder/discussions
• Issues: github.com/Power-Maverick/PCF-CustomControlBuilder/issues

---

Made with ❤️ for the Power Platform Community