knowledgecenter-breadcrum

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

Introduction

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:

https://developer.microsoft.com/en-us/fluentui#/controls/web

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

Steps

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

https://nebulaaitsolutions.com/create-and-setup-the-pcf-control-using-visual-studio-2019/

  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.

Example

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:

https://developer.microsoft.com/en-us/fluentui#/controls/web

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: {}) {
super(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

Comment

This is a Required Field

Loading

Recent Updates

Blogs
02 Jul, 2025

How to Show Icons in View Cells Based on Field Values in D365 CE

Introduction: In Dynamics 365, adding icons to view cells based on field values can make the interface more user-friendly and…

READ MORE
Blogs
01 Jul, 2025

Getting Started with Microsoft Access: Key Features and How to Use Them - Part 1

Getting Started with Microsoft Access: Key Features and How to Use Them Microsoft Access is a versatile and approachable database…

READ MORE
Thumbnail Image of ROI
Blogs
17 Jun, 2025

Maximizing ROI with Power Apps: The Role of Expert Consulting Services

Maximizing ROI with Power Apps: The Role of Expert Consulting Services Explore how skilled professionals can get you the best…

READ MORE