Step by Step Guide to Using PowerApps Component Framework (PCF) to Create Custom Controls

Picture of alphabold

alphabold

Introduction

This blog will explain the step-by-step flow for creating a PCF component from scratch. We will first go through installing the required component for the building and development of the PCF component. After that, we will give you a detailed description of coding files and provide some information about some critical files in the development like typescript and manifest files. Once we deployed the component, then we will build the solution and deploy it to Dynamics 365 and configure it for an entity.

Learn more about Dynamics 365 Services

Prerequisites

We need Power Apps CLI, which allows us to create/update and deploy a custom control component. 

There are a few prerequisites before we go ahead. 

  1. We must have to install Node.js, and this will also install NPM. Node.js is the framework used to create server-side applications in JavaScript using an engine called V8, and NPM (Node.js Package Manager). This tool allows us to include, remove, and update the libraries in the project. 
  2. We must have .NET Framework version 4.6.2 as required for Power Apps CLI. To install, go to the Microsoft website, download it, or either use Visual Studio installer from there in individual Components and select .NET Framework 4.6.2 Targeting Pack & .NET Framework 4.6.2 SDK. 
  3. After that, we need to install Power Apps CLI to Download it Click Power Apps CLI. 
  4. We must have Visual Studio 2017 or a higher version. 

After completing the installation, we are now ready to create the project for PCF.  

Steps To Set Up A PCF Project

There are a few steps that we need to follow to create a PCF project. Let us go through it step by step. 

  1. Specify or create a working folder. In my case, it will be “C:SamplePCF”. 
  2. After that, we need to use the oldest command prompt or use console emulators like CMDER. 
  3. Now we need to navigate to the folder that we specified in step 1. We will be using the “cd” command.
this image shows the cd command
  1. After that run the “pac” command to create new PCF component projects. 

pac pcf init –namespace <namespace here> –name <Name of the code component> –template <component type>

This command will create a Power Apps Component Framework (PCF) project in our folder. The namespace parameter contains the value that you want. The name parameter will include the name that we give to the component. In component type, we will be giving the type for the component. So far, we have two template types available for the model-driven apps component: Field and Dataset, and only one supported for the canvas apps, which is Field.  

So, my command will look like this:

this image shows the command will create a Power Apps Component Framework
  1. After that, we need to use the npm command to retrieve project dependencies. In the following command, we will be run to do this. 
this image shows the npm command to retrieve project dependencies

 As of now, the project is ready. We can use any development tool for the implementation, but I will be using the Visual Studio Code.

The below image will give you an overview after completing the above step: the file structure in the project folder.

this image shows the file structure in the project folder.

There will be a folder created in my case, “GridPCFComponent” which will be of the same name as we provide in the “pac” command. Now navigate inside the solder, and then you will see the below structure.

this image shows the GridPCFComponent

Configure Manifest File

Configure Manifest file is one of the most critical files in the whole project as it contains all the essential component definitions.  Let’s review some essential tags.

Control Tag:

this image shows the control tag

Attributes Of Control Tags:

  • namespace: Provided in the “pac” command earlier. 
  • constructor: Provided in the “pac” command earlier. 
  • version: change the versioning if needed; else, we can keep it to default. 
  • display-name-key: This will be the display name with no spaces for custom control. 
  • description-key: This description will be shown in D365 for custom control. 
  • control-type: We will keep the default value 

Property Tag:

This image shows the Property TAG

Attributes Of Property Tags:

  • name: Provide the name that will be used for custom control. 
  • display-name-key: Provide the display name with no spaces for custom control. 
  • description-key: This description will be shown in D365 for custom control. 
  • of-type: If we are using a single datatype, then there are some supported datatype that can be used for the of-type attribute. 

Valid values are: 

  1. TwoOptions 
  2. Whole.None 
  3. Currency 
  4. DateAndTime.DateAndTim 
  5. DateAndTime.DateOnly 
  6. SingleLine.Email 
  7. SingleLine.Phone 
  8. SingleLine.Text 
  9. SingleLine.TextArea 
  10. SingleLine.Ticker 
  11. SingleLine.URL 
  12. Decimal 
  13. Enum 
  14. FP 
  15. Multiple 
  16. Optionset 
  • of-type-group: if we are building control that will support multiple data-type, then we need to use the of-type-group attribute.  

Let us define a type-group: 

<type-group name=”line”> 

<type>SingleLine.Email</type> 

<type>SingleLine.Phone</type> 

<type>SingleLine.Text</type> 

<type>SingleLine.URL</type> 

</type-group> 

DataSet Tag:

this image shows the Dataset TAG

Attributes Of Data-Set Tags:

  • name: Provide the name of the data setused to get the value in a custom control. 
  • display-name-key: Provide the display name with no spaces that will be set while importing in App. 
  • description-key: This description will be shown in D365 for custom control. 

Resources Tag:

this image shows the Resources TAG

Subtags Of Resources Tags:

  • code: Provide the relative path for typescript file which contains code for custom control 
  • css – Provide the CSS files that need to be added. 
  • resx – Provide the file path that contains static string contents that are needed for the control. 
  • img – Provide the images that are needed in the project. 

Typescript File:

