Creating PCF control for validating input in D365.

Hello Guys,

In our previous blog we have seen how we can create solution package and how to use this solution in D365 CRM. Today we will create one PCF control which will validate the input provided by the user.

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 Student Table.

Here we have various columns like First Name, Last Name etc. As you can see First Name is mandatory field whereas Last Name is not mandatory field. We will be creating a PCF control which will display a message if Last Name field is blank.  

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

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

pac pcf init --namespace InputText --name PCFInputText --template field

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

Here we have created one property named LastName which is of type SingleLine.Text and usage is bound which means this will be the first property which will be bound to CRM field which will be using this control. Keep in mind that there should be at least one property of usage as bound in ControlManifest.Input.xml file.

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

Here in above code we have two variable named txtLastName and lblErrorMsg. txtLastName is used for getting the input from the CRM field and lblErrorMsg is used for displaying the text if Last Name field is blank.

Now in init method type below code:

Here in above code we have created two html control of type input and label which will be associated to txtLastName and lblErrorMsg. Also we have added one event listener to txtLastName field which will trigger whenever user will type input in txtLastName. NotifyOutputChanged is used for notifying the framework whenever txtLastName is having a new value.

Now modify rest of the methods as shown below:

Here in above code we have UpdateView method which is used for updating the value from CRM field to the txtLastName html field. GetOutput method is used to send the value back to the CRM field. And OnChange method is used for implementing the validation.

So our control is ready to build and run. Run below command

npm run build

Now navigate to PCFInputTextSolution folder and we will be creating managed solution for CRM import so that we can use this component. Run below command.

This will created required files in solution folder.

Run Below command for adding reference to control folder.

Now run below command to build the solution.

Now run below command for creating managed solution.

This will create managed solution as shown below: 

Now we will be using this control. Import this solution and customize the Student form and add control for Last Name column.

Now save the changes and publish the form and create a new Student record.

As you can see if we don't provide value in Last Name field, it will display message.

Hope it helps...