create one PCF control and embed into crm

 create one PCF control and embed into Crm

These pcf controls are the custom controls. we can create different control for the different data types in Crm.

In this post we can discuss about numeric data type.

For the creation, we require nodejs and power cli.

Step1: Download the nodejs from the browser and install it.

Stwp2: Open the Developer power shell for vs 2019



Step2: Check wheather app is installed or not. Enter the Below command

node -v  .It will show the version of the node js


Step3: Download and install the visual studio code.

Step4: Download the Power Cli from the below link

https://learn.microsoft.com/en-us/power-platform/developer/cli/introduction.



Step4: its open like below and click install


Step5: Go to file manager and create new one project folder

Step6: Chnage the path by entering the below command

cd Your file path.
Step5: Validate the Power cli by entering the below command

pac install latest

it will show like below


Enter the below command to instal our control to our project folder
pac pcf init --namespace CRMCrateNamespace --name CRMCrate --template field





After thtat open project file and check created or not
After enter npm install command 

It will get like this

Enter the npm run build command. it will show like below


Now enter the npm start command to start
 it will open in browser, shown like this



Now we can create custom pcf control for that follow the below steps.

Step1: Open your project in visual studio code


Open the Contorlmanifest.input file and replace the below code 


<?xml version="1.0" encoding="utf-8" ?>
<manifest>
//chnage the Contrctor name as class name of the index. ts file
<control namespace="SampleNamespace" constructor="TSLinearInputComponent" version="1.0.0" display-name-key="Linear Input Component" description-key="Allows you to enter the numeric values using the visual slider." control-type="standard">
   <type-group name="numbers">
     <type>Whole.None</type>
     <type>Currency</type>
     <type>FP</type>
     <type>Decimal</type>
    </type-group>
   <property name="sliderValue" display-name-key="sliderValue_Display_Key" description-key="sliderValue_Desc_Key" of-type-group="numbers" usage="bound" required="true" />
  <resources>
    <code path="index.ts" order="1" /> 
  </resources>
</control>
</manifest>

Step: Open the index file and replace the below code

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);
      }
}

After adding do like this and chnange the property name as controlValue as name


Click on save and close the application.

For Buliding the project enter the below command

npm run build

After that it will show like below

For the debugg enter the below command 
npm start   it will open in brroswer and shown like this

Our contorled is ready and ready to deploy into our crm instacne. it shown like above

Adding our control, create a one folder in our project like below.

After thta change path to create folder by copying the path and enter like below

cd C:\Users\user\Desktop\Powercli\Solutionofpcf  folder path

Now enter the below command pac solution init --publisher-name Publiser name--publisher-prefix publiser prefix   to create publiser name.

It will create publiser to our control like


Copy your project path and add it here for the refernces.

pac solution add-reference --path c:/YourFolderPath like  below
pac solution add-reference --path  C:\Users\user\Desktop\Powercli



After that for the building our porject enter the below command

msbuild /t:restore




Enter the msbuild command to create zip file

After this open created folder and go for the debug it will create one zip file



Now go  to Crm and import the solution to your Crm.

After uploading solution open any entity select the data type as number type and click on filed propertys.

Go to control tab click on add contorl, it will show the your custom control


At the end the it shows like this.




Thanks for reading the post. Add comment and follow for the latest posts.




Comments

Post a Comment

Popular posts from this blog

Connect MS Crm To Postman For Webapi Calls.

Image
 Connect MS Crm To Postman For Web api Calls. Step1: For the postman connection we need to create azure account with active directory in azure portal with Your Crm userid and password. Step2: Select the Azure active deprecatory and it will open below page And select the App registration i.e. available in the lest navigation Step3: After selecting it will open the and below page click on new app registration Step4: In the below page, we need to give the app name and redirected URL as localhost as Web and supported account for any organization and click on register Step5: After register copy the client id and paste it some where, for the future reference And click on manifest in left navigation Step6:Set the Auth URL As below for further use Step7: Change the below marked code and set as true for the both and click on save Step8: Select the Api Permission in left navigation and click on Add permission  Step9: After that select Dynamic Crm As api permission Step10: Select the user and
Read more

create HTML page show all contact related to specific account, add this webresource as a subgrid in the form

Image
  We need to create one html and add the JavaScript and CSS. After Add the webresource to Form. For this fist we need to create hml like below <!DOCTYPE html> <html> <head>     <title>Contact Records</title>     <style>         table, th, td {             border: 1px solid black;             border-collapse:collapse;             border-color:yellow;         }         td{             text-align:center;             color:blue;             background-color:blue;                      }         th{             background-color:red;         }         td{             color:blueviolet;         }     </style> </head> <body>     <table >         <thead>             <tr>                 <th>Column name1</th>                 <th>Column name2</th>                 <th>Column name3</th>                  <th>Column name upto n</th>             </tr>         </thead>      
Read more