PCF Control development

1. Install the Node.js

2. Open the Power shell and run node -v

3. Download and Install the Visual Studio Code

4. Install the Power Apps CLI

5. Validate the PowerApps CLI    pac install latest 

6. Create a PCF Project 

    . Create your own folder in your local machine

    . Open a cmd prompt and change the location to above created.

    . Execute the following command syntax is    

          pac pcf init --namespace CRMONCE --name CRMPCFProject --template field

7. run the command     npm install

8. Open the folder in VSCode.

9. run npm run build 

10 run    "npm start"/ "npm start watch"

For continues solution build 

Use below url if you get ssl error

http://127.0.0.1:8181/

To generate package use below command

pac solution init --publisher-name developer --publisher-prefix dev

go to directory

C:\Users\user\Downloads\PCFPackage

pac solution add-reference --path "C:\Users\user\Documents\ProjectPCFControl"

open VS Developer command and run below command

first time below command

msbuild /t:build /restore

next time for production use below command else

msbuild /p:configuration=Release

msbuild

PCF Control Schema

 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

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: 

TwoOptions 

Whole.None 

Currency 

DateAndTime.DateAndTime 

DateAndTime.DateOnly 

SingleLine.Email 

SingleLine.Phone 

SingleLine.Text 

SingleLine.TextArea 

SingleLine.Ticker 

SingleLine.URL 

Decimal 

Enum 

FP 

Multiple 

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

 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 

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. 

How to get other controls value in PCF Control

 

 // @ts-ignore

           let XRM:any=window['Xrm'];

           let lastName=XRM.Page.data._formContext.getControl("cr6a2_lastname").getValue();

error 'context' is defined but never used no-unused-vars

 

When we run npm run build or npm start command and getting below error  

[4:53:53 PM] [start]  Initializing...

[4:53:53 PM] [start]  Validating manifest...

[4:53:53 PM] [start]  Validating control...

[4:53:55 PM] [start]  Generating manifest types...

[4:53:55 PM] [start]  Generating design types...

[4:53:55 PM] [start]  Running ESLint...

[4:53:59 PM] [start]  Failed:

[pcf-1065] [Error] ESLint validation error:

 43:23  error  'context' is defined but never used  no-unused-vars

Solution: Then ".eslintrc.json" file and add the below configuration under rules.

 "rules": {

      "no-unused-vars": ["warn"],

      "no-undef": ["warn"]

    }

React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration

When we  build the PCF project and  receive below warning  

Error:

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .

[4:47:40 PM] [start]  Compiling and bundling control...

Solution : Open the ".eslintrc.json" and add below configuration 

"settings": {

      "react": {

        "version": "detect"

      }

    }

The OutputPath property is not set for project PCFPackage.cdsproj

 When we run the below command in VS Developer command 

"msbuild /t:build /restore" or "msbuild /p:configuration=Release"

and get the below error

C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\MSBuild\15.0\bin\Microsoft.Common.CurrentVersion.targets(780,5): error : The OutputPath property is not set for project 'PCFPackage.cdsproj'.  Please check to make sure that you have specified a valid combination of Configuration and Platform for this project.  Configuration='Debug'  Platform='AnyCPU'.  You may be seeing this message because you are trying to build a project without a solution file, and have specified a non-default Configuration or Platform that doesn't exist for this project. [C:\Users\user\Downloads\PCFPackage\PCFPackage.cdsproj]

Solution: Add below configuration in .cdsproj file 

<PropertyGroup Condition=" '$(Configuration)' == 'Debug' ">

    <DebugSymbols>true</DebugSymbols>

    <DebugType>full</DebugType>

    <Optimize>false</Optimize>

    <OutputPath>bin\Debug\</OutputPath>

    <DefineConstants>DEBUG;TRACE</DefineConstants>

    <ErrorReport>prompt</ErrorReport>

    <WarningLevel>4</WarningLevel>

  </PropertyGroup>

  <PropertyGroup Condition=" '$(Configuration)' == 'Release' ">

    <DebugType>pdbonly</DebugType>

    <Optimize>true</Optimize>

    <OutputPath>bin\Release\</OutputPath>

    <DefineConstants>TRACE</DefineConstants>

    <ErrorReport>prompt</ErrorReport>

    <WarningLevel>4</WarningLevel>

  </PropertyGroup>