This file is also created when we execute the “pac pacf” command, and it contains some signature methods that are needed to implement. If you are not familiar with the typescript, you will be able to quickly grasp it, especially if you have JavaScript experience This file controls the lifecycle of the code component. Now let us go through each method. 

  • Init: This method in the lifecycle of the component used to initialize it. In this, we will initialize particular action or remote server calls for the component. There are four parameters for this method. Let’s go through them one by one. 
Name Type Required Description
Context
Context
Yes
It contains the Input properties, which also contains the parameters, interface functions, and component metadata.
State
Dictionary
No
This parameter saved the State from setConttrolState in the earlier session.
notifyOutputChanged
Function
No
This parameter gives the ides to the framework that it has a new output.
Container
HTMLDivElement
No
This parameter gives us the div element to render.
  • updateView: This method will get triggered whenever any value is changed in the property bag. It can be field values, global values, datasets, component metadata, and so on. It contains a context parameter that includes the changed values that we have mapped to the name in the manifest and the utility functions. 
  • getOutputs: When a component receives new data, this method will get triggered. It returns the object, defined in the manifest file, either of type output or bound. 
  • destroy: This method will get triggered when a component gets removed from the DOM object. This method is used to get cleanup and release any memory that is still used by the component. 

Building and Testing the PCF control:

We will give you a sample of a basic HTML table in the component.  Let us start by creating a CSS file. We will create a folder with the name of CSS and then create a file inside this folder with the name GridPCFComponent.css. As you can see in the below screenshot. 

Further Reading: Address Composite PCF Control

This image shows the Building and Testing the PCF control

After that, we need to update the ControlManifest.Input.xml to communicate the PCF control that the CSS file for this is component found at the following path. After adding, you will see the file like this.

this image show's the ControlManifest - PCF component development

Starting coding:

We will start by creating a container for HTMLDivElement type into typescript file name index.ts.

this image shows the HTMLDivElement

Now we will inject the div element with a constant element that will contain a predefined HTML table element with some static data. All this will be implemented in the init() method. Once we complete it, the method will look like this.

Transform Your Applications with Our Power Platform Expertise

AlphaBOLD's Power Platform services are designed to help you leverage custom controls and more. Discover how our expertise can bring your vision to life.

Request a Demo
this image shows the HTML table element - Custom Controls with PCF

Now we will run the “npm start” command so that we can start the application component testing in the PowerApps component framework Test Environment.

this image shows the start the application component testing in the PowerApps component framework Test Environment

The below screenshot depicts how the component will be displayed.

this image show's the depicts how the component will be displayed

The image above indicates that the PowerApps component framework gives us an interface for debugging the real data and see what our component will respond to. 

Building asolution first, we need to create a Dynamics 365 environment profile that will be used to publish our component to the desired environment. To do this, we need to use the “pac auth” command. 

pac auth create –url <your organization url> 

Once you run this command, it will prompt the user in that particular environment to create the profile. 

this image shows particular environment to create the profile. Creating Custom Controls with PCF

 Once we provide valid credentials, the connection profile will be created for the environment. This will allow the command to display the Valid connection message below.

this image shows Valid connection message

After that, we will run the “pac pcf push” command to package the PCF component in a solution file(zip). This will allow it to be imported to the environment for which we have created the profile in the above image.  

pac pcf push –publisher-prefix <publisher prefix> 

The below image will show the output of the pac pcf push command.

this image shows pac pcf push command

 Once the command runs successfully, it will import the environment’s solution, as shown in the below image.

this image shows import the environment’s solution - Custom Controls with PCF

Configure The PCF Component In D365

Now we will create a solution and add an account entity to it for the demo purpose.  

As seen in the below image, there is a Controls tab where we need to click on the Add Control link.

this image shows Configure The PCF Component In D365

 After that, the popup will be prompt to select the control that we have created; in my case, it’s “GridPCFComponent”.

this image shows the GridPCFComponent

Once we select the component, we need to click on the “Add” button found at the bottom right corner.

Innovate with AlphaBOLD's PowerApps Services

With AlphaBOLD's PowerApps services, explore the endless possibilities of custom controls using the PowerApps Component Framework. Innovate your applications and streamline your processes with our expert guidance.

Request a Demo
this image shows Add” button found at the bottom right corner. PCF control

Once configured, we need to select the option on which we need to display the PCF component. In this demo, we will select “Web.”

this image shows the display the PCF component

Now we have completed the configuration, and let’s load it in D365.

Further Reading: POWER APPS COMPONENT FRAMEWORK SETUP AND CONFIGURATION FOR DYNAMICS 365

this image shows the completed configuration - Custom Controls with PCF

Conclusion

Conclusively, we went over the step-by-step process of installation to coding and then building and publishing the PCF component in Dynamics 365. I hope this will resolve any questions that occur in a new developer’s mind, who is not familiar with the PCF component! As in this, we are giving an overview of creating a PCF component from scratch. 

For questions or insights, leave a comment below or reach out to us at [email protected]. We are always happy to help.  

 If you have any question or queries, do not hesitate to reach out to us! 

Explore Recent Blog Posts

Infographics show the 2021 MSUS Partner Award winner

Related Posts

Receive Updates on Youtube