Pcf Control Bar

1) What Is PCF?

PCF is nothing but power app component framework
Power app component framework app can be used to develop to code component for model driven app and canvas app, these code component can be used on form, views, dashboard and canvas app screen.
Currently PCF is supported for on-premise

2) Do you have explorer on PCF control, how to achieve PCF control?

Ans) Yes, PCF control is used to provide rich look of ui part of the CRM for the customer.

My recent PCF control is multiline text box that limit is 2000 characters i will write more than 2000 characters then it will show error

1)create one folder in home-desktop-folder name

2)then install Node.js

3)then install Power apps CLI for this go to visual studio

Open Visual Studio Code.
Select the Extensions icon from the Activity panel. In the search bar, enter Power Platform Tools.
Select Install. Once the installation is finished, restart Visual Studio Code to see the extension within the Terminal window.

4) then open developer command prompt 2019

https://www.crmcrate.com/power-apps/pcf-custom-control-in-dynamics-365-crm-step-by-step-guide/

How to create PCF ?

Open C Drive in your Pc and Create a folder PCFControlFlow02

Open developer Command prompt and To navigate to Your Path enter : cd C:\PCFControlFlow02

To navigate to the path enter cd

C:\Program Files (x86)\Microsoft Visual Studio\2019\Community> cd C:\PCFControlFlow02

C:\PCFControlFlow02>

C:\PCFControlFlow02>pac install latest

Feeds used:

https://api.nuget.org/v3/index.json

Installing package 'Microsoft.PowerApps.CLI' to 'C:\Users\HariT\AppData\Local\Microsoft\PowerAppsCli'.

GET https://api.nuget.org/v3/registration5-gz-semver2/microsoft.powerapps.cli/index.json

OK https://api.nuget.org/v3/registration5-gz-semver2/microsoft.powerapps.cli/index.json 993ms

Package "Microsoft.PowerApps.CLI.1.28.3" is already installed.

C:\PCFControlFlow02> pac pcf init

The Power Apps component framework project was successfully created in 'C:\PCFControlFlow02'.

Be sure to run 'npm install' or equivalent in this directory to install project dependencies.

C:\PCFControlFlow02>npm install

npm WARN deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.

npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.

npm WARN deprecated @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.

added 720 packages, and audited 721 packages in 33s

124 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

Open Visual Studio and open the folder PCFControlFlow02

Now change the code in ControlManifest.Input.xml

1) ControlManifest.Input.xml

<?xml version="1.0" encoding="utf-8" ?>

<manifest>

   <control namespace="SampleNamespace"

      constructor="LinearInputControl"

      version="0.0.1"

      display-name-key="LinearInputControl"

      description-key="LinearInputControl description"

      control-type="standard">

      <type-group name="numbers">

         <type>Whole.None</type>

         <type>Currency</type>

         <type>FP</type>

         <type>Decimal</type>

      </type-group>

      <property name="controlValue"

         display-name-key="Control Value"

         description-key="Control value description."

         of-type-group="numbers"

         usage="bound"

         required="true" />

      <resources>

         <code path="index.ts"

            order="1" />

      </resources>

   </control>

</manifest>

2) TS ManifestTypes.d.ts

/*
*This is auto generated from the ControlManifest.Input.xml file
*/

// Define IInputs and IOutputs Type. They should match with ControlManifest.
export interface IInputs {
    controlValue: ComponentFramework.PropertyTypes.NumberProperty;
}
export interface IOutputs {
    controlValue?: number;
}

3) TS index.ts

import { IInputs, IOutputs } from "./generated/ManifestTypes";

export class LinearInputControl

implements ComponentFramework.StandardControl<IInputs, IOutputs>

