Developing a Re-Usuable PCF Component in Dynamics CRM Model Driven Apps using typescript -Part 1

About typescript

TypeScript allows specifying the types of data being passed around within the code, and has the ability to report errors when the types don’t match. TypeScript is a free and open-source high-level programming language developed by Microsoft that adds static typing with optional type annotations to JavaScript. It is designed for the development of large applications and can used to develop JavaScript applications for both client-side and server-side execution (as with Node.js, Deno or Bun).

About PCF Control

Microsoft’s Custom PCF Control (PowerApps component framework) was designed to empower both developers and app-builders to create custom code components for canvas and model-driven apps. Mostly reusable components are designed in PCF. By enhancing the overall experience, users are able to work with data in formats such as dashboards, forms, and views with ease.

Re-Usuable Component

We are about to build a component which will format input values with respect to regular expression provided in the property fields. This will be done in 3 major steps.

Step 1 — Install prerequisites and create PCF solution

Step 2 — Build PCF Component Solution

Step 3- Create Package and deploy to CRM Solution

Installations of required tools and set up a PCF project

Install Power Apps CLI — Power Apps CLI enables developers to create code components. Install Microsoft Power Apps CLI after download

Install Power App Command Line Interface to run commands

Install Type Script Tools(Node.Js) — Install Node.js . This is a runtime environment that allows developers to execute JavaScript code on the server side, enabling server-side scripting and the creation of web applications.

Install node.js to write code using typescript and build them

TypeScript understands JavaScript and uses type inference to give you great tooling without additional code

Understanding PCF Control Elements

Let us look inside a custom control file and all of the important elements

Manifest -Manifest is the XML metadata (i.e., Name, Properties, etc..) file that defines properties of a PCF control

Component implementation — Implementation is nothing but building your control using the TypeScript. Each code component must have a index.ts file. index.ts file contain following methods

init (Required) — When the Dynamics form is ready, it initializes the PCF component by calling the init method.

updateView (Required) — If the data changes, platform calls out the updateView method.

getOutputs (Optional)

destroy (Required)

Resources — If the PCF control requires styling(i.e., CSS) it has to be added as Resource.Resource file has to be defined in the Manifest.

Power Apps CLI Commands

Let us get familiar with PCF commands that we use while building our component. These commands are triggered from Visual Studio Command Prompt.

1. Initialization — · This is the first command which creates basic folder structure of PCF control project.

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

This is the first command which creates basic folder structure of PCF control project. Specific to our component this will be -

pac pcf init — namespace CustomStringFormatter –name customstringformatter –template field

–namespace: Unique namespace of your control.

–name: Name of the control. Below is the command to create a control by name ‘customstringformatter’

–template: Two types of components: field and dataset for model-driven apps. For canvas apps, only the field type

Use visual studio developer commad prompt to run pac command

2. Install — Dependencies

Once ‘init’ sets up the basic folder, as a next step install all the PCF control dependencies using ‘npm install’ command.

Syntax — npm install

3. Build — PCF Component

Once you implement the PCF component, build the code for any syntax errors -

npm run build

4. Solution — Init

After the PCF component code implementation, we need to package the code in to a Solution which can be imported to your CDS instance.
‘Init’ creates basic solution folder structure.
Syntax:

pac solution init --publisher-name <enter your publisher name> --publisher--prefix <enter your publisher prefix>

–publisher-name : Name of the solution Publisher.
–publisher-prefix : Solution prefix name.

5. Solution — Add-Reference

Solution — init, creates a basic solution folder structure.

To link the PCF component, to the Solution trigger ‘Add-Reference’ command.

Syntax-

pac solution add-reference –-path <path to your Power Apps component framework project>

Solution — Path : Path of PCF component project folder.

6. Solution — Package

Solution — Package This is the final solution packaging step which generates zip file.

Syntax:

msbuild /t:build /restore

7. Run the PCF control in browser

Use 'npm start'command to open the PCF control in browser.

This helps to debug and test before we import the PCF control to CDS.

Syntax:

npm start

Understanding PCF Control Elements

Let us look inside a custom control file we have just created now and all of the important elements

Manifest -Manifestis the XML Metadata (i.e., Name, Properties, etc..) file that defines properties of a PCF control

Component implementation — Implementation is nothing but building your control using the TypeScript. Each code component must have a index.ts file. index.ts file contain following pre-created methods

init (Required) — When the Dynamics form is ready, it initializes the PCF component by calling the init method. init()method is like OnLoad()event of form scripts. This is the first method of PCF Control to initialize. Most of the logic goes in here like initializing variables, creating form elements etc.

updateView (Required) — If the data changes, platform calls out the updateView method. updateView()is called when any value in our properties has changed. It acts like onChange()event. Whenever our properties is updated, this method will be triggered.

getOutputs (Optional)

Return method of the control. It will returnthe fetched object in a list.

destroy (Required)

Resources — If the PCF control requires styling(i.e., CSS) it has to be added as Resource.

Resource file has to be defined in the Manifest.

By now , if you run the command npm start, the controll will be opened in the browser and will look like this -

browser view of the component

Press F12 to debug

In next Session we will discuss how to build a re-usuable custom formatter component