Using resources for designing PCF control in D365 CRM.

Hello Guys,

In our previous blog we have seen how we can create PCF control which will validate the input provided by the user. Today we will see how we can use resources for designing PCF control. 

Do follow us to know more about Dynamics and Power Platform. Also if you like our blog then please comment and share this blog with your friends.

Consider below scenario where we have Age field.

Currently we are entering Age value manually. We will be creating a PCF control which will be a button. Whenever user will click on that button Age will be incremented. 

As we have two folders named control and solution created for PCF controls in our previous blogs. Create a folder named PCFIncrement folder in control folder and PCFIncrementSolution folder in solution folder.

Open CMD and navigate to PCFIncrement folder and run below command for creating PCF control.

pac pcf init --namespace Increment --name PCFIncrement --template field

This will create PCF project. Open the project using Visual Code. Replace the code in ControlManifest.Input.xml file as shown below:

Now open Index.ts file and and declare global variable as shown below:

Now build the project by npm run build command and run the project by npm start command. This will generate output as shown below:

Now here we can see that our control is not looking attractive. So we can add css file to the project. Right click on PCFIncrement folder and add new folder. Rename as CSS. Right click on CSS folder and add a new CSS file named Increment.css as shown below:

Now we will be adding reference of css file in Manifest file. replace below code in Manifest file.

<resources>

      <code path="index.ts" order="1"/>

       <css path="css/Increment.css" order="2" />

</resources>

Now we will be using .button class in index.ts file. Open index.ts file and add below code in init method after button element creation.

  this.btnDecrement.className="button";

  this.btnIncrement.className="button";

Now build the project and run.

As you can see our button is rendering with css. Now we will be creating a solution for this pcf control and use it on Age control.

As you can see our pcf control is visible.

Hope it helps...