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

Loading

Recent Updates

Thumbnail D365 for Marketing
Blogs
16 Dec, 2024

10 Reasons Why You Need Dynamics 365 for Marketing

This blog discusses the top 10 reasons to choose Dynamics 365 for Marketing to improve your business's marketing efforts.  …

READ MORE
Thumbnail_top 10 benefits of
Blogs
02 Dec, 2024

Top 10 Benefits of Microsoft Dynamics 365

This blog lists the advantages of Microsoft Dynamics 365, focusing on how it can improve your business operations.    …

READ MORE
Thumbnail_Microsoft365 Vs D365
Blogs
12 Nov, 2024

Microsoft 365 vs Dynamics 365

This blog will help you understand the key difference between Microsoft 365 and Dynamics 365, so you can make an…

READ MORE