Step by Step process to create PCF Controls

If you are following my blogs you might have noticed that already couple of blogs related to PCF controls are shared related to manifest files, Lifecycle of Power Apps Component, Power Apps CLI. This is an extension to that series and here we are going to see the step by step process to create a PCF control. I will try to create this as generic as possible so that we can adapt to our requirements. Just note that here I am going to only share the steps at a high level and not any low level code changes. Hope that is something specific to your requirements and can be adapted if we know how to do it at a very high level. Let’s start the process then.

Assumption here is that you have the Microsoft Power Platform CLI installed in your machine. If not, click here and install the same before we start our next step.

Open the Developer Command Prompt for Visual Studio. This is the tool which we will be using for most of our operations except some Editor tools to make changes to our code. First step is to create a folder where all our component related files and folders will be present. Either create it manually or use the command and then in the command prompt go to the newly created folder. Commands are below.

mkdir <folder name>

Above command will create a folder in the location where you are currently in with the name given while using the command.

cd <folder path>

Above command will take you to the folder as per the path mentioned. Next step is to create a new component project by passing the basic parameters using the below command. Component type below can be either field or dataset. Out of the two only field is available for canvas apps while both are available for model-driven apps.

pac pcf init --namespace <specify your namespace here> --name <name of the component> --template <component type>

Once the project is created, we have to bring in all the required project dependencies. For which we have to run the command as below,

npm install

Next step is where we will define how our component will work and what functionality it will achieve and all. We have to open the folder in any IDE of your choice. I personally prefer VS Code as that gives us the intellisense support as well. For opening in VS Code we can use the below command which will open the project.

code.

Once all the changes are completed, next step is to build our component. We can make the choice for build in package.json file and then run the below command to build our component. First command will run a build on the component to make sure everything is fine and build it for the first time. Second command is to start the testing. It will open the control in our default browser and then we can do the testing in the browser itself. Third command also opens up the control for testing but that will make sure any changes to the code base gets reflected in the testing window as well. Once this is done, we can use Ctrl+c to terminate the testing process.

npm run build
npm start
npm start watch

Assume that till here we are good and no errors for us, then we will move to the next step where we can package our component so that it can be used in our D365 environment. For that first create a new folder inside our component folder with a name of our choice. We can create this manually or use the command we used in our first step. Once the folder is created then navigate to the newly created folder. From there only we will be running all our future commands. Now we have to create a new solutions project using the below command. If you prefer to use any of the existing publisher, please give that name or else, we can provide the details of our choice but it should be unique to the environment..

pac solution init --publisher-name <name of the publisher> --publisher-prefix <prefix for the publisher>

Next step is to add reference to our components which we created to the new solution project. We can use the below command for that. Make sure the path you are providing should be the folder where our component is located to be specific where our project file is located.

pac solution add-reference --path <location of pcf project file>

Before we run our next command, make sure you verify one thing. Go to your solution folder which we create and locate the file with extension “.cdsproj”. Open this file in your choice of editor and locate the below section. In the section we have three options depending on which our solution file will get generated, Managed, Unmanaged, Both. I hope this is self explanatory to understand that based on this the solution file will get generated for us.

<PropertyGroup>
    <SolutionPackageType>Both</SolutionPackageType>
  </PropertyGroup>

Next step is to create our solution file. For that run the command mentioned below. Only for the first time we have to use the restore parameter. After the first time, we can even simply use msbuild and it should work. If we don’t want to go this route of making manual changes as mentioned above by changing the “.cdsproj” file. Use the second command mentioned below.

msbuild /t:build /restore
msbuild /p:configuration=Release

Once the above command is executed successfully, we can find the solution filed in \bin\debug or \bin\release folder. Next step is to manually import the solution to our D365 environment through the portal just like we import any other solution.

In case, you want to use the command line to deploy or push the components to the Dataverse, then you can find those commands in the blow Deploying PCF Controls to D365 Environment.

Hope this blog was helpful for you and thanks for your time reading this blog.