📗
Everyday Cheat Sheets
  • README
  • Build
    • Architecture
      • API Management
        • Kong
      • Authentication
        • Keycloak
        • Okta
      • Cloud Native
      • Design Patterns
      • Design Principles
      • IaC
      • IoT
      • Message Broker
      • Methods
      • Networking
      • Payment
        • Stripe
      • Testing
    • Code lifecycle (ALM)
      • Automation Pipelines
        • Argo CD
        • CircleCI
        • Flux
        • Keptn
        • Travis
      • Azure DevOps
        • Azure Pipelines
      • Chef
      • GitHub
        • GitHub Actions
      • Nexus
      • Promyze
      • RunDeck
      • SaltStack
      • Sonar
      • Tuleap
    • Containers & Cloud Native
      • Argo Workflows
      • Containerization
        • Docker
          • Docker CLI
        • containerd
        • cri-o
      • CNAB
      • Dapr
      • Envoy
      • Fluentd
      • Knative
      • Kubernetes
        • Cluster API
        • etcd
        • Helm
        • k3d
        • kind
        • Kubectl
        • MetalLB
        • Minikube
      • Open Application Model (OAM)
      • Unleash
    • Data storage
      • MySQL
      • MongoDB
        • Atlas
        • Compass
        • Evergreen
        • MongoDB 4.2
        • MongoDB 5.0
        • MongoDB design
        • MongoDB events
        • MongoDB driver for .NET
        • Ops Manager
        • Realm
      • Oracle
      • Redis
      • SQL Server
      • PostgreSQL
    • Frameworks & libraries
      • Angular
        • Angular CLI
        • Angular events
      • .NET
        • ASP.NET Core
        • Blazor
        • .NET 5.0
        • .NET 6.0
        • .NET CLI
        • .NET Core
        • .NET Events
        • .NET Logging
        • .NET Testing
        • NuGet
        • WPF
        • Xamarin
      • gRPC
      • Ionic
      • Jekyll
      • Node.js
        • Express
        • NPM
      • React
        • React Native
      • Redux
    • IDE
      • Visual Studio 2022
    • Languages
      • C#
        • C# 8.0
      • ECMAScript
      • GraphQL
      • JavaScript
        • webpack
        • Yarn
      • MS-DOS
      • PHP
      • PowerShell
      • Python
      • Swagger
      • TypeScript
    • Messaging
      • Azure Service Bus
      • RabbitMQ
    • Testing
    • Workstation
      • QGIS
      • Visual Studio 2019
      • Windows 10
      • Windows Subsystem for Linux
  • Collaborate
    • Marp
    • Microsoft 365
      • Microsoft Graph
      • SharePoint Framework
        • Fluent UI
        • SharePoint Framework UI components
  • Run
    • Cloud computing
      • Alibaba
      • AWS
      • Azure
        • Azure AD
        • Azure CLI
        • Azure Container Registry
        • Azure Portal
        • Azure Service Bus
      • Firebase
      • OVH
    • Hardware
      • Single-board computers
        • Odroid
        • Raspberry Pi
    • Infrastructure automation
      • Azure Resource Manager
      • Packer
      • Pulumi
      • Puppet
      • Terraform
        • HCL
        • Terraform CLI
        • Terraform Providers
    • Networking
      • HAProxy
      • nginx
    • Observability
      • Grafana Labs
        • Grafana
        • Loki
        • Tempo
      • OpenTelemetry
      • Prometheus
      • Splunk
    • Security
      • Falco
    • Systems
      • Linux
        • CentOS
        • eBPF
        • Linux Kernel
        • Rocky
        • Ubuntu
      • Windows Server
    • Virtualization
      • Hyper-V
      • Vagrant
  • Optimize
    • DevOps
  • Join
    • Companies
      • HashiCorp
Powered by GitBook
On this page
  • JavaScript frameworks
  • Component libraries
  • Office UI Fabric React (soon to be replaced by Fluent UI)
  • Microsoft Graph Toolkit components
  • PnP (Microsoft 365 Patterns and Practices) components

Was this helpful?

Export as PDF
  1. Collaborate
  2. Microsoft 365
  3. SharePoint Framework

Fluent UI

PreviousSharePoint FrameworkNextCloud computing

Last updated 3 years ago

Was this helpful?

Many components are already available, as open source libraries, to build nice UX/UI.

JavaScript frameworks

Using a JavaScript framework is not mandatory but it can help having simple code.

Options are:

  • Angular

  • (recommended)

Component libraries

Office UI Fabric React (soon to be replaced by Fluent UI)

→

  • Installation

npm install office-ui-fabric-react
  • Introduction: ()

  • Catalog:

  • Source code:

  • Examples: DocumentCard, Persona,

Microsoft Graph Toolkit components

  • Installation

npm install @microsoft/mgt-spfx

# for React
npm install @microsoft/mgt-react

PnP (Microsoft 365 Patterns and Practices) components

npm install @pnp/spfx-property-controls --save --save-exact
npm install @pnp/spfx-controls-react --save --save-exact

Library to use Toolkit in SharePoint Framework solutions.

→

Getting started:

Examples:

()

()

React
developer.microsoft.com/fluentui
Use Office UI Fabric React components in your SharePoint client-side web part
Get Started with Fabric React
fluentui/controls/web
microsoft/fluentui
SearchBox
Microsoft Graph
SharePoint Framework library for Microsoft Graph Toolkit
Build a SharePoint web part with the Microsoft Graph Toolkit
Persona card
Property pane controls
pnp/sp-dev-fx-property-controls
React controls
pnp/sp-dev-fx-controls-react