Creating PCF control using range input element.

Hello Guys,

In our previous blog we have seen how we can use resources for designing PCF control. Today we are going to create range control which can be used to provide Age value in D365 field.

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.

In our previous blogs we have seen how we are giving value to the Age control by using increment and decrement button. Now we will be creating a range slider control to provide the age value.

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

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

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

Right click on PCFSlider folder and add new folder. Rename as CSS. Right click on CSS folder and add a new CSS file named PCFSlider.css as shown below:

Now replace the below code in Manifest file.

<resources>

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

      <css path="css/PCFSlider.css" order="1" />

</resources>

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:

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

Hope it helps...