Integrating Fluent UI into portal forms

Fluent UI is Microsoft’s official design system for building web experiences that align with Microsoft 365. By integrating Fluent UI into Power Pages, particularly into portal forms, you can offer users a consistent, modern, and accessible interface that matches the look and feel of Microsoft apps like SharePoint, Teams, and Outlook.

Let’s go step-by-step into how to integrate Fluent UI with portal (entity) forms in Power Pages.

---

1. What is Fluent UI?

Fluent UI is a collection of UX frameworks:

• Fluent UI React (for React-based applications)
• Fluent Web Components (framework-agnostic)
• Fluent UI CSS styles (theming and styles)

Power Pages doesn’t natively use React, so the best approach is to integrate Fluent Web Components or apply Fluent styles directly to portal forms using JavaScript and CSS.

---

2. Options to Integrate Fluent UI

Option	Description	Recommended For
Fluent UI Web Components	Lightweight, HTML-based custom elements	Standard portal customization
Fluent UI React	Rich components, needs React setup	Custom React UIs in Power Pages
Fluent CSS Styles	Use only styles for textboxes, labels, etc.	Lightweight form theming

---

3. Add Fluent UI Libraries to Power Pages

A. Add Fluent UI via Web Files

1. Go to Power Apps > Portal Management > Web Files
2. Upload the Fluent UI bundle (e.g., from https://github.com/microsoft/fluentui)
   • Example (Web Components):
     • JS file: https://unpkg.com/@fluentui/web-components
3. Set proper MIME types:
   • JS: application/javascript
   • CSS: text/css

B. Add via CDN (Recommended for Simplicity)

In a Web Template (or HTML section), embed this:

<script type="module" src="https://unpkg.com/@fluentui/web-components"></script>

---

4. Customize Portal Forms with Fluent Components

Power Pages Entity Forms use standard HTML markup. You can replace default controls with Fluent Web Components using JavaScript.

Example: Replace Text Input

HTML default input:

<input type="text" id="firstname" />

Replace with Fluent UI component:

<fluent-text-field id="firstname" placeholder="Enter your first name"></fluent-text-field>

Steps to Replace Form Inputs:

1. Use JavaScript (as a Web File) to:
   • Select the default input
   • Replace or hide it
   • Insert the Fluent UI component

document.addEventListener("DOMContentLoaded", function () {
    const oldInput = document.querySelector("input[name='firstname']");
    if (oldInput) {
        const fluentInput = document.createElement("fluent-text-field");
        fluentInput.id = "firstname";
        fluentInput.value = oldInput.value;
        fluentInput.setAttribute("placeholder", "Enter your name");

        oldInput.parentNode.replaceChild(fluentInput, oldInput);
    }
});

---

5. Fluent UI Theming

You can customize the look of Fluent UI components globally using CSS variables:

<style>
    :root {
        --accent-fill-rest: #0078D4;
        --neutral-fill-input-rest: #f3f2f1;
        --neutral-foreground-rest: #323130;
    }
</style>

You can define these in the Header section of the form’s Web Template or layout.

---

6. Use Fluent Icons in Forms

To use icons:

<fluent-button appearance="primary">
    <span slot="start">
        <fluent-icon name="add"></fluent-icon>
    </span>
    Submit
</fluent-button>

To load Fluent Icons:

<script type="module">
  import {
    provideFluentDesignSystem,
    fluentButton,
    fluentIcon
  } from "@fluentui/web-components";

  provideFluentDesignSystem().register(
    fluentButton(),
    fluentIcon()
  );
</script>

Or load it via CDN version for simplicity.

---

7. Integrate with Dataverse Data

Fluent inputs can be bound to values via JavaScript, and form submission can be handled by:

• The default Power Pages form logic
• Or custom submission using Power Pages Web API (for full control)

document.querySelector("fluent-button").addEventListener("click", () => {
const firstName = document.getElementById("firstname").value;

fetch("/_api/contacts", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
},
body: JSON.stringify({
firstname: firstName
}),
credentials: "include"
}).then(resp => console.log("Submitted!"));
});


---

8. Accessibility and WCAG Compliance

Fluent UI components are built with accessibility in mind, including:

• Keyboard navigation
• Screen reader support
• Contrast ratios

By default, they help make your portal forms WCAG 2.1 compliant.

---

9. Performance and Compatibility

• Avoid adding too many custom elements on slow networks
• Use only necessary components to avoid bundle bloat
• Test compatibility with mobile browsers (Fluent UI is responsive)

---

10. When to Use Fluent UI in Power Pages

Use Case	Fluent UI Benefit
Custom branding or modern UI	Consistent Microsoft 365 look
Interactive forms	Tooltips, focus, visual feedback
Accessibility requirements	Built-in compliance
React-based apps	Fluent React integration
SPA or dashboard portal pages	Modular UI with fast rendering