Utiliser des composants d’Office UI Fabric React dans votre composant WebPart côté client SharePoint
La structure React pour l’interface utilisateur Office est l’infrastructure frontale permettant de créer des expériences pour Office et Office 365. C’est un ensemble robuste de composants orientés mobile et réactifs conçus pour simplifier et accélérer la création d’expériences web à l’aide du langage de conception Office.
Cet article explique comment créer un composant WebPart comme celui illustré ci-après, qui utilise le composant DocumentCard d’Office UI Fabric React.

Vous pouvez également suivre cette procédure en regardant la vidéo suivante sur la chaîne YouTube SharePoint PnP :
Office UI Fabric React et Fluent UI React
Notes
Début 2020, Microsoft a renommé Office UI Fabric en Fluent UI.
La transition d’Office UI Fabric vers Fluent UI, et les composants React respectifs, est actuellement dans un état de transition. Pour en savoir plus sur l’état actuel et leur feuille de route, consultez le forum aux questions fourni par l’équipe Fluent UI : FAQ sur Fabric et Stardust vers Fluent UI.
Les packages SharePoint Framework (SPFx) référencent actuellement les packages NPM Office UI Fabric d’origine. Ces packages sont actuellement pris en charge et continueront de fonctionner.
Le package Fluent UI React principal, @fluentui/react, exporte simplement les composants du package office-ui-fabric-react utilisé dans les projets SharePoint Framework. À ce stade, vous devez continuer à utiliser le package office-ui-fabric-react dans vos projets SharePoint Framework.
Cette page continue à faire référence aux packages Office UI Fabric jusqu’à ce que Microsoft recommande de passer aux packages Fluent UI. Les liens de documentation de cette page peuvent pointer vers la documentation de Fluent UI, mais elle s’applique également à Office UI Fabric.
- Site web Fluent UI : documentation détaillée de l’API et exemples de code d’implémentation pour chaque contrôle.
- Référence d’API : documentation détaillées sur la référence d’API.
- Office UI Fabric React / Fluent UI React : référentiel de code source sur github.
Création d’un projet de composant WebPart
Créez un nouveau répertoire de projet à l’emplacement de votre choix :
md documentcardexample-webpartAccédez au répertoire du projet :
cd documentcardexample-webpartCréez un nouveau projet en exécutant le Yeoman Microsoft Office SharePoint Online Generator à partir du nouveau répertoire que vous avez créé :
yo @microsoft/sharepointLe Yeoman Microsoft Office SharePoint Online Generator vous posera une série de questions. Pour toutes les questions, acceptez les options par défaut à l'exception des questions suivantes :
- Voulez-vous autoriser l’administrateur client à choisir de pouvoir déployer la solution sur tous les sites immédiatement sans exécuter de déploiement de fonctionnalité ni ajouter d’applications sur les sites ? : oui
- Quel type de composant côté client voulez-vous créer ? : composant WebPart
- Quelle infrastructure voulez-vous utiliser ? : React
À ce stade, Yeoman installe les dépendances requises et crée la structure des fichiers de la solution.
À compter de la version 1.8.2 de SPFx, Yeoman inclut la version du package recommandé @microsoft/sp-office-ui-fabric-core à votre solution lorsque vous sélectionnez le React comme framework web souhaité.
Notes
À partir de SPF. 1.8, vous pouvez utiliser la structure de l’interface utilisateur d’Office Fabric React v5 ou v6. Chaque version de SPFx met à niveau la version d’Office UI Fabric React dans les nouveaux projets. Par exemple :
- Les projets SPFx v1.8 utilisent Office UI Fabric React v5.132.0 par défaut
- Les projets SPFx v1.9 et v1.10 utilisent Office UI Fabric React v6.189.2 par défaut
Différentes versions d’Office UI Fabric React ont des dépendances différentes sur les versions de TypeScript. Si vous souhaitez mettre à niveau un projet SPFx existant vers une version plus récente d’Office UI Fabric React, consultez la section suivante : Annexe : mise à niveau des versions d’Office UI Fabric React
Cette page suppose que vous utilisez la dernière version de SharePoint Framework.
Ensuite, exécutez la commande ci-dessous pour ouvrir le projet de composant WebPart dans Visual Studio Code :
code .Vous disposez maintenant d’un projet de composant WebPart avec l’infrastructure web React.
Ouvrez DocumentCardExampleWebPart.ts à partir du dossier src\webparts\documentCardExample.
Comme vous pouvez le voir, la méthode
render()crée un élément React et l’affiche dans le DOM du composant WebPart.public render(): void { const element: React.ReactElement<IDocumentCardExampleProps> = React.createElement( DocumentCardExample, { description: this.properties.description } ); ReactDom.render(element, this.domElement); }Ouvrez DocumentCardExample.tsx à partir du dossier src\webparts\documentCardExample\components.
Il s’agit du principal composant React que Yeoman a ajouté à votre projet qui s’affiche dans le DOM du composant WebPart.
export default class DocumentCardExample extends React.Component<IDocumentCardExampleProps, {}> { public render(): React.ReactElement<IDocumentCardExampleProps> { return ( <div className={ styles.documentCardExample }> <div className={ styles.container }> <div className={ styles.row }> <div className={ styles.column }> <span className={ styles.title }>Welcome to SharePoint!</span> <p className={ styles.subTitle }>Customize SharePoint experiences using web parts.</p> <p className={ styles.description }>{escape(this.props.description)}</p> <a href="https://aka.ms/spfx" className={ styles.button }> <span className={ styles.label }>Learn more</span> </a> </div> </div> </div> </div> ); } }
Ajout d’un composant de la structure de l’interface utilisateur Office
Les nouvelles expériences modernes dans SharePoint utilisent Office UI Fabric et Office UI Fabric React comme infrastructure frontale par défaut pour la création d’expériences. Par conséquent, SharePoint Framework est fourni avec une version par défaut d’Office UI Fabric et de Fabric React qui correspond à la version disponible dans SharePoint. Cela garantit que le composant WebPart que vous créez utilise la version correcte des styles et des composants de Fabric lors du déploiement sur SharePoint.
Étant donné que nous avons choisi l’infrastructure React lors de la création de la solution, le générateur a installé la version correcte d’Office UI Fabric React également. Vous pouvez importer directement les composants de Fabric dans vos composants React sans aucun travail supplémentaire.
Pour ajouter un composant Office UI Fabric
Ouvrez DocumentCardExample.tsx à partir du dossier src\webparts\documentCardExample\components.
Ajoutez l’instruction
importsuivante en haut du fichier pour importer les composants Fabric React à utiliser.import { DocumentCard, DocumentCardPreview, DocumentCardTitle, DocumentCardActivity, IDocumentCardPreviewProps } from 'office-ui-fabric-react/lib/DocumentCard';Remplacez la méthode
render()existante par celle-ci :public render(): JSX.Element { const previewProps: IDocumentCardPreviewProps = { previewImages: [ { previewImageSrc: String(require('./document-preview.png')), iconSrc: String(require('./icon-ppt.png')), width: 318, height: 196, accentColor: '#ce4b1f' } ], }; return ( <DocumentCard onClickHref='http://bing.com'> <DocumentCardPreview { ...previewProps } /> <DocumentCardTitle title='Revenue stream proposal fiscal year 2016 version02.pptx' /> <DocumentCardActivity activity='Created Feb 23, 2016' people={ [ { name: 'Kat Larrson', profileImageSrc: String(require('./avatar-kat.png')) } ] } /> </DocumentCard> ); }Enregistrez le fichier.
Dans ce code, le composant
DocumentCardcomprend certaines sections supplémentaires :- DocumentCardPreview
- DocumentCardTitle
- DocumentCardActivity
La propriété
previewPropscomprend certaines propriétés du composant DocumentCardPreview.
Copie des ressources d’image
Copiez les images suivantes dans votre dossier src\webparts\documentCardExample\components :
Notes
Dans le code nous référençons ces images à l’aide du chemin relatif de l’emplacement racine. Lorsque vous référencez les images dans le code, cela les inclura dans le package de solution *sppkg tant que vous avez le includeClientSideAssets défini en tant que true dans le fichier package-solution.json.
Afficher un aperçu du composant WebPart dans le workbench hébergé
Dans la console, entrez ce qui suit pour afficher un aperçu de votre composant WebPart dans SharePoint hosted Workbench :
gulp serve --nobrowserOuvrez un navigateur et accédez au workbench hébergé de votre site SharePoint :
https://enter-your-SharePoint-site/_layouts/workbench.aspx.Dans la boîte à outils, sélectionnez le composant WebPart
DocumentCardExampleà ajouter :
Annexe : mise à niveau des versions d’Office UI Fabric React
À partir de SPF. 1.8, vous pouvez utiliser la structure de l’interface utilisateur d’Office Fabric React v5 ou v6. Chaque version de SPFx met à niveau la version d’Office UI Fabric React dans les nouveaux projets. Par exemple :
- Les projets SPFx v1.8 et versions antérieures utilisent Office UI Fabric React v5.x par défaut
- Les projets SPFx v1.9 et v1.10 utilisent Office UI Fabric React v6.x par défaut
Différentes versions d’Office UI Fabric React prennent en charge différentes versions minimales de TypeScript.
Office UI Fabric React v5 dépend de TypeScript v2.x. Les projets SPFx v1.8 et antérieurs dépendent également de TypeScript v2.x.
Office UI Fabric React v6 nécessite TypeScript v3.x. Tous les projets SPFx v1.9 et versions ultérieures sont configurés pour utiliser TypeScript v3 ou version ultérieure qui correspond à la même dépendance d’Office UI Fabric React v6.
Si vous souhaitez mettre à niveau un projet SPFx v1.8 vers Office UI Fabric React v6, vous devez également mettre à niveau la version de TypeScript sur le projet. Pour plus d’informations, consultez les notes de publication de SPFx v1.8 : notes de publication de SharePoint Framework v1.8 : prise en charge de TypeScript 2.7, 2.9 et 3.x.