###### tags: `PCF`, `Dynamics`, `Powerapps`

# PCF

The main goal of the article was to put information about how to work with PCF in one place to avoid the need to go to Microsoft’s documentation.

# Preparing

Before you can start work with PCF you should do few things:
1. Install [NodeJS](https://nodejs.org/en/)
2. Install [.NET Framework 4.6.2 Developer Pack](https://dotnet.microsoft.com/download/dotnet-framework/net462)
3. Install **Visual Studio 2017** or later, [.NET Core 2.2 SDK](https://dotnet.microsoft.com/download/dotnet-core/2.2) and if you want [Visual Studio Code](https://code.visualstudio.com/Download)
4. Install [Microsoft PowerApps CLI](https://aka.ms/PowerAppsCLI)
5. Update **Microsoft PowerApps CLI** to the latest version. To update run **Developer Command Prompt for VS 2017** (depends of installed **Visual Studio** for **Visual Studio 2019** it will be **Developer Command Prompt for VS 2019**) and execute `pac install latest`

# Creating a new component

For creating a new component go through the next steps:
1. Run **Developer Command Prompt for VS 2017**
2. Create directory by the command `mkdir <enter directory name>`
3. Go to the created directory
4. Create a new component using the command `pac pcf init --namespace <enter namespace name> --name <enter component name> --template field` (currently, PowerApps CLI supports two types of components: **field** and **dataset**. For canvas apps, only field type is supported for experimental preview.)
5. Execute the command `npm install` for installing necessary dependencies

After the steps above the component will be created and you can start development

# Control manifest configuration

A custom component is defined by the information in the **ControlManifest.Input.xml** manifest file. The file is in the folder with a component.

Each component can contain properties. You can define a property in **ControlManifest.Input.xml**

<property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" />

Available types you can check by the [link](https://docs.microsoft.com/en-us/powerapps/developer/component-framework/manifest-schema-reference/type).

Also, `of-type` can be replaced with `of-type-group`. Example:

  <property name="textValue" display-name-key="textValue_Display_Key" description-key="textValue_Desc_Key" of-type-group="text" usage="bound" required="true" />
    
    <type-group name="text">
      <type>SingleLine.Email</type>
      <type>SingleLine.Phone</type>
      <type>SingleLine.Text</type>
      <type>SingleLine.TextArea</type>
      <type>SingleLine.Ticker</type>
      <type>SingleLine.URL</type>
      <type>Multiple</type>
    </type-group>

# Local debugging

If you execute the command `npm start`, your browser will open **PowerApps Component Framework Test Environment** that will contain the created component. You can successfully work with breakpoints from **Development tool** (F12).
For the testing **dataset** you can use mock data, for it you can upload **CSV** file.

To enable watch mode, start the test harness using the command `npm start watch`. In watch mode, the changes made to any of the below component assets are automatically reflected in the test harness without having to restart it

# Building

Follow the steps below to create and import a solution file:

1. Create a new solution project in the directory of your choice using the command `pac solution init --publisher-name <enter your publisher name> --publisher-prefix <enter your publisher name>` after `cd <your new folder>`. (The publisher-name and publisher-prefix values must be unique to your environment.)
2. Once the new solution project gets created, you need to refer to the location where the created component is located. You can add the reference using the command `pac solution add-reference --path<path of your PowerApps component framework project on disk>`. This reference, tells the solution project which custom components should be added during the build, and you can add references to multiple components in a single solution project.
3. To generate a **zip** file from your solution project, you need to cd into your solution project directory and build the project using the command `msbuild /t:restore`. This command uses MSBuild to build your solution project by pulling down NuGet dependencies as part of the restore. Use the `/restore` only for the first time when the solution project is built. For every build afterward, you can run the command `msbuild /t:rebuild`. If you just call `msbuild` this will result in an error(MS know about it and promise to fix it in future [ticket](https://powerusers.microsoft.com/t5/PowerApps-component-framework/Control-directory-with-same-publisher-name-already-exists/td-p/350916)). For create `managed` solution use `/p:configuration=Release` flag.
4. After all the steps **unmanaged** solution will be in the directory `\bin\debug\`, **managed** solution will be in `\bin\release`.

# Deploying

There are to way to deploy your PCF control:

The first way is to get your solution from the directory `\bin\debug` (**unmanaged**) or `\bin\release` (**managed**) and manually import to a system.

And the second way is deploy the PCF component directly from the PowerApps CLI by authenticating to Common Data Service org, then pushing the updated component.
1. Create your authentication profile using the command `pac auth create --url <your Common Data Service org’s url>`. If you have previously created an authentication profile, you can view all existing profiles using the command `pac auth list`. To switch between the previously created authentication profiles, use the command `Pac auth select --index <index of the active profile>`.To get the basic information about the organization, use the command. The connection will made using the default authentication profile `pac org who`.
2. In your VS command prompt, go to the root directory containing of your code component project in your VS command promp
3. Run the command `pac pcf push --publisher-prefix <your publisher prefix>`

# References
* https://docs.microsoft.com/en-us/powerapps/developer/component-framework/get-powerapps-cli
* https://docs.microsoft.com/en-us/powerapps/developer/component-framework/implementing-controls-using-typescript
* https://docs.microsoft.com/en-us/powerapps/developer/component-framework/create-custom-controls-using-pcf
* https://docs.microsoft.com/en-us/powerapps/developer/component-framework/import-custom-controls
* https://docs.microsoft.com/en-us/powerapps/developer/component-framework/debugging-custom-controls