Knowledge Center

01 Aug, 2020

PCF Control with Fluent UI and React Typescript

Posted on 01 Aug, 2020 by Admin, Posted in Power Platform

PCF Control with Fluent UI and React Typescript Blogs

PCF Control with Fluent UI and React Typescript


As we know PCF control allows us to develop the reusable component that can be used in Model Driven or Canvas Apps and we can also use the other framework in PCF control to enhance the features.

In this blog, we will see the use of fluent UI and React in PCF control.

To know more about Fluent UI please check the below link:

Fluent UI provides various controls which we can use in PCF control.


Please follow below steps to setup the PCF control with Fluent UI and React.

  1. You can refer below link to setup the PCF Control project

  1. After creating project please run below command for react and Fluent UI.

npm install react

npm install @types/react

npm install react-dom

npm install @fluentui/react

  1. After running above command, create “. tsx” file with any name as shown below:

Now, we are ready to use the Fluent UI control in our project. Let see this in example below.


In this example, we are going to create Grid like structure with Fluent UI “DetailsList” control as shown below:

To Know more about the Fluent UI controls please check below link:

Now, in the “FluentUIDetailedList.tsx” file we are going to implement the “DetailsList” control as shown in below code :

import * as React from 'react';
import { Fabric, DetailsList } from '@fluentui/react';
export class FluentUIDetailsListControl extends React.Component<{}, any> {
_allItems: any;
_columns: any;
constructor(props: {}) {
//Creating rows data
this._allItems = [];
for (let i = 0; i < 10>

//defining columns

this._columns = [

{ key: 'column1', name: 'Name', fieldName: 'name', minWidth: 100},

{ key: 'column2', name: 'Value', fieldName: 'value', minWidth: 100},


//Adding values to state

this.state = {

items: this._allItems,

columns: this._columns,



public render() {

return (




Below are the properties that required to show the data in “DetailsList” control.

  • Items – Rows Data
  • Columns- Columns List

Now, in the index.ts please add below code:

//used to render the DetailsListBasicExample Componant

private renderControl(context: ComponentFramework.Context) {

let data: any = context;

ReactDom.render(React.createElement(FluentUIDetailsListControl, data, {}), this.containter);


And Call above method in UpdateView method as shown below:

After this, we can simply build and run project using below commands:

  • Build – npm run build
  • Run – npm start

Final Output


This is a Required Field


Recent Updates

07 Sep, 2023

Optimizing Storage with SubscriptionTrackingDeletedObject Cleanup

What is SubscriptionTrackingDeletedObject? The "SubscriptionTrackingDeletedObject" table is linked to the "DeletionService," which handles two types of cleanup: organization-wide and record-specific.…

05 Sep, 2023

How to create real-time customer journeys in Dynamics 365 Marketing

Introduction: This blog will show how to create real-time customer journeys in Dynamics 365 Marketing. Customer journeys can be either…

30 Aug, 2023


Introduction: In Dynamics 365 (D365) Customer Service, the 'Customer 360' Component provides a comprehensive view of information and enables users…