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 Apr, 2024

Sales accelerator in D365 Sales

Introduction: In this blog we will see how Sales accelerator works and also how 'My work list' displays the work items.…

READ MORE
Blogs
01 Apr, 2024

How to Create Entitlement in D365 Customer Service

In this blog we will learn about what is Entitlement and how to create it. 1)what is Entitlement? Entitlement is…

READ MORE
Blogs
22 Mar, 2024

How to Create Product Catalog in Dynamics 365 for Sales - Part 1

In this blog series we will learn how to set up a product catalog in D365 Sales. The Product Catalog contains…

READ MORE