{

private _value: number;

private _notifyOutputChanged: () => void;

private labelElement: HTMLLabelElement;

private inputElement: HTMLInputElement;

private _container: HTMLDivElement;

private _context: ComponentFramework.Context<IInputs>;

private _refreshData: EventListenerOrEventListenerObject;

/**

* Empty constructor.

constructor() {}

/**

* Used to initialize the control instance. Controls can kick off remote server calls

and other initialization actions here.

* Data-set values are not initialized here, use updateView.

* @param context The entire property bag available to control via Context Object;

It contains values as set up by the customizer mapped to property names defined

in the manifest, as well as utility functions.

* @param notifyOutputChanged A callback method to alert the framework that the

control has new outputs ready to be retrieved asynchronously.

* @param state A piece of data that persists in one session for a single user.

Can be set at any point in a controls life cycle by calling 'setControlState'

in the Mode interface.

* @param container If a control is marked control-type='standard', it will receive

an empty div element within which it can render its content.

public init(

context: ComponentFramework.Context<IInputs>,

notifyOutputChanged: () => void,

state: ComponentFramework.Dictionary,

container: HTMLDivElement

): void {

// Add control initialization code

this._context = context;

this._container = document.createElement("div");

this._notifyOutputChanged = notifyOutputChanged;

this._refreshData = this.refreshData.bind(this);

// creating HTML elements for the input type range and binding it to the function which

// refreshes the control data

this.inputElement = document.createElement("input");

this.inputElement.setAttribute("type", "range");

this.inputElement.addEventListener("input", this._refreshData);

//setting the max and min values for the control.

this.inputElement.setAttribute("min", "1");

this.inputElement.setAttribute("max", "1000");

this.inputElement.setAttribute("class", "linearslider");

this.inputElement.setAttribute("id", "linearrangeinput");

// creating a HTML label element that shows the value that is set on the linear range control

this.labelElement = document.createElement("label");

this.labelElement.setAttribute("class", "LinearRangeLabel");

this.labelElement.setAttribute("id", "lrclabel");

// retrieving the latest value from the control and setting it to the HTMl elements.

this._value = context.parameters.controlValue.raw!;

this.inputElement.setAttribute(

"value",

context.parameters.controlValue.formatted

? context.parameters.controlValue.formatted

: "0"

);

this.labelElement.innerHTML = context.parameters.controlValue.formatted

? context.parameters.controlValue.formatted

: "0";

// appending the HTML elements to the control's HTML container element.

this._container.appendChild(this.inputElement);

this._container.appendChild(this.labelElement);

container.appendChild(this._container);

}

public refreshData(evt: Event): void {

this._value = this.inputElement.value as any as number;

this.labelElement.innerHTML = this.inputElement.value;

this._notifyOutputChanged();

}

/**

* Called when any value in the property bag has changed. This includes field values,

data-sets, global values such as container height and width, offline status, control

metadata values such as label, visible, etc.

* @param context The entire property bag available to control via Context Object;

It contains values as set up by the customizer mapped to names defined in the manifest,

as well as utility functions

public updateView(context: ComponentFramework.Context<IInputs>): void {

// Add code to update control view

// storing the latest context from the control.

this._value = context.parameters.controlValue.raw!;

this._context = context;

this.inputElement.setAttribute(

"value",

context.parameters.controlValue.formatted

? context.parameters.controlValue.formatted

: ""

);

this.labelElement.innerHTML = context.parameters.controlValue.formatted

? context.parameters.controlValue.formatted

: "";

}

/**

* It is called by the framework prior to a control receiving new data.

* @returns an object based on nomenclature defined in manifest,

expecting object[s] for property marked as "bound" or "output"

public getOutputs(): IOutputs {

return {

controlValue: this._value,

};

}

/**

* Called when the control is to be removed from the DOM tree.

Controls should use this call for cleanup.

* i.e. cancelling any pending remote calls, removing listeners, etc.

public destroy(): void {

// Add code to cleanup control if necessary

this.inputElement.removeEventListener("input", this._refreshData);

}

Make the changes and save all the files and go to Developer Command Prompt again

C:\PCFControlFlow02>npm start

> pcf-project@1.0.0 start

> pcf-scripts start

[3:10:21 pm] [start] Initializing...

[3:10:21 pm] [start] Validating manifest...

[3:10:21 pm] [start] Validating control...

[3:10:22 pm] [start] Generating manifest types...

DeprecationWarning: 'createInterfaceDeclaration' has been deprecated since v4.8.0. Decorators are no longer supported for this function. Callers should switch to an overload that does not accept a 'decorators' parameter.

[3:10:22 pm] [start] Generating design types...

[3:10:22 pm] [start] Running ESLint...

[3:10:22 pm] [start] Compiling and bundling control...

[Webpack stats]:

asset bundle.js 6.55 KiB [emitted] (name: main)

./SampleControl/index.ts 4.91 KiB [built] [code generated]

webpack 5.89.0 compiled successfully in 1983 ms

[3:10:24 pm] [start] Generating build outputs...

[3:10:24 pm] [start] Starting control harness...

Starting control harness...

[Browsersync] Access URLs:

----------------------------

Local: http://localhost:8181

----------------------------

[Browsersync] Serving files from: C:\PCFControlFlow02\out\controls\SampleControl

[Browsersync] Watching files...

This will navigate to the browser and open the Power apps with slider

Now create a solution to show in CRM dynamics 365 for that get out the control from npm start for that go to Developer prompt again and press ctrl + c

Terminate batch job (Y/N)? Y

To create a solution mkdir solution.

C:\PCFControlFlow02>mkdir solution

hear either name to solution or any name according to the identification

C:\PCFControlFlow02>cd solution

C:\PCFControlFlow02\solution>pac solution init --publisher-name developer --publisher-prefix dev

Dataverse solution project with name 'solveAsolution' created successfully in: 'C:\PCFControlFlow02\solveAsolution'

Dataverse solution files were successfully created for this project in the sub-directory Other, using solution name solveAsolution, publisher name developer, and customization prefix dev.

Please verify the publisher information and solution name found in the Solution.xml file.

C:\PCFControlFlow02\solution> pac solution add-reference --path C:\PCFControlFlow02

Project reference successfully added to Dataverse solution project.

C:\PCFControlFlow02\solution> msbuild /t:restore

Microsoft (R) Build Engine version 16.11.2+f32259642 for .NET Framework

Build started 02-11-2023 16:12:05.

Project "C:\PCFControlFlow02\solveAsolution\solveAsolution.cdsproj" on node 1 (Restore target(s)).

_GetAllRestoreProjectPathItems:

Determining projects to restore...

Restore:

Restoring packages for C:\PCFControlFlow02\solveAsolution\solveAsolution.cdsproj...

Restoring packages for C:\PCFControlFlow02\PCFControlFlow02.pcfproj...

GET https://api.nuget.org/v3-flatcontainer/microsoft.powerapps.msbuild.solution/index.json

GET https://api.nuget.org/v3-flatcontainer/microsoft.powerapps.msbuild.pcf/index.json

OK https://api.nuget.org/v3-flatcontainer/microsoft.powerapps.msbuild.solution/index.json 1005ms

OK https://api.nuget.org/v3-flatcontainer/microsoft.powerapps.msbuild.pcf/index.json 1332ms

Committing restore...

Generating MSBuild file C:\PCFControlFlow02\obj\PCFControlFlow02.pcfproj.nuget.g.props.

Generating MSBuild file C:\PCFControlFlow02\obj\PCFControlFlow02.pcfproj.nuget.g.targets.

Writing assets file to disk. Path: C:\PCFControlFlow02\obj\project.assets.json

Restored C:\PCFControlFlow02\PCFControlFlow02.pcfproj (in 1.93 sec).

Committing restore...

Generating MSBuild file C:\PCFControlFlow02\solveAsolution\obj\solveAsolution.cdsproj.nuget.g.props.

Generating MSBuild file C:\PCFControlFlow02\solveAsolution\obj\solveAsolution.cdsproj.nuget.g.targets.

Writing assets file to disk. Path: C:\PCFControlFlow02\solveAsolution\obj\project.assets.json

Restored C:\PCFControlFlow02\solveAsolution\solveAsolution.cdsproj (in 2 sec).

NuGet Config files used:

C:\Users\HariT\AppData\Roaming\NuGet\NuGet.Config

C:\Program Files (x86)\NuGet\Config\Microsoft.VisualStudio.Offline.config

Feeds used:

https://api.nuget.org/v3/index.json

C:\Program Files (x86)\Microsoft SDKs\NuGetPackages\

Done Building Project "C:\PCFControlFlow02\solveAsolution\solveAsolution.cdsproj" (Restore target(s)).

Build succeeded.

0 Warning(s)

0 Error(s)

Time Elapsed 00:00:03.26

C:\PCFControlFlow02\solveAsolution>msbuild

Microsoft (R) Build Engine version 16.11.2+f32259642 for .NET Framework

Build started 02-11-2023 16:14:22.

Project "C:\PCFControlFlow02\solveAsolution\solveAsolution.cdsproj" on node 1 (default targets).

PrepareForBuild:

Creating directory "bin\Debug\".

Creating directory "obj\Debug\".

Project "C:\PCFControlFlow02\solveAsolution\solveAsolution.cdsproj" (1) is building "C:\PCFControlFlow02\PCFControlFlow

02.pcfproj" (2:2) on node 1 (default targets).

_PcfAutoNpmInstall:

Skipping target "_PcfAutoNpmInstall" because all output files are up-to-date with respect to the input files.

PrepareForBuild:

Creating directory "obj\Debug\".

PcfBuild:

npm run build -- --noColor --buildMode development --outDir "C:\PCFControlFlow02\out\controls" --buildSource MSBuild

> pcf-project@1.0.0 build

> pcf-scripts build --noColor --buildMode development --outDir C:\PCFControlFlow02\out\controls --buildSource MSBuild

[4:14:26 pm] [build] Initializing...

[4:14:26 pm] [build] Validating manifest...

[4:14:26 pm] [build] Validating control...

[4:14:27 pm] [build] Generating manifest types...

DeprecationWarning: 'createInterfaceDeclaration' has been deprecated since v4.8.0. Decorators are no longer supported

for this function. Callers should switch to an overload that does not accept a 'decorators' parameter.

[4:14:27 pm] [build] Generating design types...

[4:14:27 pm] [build] Running ESLint...

[4:14:27 pm] [build] Compiling and bundling control...

[Webpack stats]:

asset bundle.js 6.55 KiB [emitted] (name: main)

./SampleControl/index.ts 4.91 KiB [built] [code generated]

webpack 5.89.0 compiled successfully in 1972 ms

[4:14:30 pm] [build] Generating build outputs...

[4:14:30 pm] [build] Succeeded

Done Building Project "C:\PCFControlFlow02\PCFControlFlow02.pcfproj" (default targets).

ResolveAssemblyReferences:

Primary reference "PCFControlFlow02".

Could not find dependent files. Expected file "C:\PCFControlFlow02\out\controls\PCFControlFlow02.exe" does not ex

ist.

Could not find dependent files. Expected file "C:\PCFControlFlow02\out\controls\PCFControlFlow02.exe" does not ex

ist.

Resolved file path is "C:\PCFControlFlow02\out\controls\PCFControlFlow02.exe".

Reference found at search path location "".

The ImageRuntimeVersion for this reference is "".

CopyCdsSolutionContent:

Creating directory "obj\Debug\Metadata\Other".

Copying file from "C:\PCFControlFlow02\solveAsolution\src\Other\Customizations.xml" to "C:\PCFControlFlow02\solveAsol

ution\obj\Debug\Metadata\Other\Customizations.xml".

Copying file from "C:\PCFControlFlow02\solveAsolution\src\Other\Solution.xml" to "C:\PCFControlFlow02\solveAsolution\

obj\Debug\Metadata\Other\Solution.xml".

Copying file from "C:\PCFControlFlow02\solveAsolution\src\Other\Relationships.xml" to "C:\PCFControlFlow02\solveAsolu

tion\obj\Debug\Metadata\Other\Relationships.xml".

ProcessCdsProjectReferencesOutputs:

Processing output of component type: Pcf, source output directory: C:\PCFControlFlow02\out\controls\, destination dir

ectory: C:\PCFControlFlow02\solveAsolution\obj\Debug\Metadata\Controls

Process: Output copied from source directory: C:\PCFControlFlow02\out\controls\SampleControl to destination directory

: C:\PCFControlFlow02\solveAsolution\obj\Debug\Metadata\Controls\dev_SampleNamespace.LinearInputControl

Process: Control data node created in C:\PCFControlFlow02\solveAsolution\obj\Debug\Metadata\Controls\dev_SampleNamesp

ace.LinearInputControl

Process: Root Component of type: 66, schema name: dev_SampleNamespace.LinearInputControl added to Solution

PowerAppsPackage:

Running Solution Packager to build package type: Unmanaged bin\Debug\solveAsolution.zip

Packing C:\PCFControlFlow02\solveAsolution\obj\Debug\Metadata to bin\Debug\solveAsolution.zip

Processing Component: Entities

Processing Component: Roles

Processing Component: Workflows

Processing Component: FieldSecurityProfiles

Processing Component: Templates

Processing Component: EntityMaps

Processing Component: EntityRelationships

Processing Component: OrganizationSettings

Processing Component: optionsets

Processing Component: CustomControls

- SampleNamespace.LinearInputControl

Processing Component: SolutionPluginAssemblies

Processing Component: EntityDataProviders

Unmanaged Pack complete.

Solution: bin\Debug\solveAsolution.zip generated.

Solution Package Type: Unmanaged generated.

Solution Packager log path: obj\Debug\SolutionPackager.log.

Solution Packager error level: Info.

CleanUpIntermediateFiles:

Removing directory "obj\Debug\Metadata".

Completed intermiediate files clean up.

Done Building Project "C:\PCFControlFlow02\solveAsolution\solveAsolution.cdsproj" (default targets).

Build succeeded.

0 Warning(s)

0 Error(s)

Time Elapsed 00:00:08.86

Now Open PC and go to the path there the solution folder will be visible open the solution folder and take the path.

Import the Solution to the CRM:

Open the CRM , Click on gear icon find advance settings , click on advance settings , click on settings savron , click on customization and click on entities there check for Accounts

Now Open CRM and go to Account entity or go to the customized entity and open main form and create a field with name controlPCF the save and publish .
then double click on the field and it will navigate to Field Properties and click on controls
By clicking on Add Control , we can see