Fluent UI, PnP, Microsoft Graph, and Adaptive Cards: An In-Depth Look at Custom SharePoint Development

When building custom SharePoint web parts, integrating Fluent UI, PnP React Controls, Microsoft Graph, and even Adaptive Cards provides a powerful, flexible toolkit for developers to create visually appealing and functional applications.

PnP and Microsoft Graph Integration

While Fluent UI handles the visual side and PnP simplifies SharePoint-specific functionality, PnPJS also offers built-in support for Microsoft Graph. By using PnPJS, developers can seamlessly query the Graph API alongside SharePoint data, eliminating the need for separate HTTP requests.

For example, accessing user information via PnPJS:

import { graph } from "@pnp/graph";
const users = await graph.users();

PnPJS simplifies the process of querying Microsoft Graph, providing an abstraction layer that reduces the complexity of accessing Graph endpoints.

When to Use PnP for Microsoft Graph:

• Simplified API: PnP provides a streamlined, TypeScript-friendly interface for Graph, reducing boilerplate code.
• Consistency: Using PnP allows developers to manage both SharePoint and Microsoft Graph data in a unified manner.

Adaptive Cards: Rich, Flexible UI Elements

Adaptive Cards are a powerful way to display interactive, rich content across multiple platforms, including SharePoint. With Adaptive Cards, you can present data from Microsoft Graph or SharePoint in a clean, responsive format that adapts to different devices and screen sizes.

Key Features of Adaptive Cards:

1. Cross-Platform Compatibility: Adaptive Cards can be used across Teams, Outlook, and SharePoint to provide a consistent user experience.
2. Customizable UI: Developers can build personalized interfaces with inputs, buttons, and actions without extensive custom coding.
3. Real-Time Updates: By leveraging data from Microsoft Graph, Adaptive Cards can display real-time information such as calendar events, documents, or Teams messages.

Example Adaptive Card JSON:

{
  "type": "AdaptiveCard",
  "version": "1.3",
  "body": [
    {
      "type": "TextBlock",
      "text": "Upcoming Meeting",
      "size": "Large"
    },
    {
      "type": "TextBlock",
      "text": "Meeting with: John Doe"
    }
  ],
  "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "View Details",
      "url": "https://..."
    }
  ]
}

This card can be rendered in SharePoint to display real-time data, such as meetings or upcoming tasks, fetched directly from Microsoft Graph.

Why Use Adaptive Cards?

• Versatile Interface: Adaptive Cards are ideal when you need dynamic, visually rich content that adapts across devices and applications.
• Microsoft 365 Integration: They easily consume data from Microsoft Graph, displaying personalized content like events, documents, and notifications in a sleek, interactive format.

A Complete Approach: Fluent UI, PnP, Microsoft Graph, and Adaptive Cards

When developing a custom SharePoint web part:

1. Use Fluent UI for seamless, consistent user interface design.
2. Leverage PnP Controls to interact with SharePoint lists, libraries, and files with minimal code.
3. Access broader Microsoft 365 services like Outlook, OneDrive, and Teams through Microsoft Graph.
4. Present complex data dynamically with Adaptive Cards.

This combination allows for the creation of highly customized, user-friendly, and interactive web parts that integrate deeply into the Microsoft ecosystem, enhancing both productivity and user experience.

Conclusion: Building Enterprise-Ready Web Parts

Creating custom SharePoint web parts with Fluent UI, PnPJS, Microsoft Graph, and Adaptive Cards offers an unbeatable toolkit for enterprise applications. You can seamlessly pull data from various Microsoft 365 services, display them in visually appealing formats, and create interactive, adaptive content across multiple platforms. This not only boosts efficiency but also provides a polished, professional user experience.

Learn More

For further reading and more detailed documentation, visit:

• Fluent UI Documentation
• PnPJS and PnP Controls Documentation
• Microsoft Graph API Documentation
• Adaptive Cards Documentation
• SPFx ListView Sample
• PnPJS Graph Integration

Stay tuned for the next article, where we will begin exploring each of these controls in depth, starting with Fluent UI buttons and their interaction with Microsoft Graph!