Fluent UI Components in Power Apps

Fluent UI Components

Fluent UI provides a set of reusable components and design patterns for building modern, responsive, and accessible user interfaces. These custom components can be used within PowerApps to create custom forms, interfaces, and data visualization.

Using Fluent UI components ensures consistency in design, reduces development time, and improves the overall user experience.

Prerequisites

• Knowledge of essential PCF components. If you need to, please take a look at the PowerApps Component Framework article.
• Please refer to PowerApps + React for more about PowerApps Components Framework with React and PowerApps + Bootstrap for how to create forms with Bootstrap in PowerApps.

Create PowerApps Solution

pac pcf init -n "name" -ns "namespace" -t [dataser field]

• "name" (-n) is a project name.
• "namespace" (-ns) is the namespace for the project.
• "type" (-t) can either be a dataset or a field.

Install Core React, React-Dom, and Fluent UI Packages

npm install react react-dom @fluentui/react

Install type definitions for the above packages as dev dependencies

npm install -–save-dev @types/react @types/react-dom

Structure for Components

I usually create a separate folder and add components to it.

• Created a new folder - Components.
• Created TSX files for components and added source code to them.
  

Please look at the developer Fluent UI site for Fluent UI components, its use, and guidelines (I have tried a few of them).

Render the Fluent UI Components

Import required dependencies

• On top of the file, import React and React-dom.
• Import form component

Render the components

• In the updateView function, use ReactDOM and React.createElement to create and render Fluent UI components.
• Save the changes, and it's done.

Save the changes made in the index.ts file and run the command.

npm start watch

Output