Comment Afficher les Éléments d’une Liste SharePoint dans une Web Part avec Fluent UI

Si vous rencontrez des difficultés pour afficher les éléments d’une liste SharePoint dans une web part du SharePoint Framework (SPFx) en utilisant React et Fluent UI, ce guide vous aidera à construire une solution fonctionnelle étape par étape. Que vous obteniez des erreurs undefined ou que les éléments de la liste ne soient pas transmis correctement à votre composant .tsx, cet article vous guidera pour construire une solution qui fonctionne.

Introduction

Dans cet article, je vais vous expliquer comment :

1. Configurer la web part SPFx.
2. Récupérer les éléments de la liste SharePoint avec PnPjs dans votre fichier .ts.
3. Transmettre ces éléments de liste sous forme de props à votre composant .tsx et les afficher avec React.

Étape 1 : Configuration de la Web Part SPFx

Tout d’abord, nous allons créer une web part SPFx basique en utilisant le générateur Yeoman et installer PnPjs pour gérer les opérations sur les listes.

1. Créer un Nouveau Projet SPFx

Ouvrez votre terminal et créez un nouveau projet SPFx en utilisant Yeoman. Sélectionnez React comme framework lorsque cela est demandé.

yo @microsoft/sharepoint

Assurez-vous de configurer votre environnement pour React.

2. Installer PnPjs

PnPjs est une bibliothèque puissante qui simplifie le travail avec SharePoint. Nous allons l’utiliser pour récupérer les éléments d’une liste SharePoint.

npm install @pnp/sp @pnp/spfx-controls-react --save

Étape 2 : Récupération des Éléments de Liste dans le Fichier .ts

Ensuite, nous allons configurer le fichier TypeScript principal (WebPart.ts) pour récupérer les éléments d’une liste SharePoint et les transmettre au composant React.

1. Importer les Bibliothèques Nécessaires

Dans votre fichier WebPart.ts, importez les bibliothèques nécessaires pour PnPjs et React.

import { spfi, SPFx } from '@pnp/sp';
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import PnPGetListItems, { IPnPGetListItemsProps } from './components/PnPGetListItems';

2. Initialiser PnPjs dans onInit()

Ensuite, initialisez PnPjs dans la méthode onInit() afin de pouvoir l’utiliser pour récupérer les éléments de la liste.

protected onInit(): Promise<void> {
  spfi().using(SPFx(this.context));
  return super.onInit();
}

3. Créer une Fonction pour Récupérer les Éléments de Liste

Créez une fonction privée qui récupère les éléments de la liste et les retourne sous forme de Promise. Ensuite, appelez cette fonction dans la méthode render() et passez les données à votre composant React.

private async _getListItems(): Promise<any[]> {
  try {
    const items: any[] = await spfi().web.lists.getByTitle('YourListName').items();
    return items;
  } catch (error) {
    console.error('Erreur lors de la récupération des éléments de la liste : ', error);
    return [];
  }
}

public async render(): Promise<void> {
  const items: any[] = await this._getListItems();

  const element: React.ReactElement<IPnPGetListItemsProps> = React.createElement(
    PnPGetListItems,
    {
      items: items // Transmission des éléments de la liste au composant React
    }
  );

  ReactDom.render(element, this.domElement);
}

Dans ce code :

• Remplacez 'YourListName' par le nom réel de votre liste SharePoint.
• La fonction _getListItems() récupère les éléments de la liste, et render() les transmet sous forme de props au composant React PnPGetListItems.

Étape 3 : Affichage des Éléments de Liste avec React

Maintenant que nous passons les éléments de la liste au fichier .tsx, voyons comment les afficher dans le composant React.

1. Définir les Props pour le Composant

Dans le fichier PnPGetListItems.tsx, définissez une interface pour les props qui contiendront les éléments de la liste.

export interface IPnPGetListItemsProps {
  items: any[];
}

2. Afficher les Éléments de Liste

Ensuite, écrivez la logique pour afficher les éléments de la liste. Dans cet exemple, nous allons les afficher dans un tableau HTML.

import * as React from 'react';
import { IPnPGetListItemsProps } from './IPnPGetListItemsProps';

const PnPGetListItems: React.FC<IPnPGetListItemsProps> = (props) => {
  return (
    <div>
      <h2>Éléments de la Liste SharePoint</h2>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          {props.items.map((item) => (
            <tr key={item.Id}>
              <td>{item.Id}</td>
              <td>{item.Title}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default PnPGetListItems;

Dans ce composant :

• Les props.items sont affichés dans un tableau HTML.
• Chaque élément de la liste est représenté par une ligne affichant son ID et son Title.

Conseils de Débogage : Vérification de l’État et des Props

Pour vous assurer que les éléments de la liste sont correctement passés, vous pouvez ajouter des déclarations console.log dans le composant pour vérifier la valeur de props.items.

console.log(props.items);

Cela vous aidera à vérifier si les données sont correctement passées et mappées dans le composant.

Test de la Web Part

Après avoir complété la configuration, exécutez la commande suivante pour servir votre web part et la tester dans le SharePoint Workbench.

gulp serve

Lorsque vous ouvrez le SharePoint Workbench, vous devriez voir votre web part et les éléments de votre liste affichés à l’écran sous forme de tableau.

Conclusion

Dans ce guide, nous avons construit une web part SPFx qui récupère les éléments d’une liste SharePoint à l’aide de PnPjs et les affiche dans un composant React. En transmettant les éléments de la liste du fichier .ts au composant .tsx via des props, vous pouvez garantir un flux de données fluide et un rendu correct à l’écran.

Si vous rencontrez encore des erreurs undefined ou des problèmes d’affichage de la liste, vérifiez les points suivants :

• Assurez-vous que le nom de la liste est correct.
• Utilisez console.log pour déboguer les props et l’état.

Ce guide devrait vous permettre de résoudre les problèmes que vous rencontrez et de créer une web part fonctionnelle pour afficher les éléments de vos listes SharePoint en utilisant Fluent UI ou tout autre framework de votre choix.