PCF Custom Control Builder

Now with PowerApps Component Framework for model-driven apps and PowerApps CLI generally available, I think the XrmToolbox plugin PCF Custom Control Builder will come very handy. This tool enables you to build Custom Controls with ease where you do not need to write the CLI commands. Most of the commands are consolidated into one button click making it easier to build controls. So, download the plugin using “Plugin Store”.

To read more about what is PowerApps Component Framework read here.

Overview

Toolbar

Below is the list of buttons available on the toolbar and description of the actions they perform:

• New PCF Control
  • New from Blank: This would setup the plugin to guide you through the process of creating a custom control from scratch.
  • New from Template: The plugin would present you with various community built custom controls published on PCF Gallery. Once you download any of the custom control, a script would try to download the code from GitHub repo and load the control details for you (some controls may not load correctly due to how the repo is structured)
• Edit existing PCF Control: Based on the selected working directory, plugin will try to identify any existing PCF project and CDS Project. It will then load the details for you so you don’t have to type -in those details again.
• PCF Gallery: A community build custom control store. You will find lot of good custom controls built by the community.
• Sample Controls: A downloadable zip file that contains sample controls for your learning.
• PowerApps CLI
  • Download PowerApps CLI: This will take you to the download page of PowerApps CLI.
  • Update PowerApps CLI: This will run the CLI command to update itself to the latest version available.
• Help
  • PowerApps Component Framework: Navigates you to Microsoft’s PowerApps Component Framework Overview documentation.
  • Microsoft Docs for Custom Component: Navigates you to the documentation on building Custom Controls.
  • PCF Limitations: Navigates you to the documentation that lists limitations of PowerApps Component Framework.
• Settings: To change you preferred working directory or your Visual Studio Command Prompt location.

Tabs

There are two tabs available described below:

• Builder: This tab helps you build your custom controls. This is the main tab of the plugin.
• Learn more about PCF: This tab helps you look at the Blogs, Forums, Demos, Ideas for PCF. A one-stop-shop for PCF related information.

Initialization

When you first load the plugin, you need to select your working directory. This working directory can be saved if you plan to reuse the same in future.

One working directory can host only one Custom Control project.

Next you want to identify your Visual Studio Developer Command Prompt so that the CLI commands can be executed using it. This will be a one-time setup and the path can be changed from the Settings button in Toolbar.

Before you begin building your custom control; make sure you have installed all your prerequisites.

Next update to the plugin, it will be able to determine if any prerequisites are missing and provide a download link.

Building Custom Control

New control from Blank

As you can see, steps are numbered for easy executions.

1. Initialize PCF project: Here you define your Namespace and Control Name. Both should not contain any space in them.
2. Develop custom control
   • Open Project Directory: It opens the custom control directory in Windows Explorer
   • Open in VS Code: It opens the folder in Visual Studio Code
3. Build PCF project: Runs the build command. If the build is successful, plugin will show the result on the top right corner near Quick Action and the built-in command prompt will show the result of the execution.
4. Test custom control: This will run the command outside of the plugin because it needs user action to close the process. With this execution you can test your custom control in two ways
   • Test Project: A disconnected way of testing, if any changes are made in the code, you will have to close the testing window, build the code and run the test again.
   • Test project with Watch: A better, connected way of testing. With this if any changes are made to the code, CLI is able to detect those changes rebuild the control and reloads the control in the browser. This saves lot of time going back-and-forth.
5. Initialize CDS project: Define you Solution name, Publisher name and prefix. Currently, the plugin does not allow spaces in the names.
6. Deploy to D365 CE: Once the custom control is ready, deploy the control directly in you D365 CE or CDS environment using XrmToolbox connection.

Going forward Test with Watch will be the default option

New control from Template

Plugin will present list of custom controls build by the community. Here you can search either by the Name (or part) of the control or by the author. This dialog provides you the description and link to actual control in PCF Gallery. It also presents you with a “Download” button which when clicked downloads the repo from GitHub into your working directory and tries to load the control details on the “Builder” tab. Once downloaded, you can edit the control as per your liking or take a peak at the code.

Existing control

If the working folder contains PCF project (.pcfproj) and CDS project (.cdsproj) then plugin will be able to identify the control as well as solution details. Once the details are identified you can continue to edit, build and test the control as usual.

Quick Actions

• Build and Test Control: This will build PCF project (control only) and start a browser session to test your control
• Build All Projects: This will build both PCF project as well as CDS project.
• Build All and Deploy: This will build PCF and CDS project and deploy it to D365 CE or CDS environment.

Build Status

Whenever you are Build command, the Build Status will show if it was a success or failed – as shown in the above screenshot.

Built-in Command Prompt

The built-in read-only command prompt lets you take a peek at all the commands executing as well as the output response for those commands. If there are build errors you should be able to find the error details in this command prompt.

Encountered Errors?

If you encountered any errors or if you have any suggestions, please add them on the GitHub repo.

• Issue or Bug
• Feature Request or Idea

Don’t forget to rate the plugin on XrmToolbox Plugin Store.