If you have followed the last part of this series, you will have all the pre-requisites installed on your system and you should be good to go.
In this part of the series, in our PCF, the main idea is to have Description and StatusReason fields on the case entity, bound to the PCF and whenever someone changes the StatusReason field, the Description field should be updated with the latest values.
This is a very basic example of PCF and is aimed at getting you a hang of the various components of the PCF. So let's begin.
1> Create a new folder in C: drive with the name “GetTranslationPCF”.
2> Open VS Code and inside it open the above folder.
3> Inside VS Code, Press “Ctrl + ` ” to open the terminal.
4> Now to initialize a new PCF project, type in the following code :
a. “pac pcf init --namespace crm --name GetTranslation--template field”
Note: the code above follows the following template : “pac pcf init --namespace <specify your namespace here> --name <Name of the code component> --template <component type>”
5> To install all the required NPM packages, run following command in the VS Code Terminal :
a. “npm install”
6> After installing the above code, the file structure of the GetTranslationPCF will look like this :
a. The main files in this folder structure are :
i. ControlManifest.Input.xml: This file contains 3 main components :
a. The controls / Fields bound to the PCF
b. The resources like CSS/images/resx files that will be bundled up in the final solution zip that will be imported in CRM
c. The Features that will be used in the PCF like capture video, WebAPI, etc.
ii. Index.ts: This file contains the main code components that would contain all the main code for the PCF.
7> Let's have a look at the main functions inside index.ts file:
a. Init: It is mainly responsible for initializing the PCF HTML components everything needed to populate our PCF on startup.
b. UpdateView: This is executed every time any property changes on the form. This will be used to get new values of filed and process it and call methods to updated the frontend UI field.
c. getOutputs: This is the method that can be used to update properties with new values.
d. Destroy: This is called when control has to be removed from the DOM tree.
8> First of all, let's declare the fields in ControlManifest file :
<property name="Description" display-name-key="Description_Display_Key" description-key="Description_Desc_Key" of-type="Multiple" usage="bound" required="true" />
<property name="statusReason" display-name-key="statusReason_Display_Key" description-key="statusReason_Desc_Key" of-type="OptionSet" usage="bound" required="true" />
9> The code inside init, updateView and getOutputs function will look like this :
10> Now to test the code, run in the terminal – “npm start” and modify the value of StatusReason on the right which will update the description field :
Now that we have successfully implemented our code and tested it in the browser, let's see in the next part about how to deploy it to Dynamics CRM int Part – 3 of this series.
For more info on this topic, check out the official Microsoft Docs.