So Zeigen Sie Die Elemente Einer SharePoint-Liste In Einer Webpart Mit Fluent UI An

Wenn Sie Schwierigkeiten haben, die Elemente einer SharePoint-Liste in einer Webpart des SharePoint Frameworks (SPFx) mit React und Fluent UI anzuzeigen, hilft Ihnen diese Schritt-für-Schritt-Anleitung, eine funktionierende Lösung zu erstellen. Wenn Sie Fehler wie undefined erhalten oder wenn die Listenelemente nicht korrekt an Ihre .tsx-Komponente übergeben werden, wird Sie dieser Artikel durch den Aufbau einer funktionierenden Lösung führen.

Einleitung

In diesem Artikel zeige ich Ihnen, wie Sie:

1. Die SPFx-Webpart einrichten.
2. Die Elemente einer SharePoint-Liste mit PnPjs in Ihrer .ts-Datei abrufen.
3. Diese Listenelemente als Props an die .tsx-Komponente übergeben und sie mit React anzeigen.

Schritt 1: Die SPFx-Webpart Einrichten

Zuerst erstellen wir eine grundlegende SPFx-Webpart mit dem Yeoman-Generator und installieren PnPjs, um die Operationen mit den Listen zu erleichtern.

1. Ein Neues SPFx-Projekt Erstellen

Öffnen Sie Ihr Terminal und erstellen Sie ein neues SPFx-Projekt mit Yeoman. Wählen Sie React als Framework aus, wenn Sie dazu aufgefordert werden.

yo @microsoft/sharepoint

Stellen Sie sicher, dass Sie die Umgebung für React einrichten.

2. PnPjs Installieren

PnPjs ist eine leistungsstarke Bibliothek, die die Arbeit mit SharePoint vereinfacht. Wir werden sie verwenden, um die Elemente einer SharePoint-Liste abzurufen.

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

Schritt 2: Die Listenelemente In Der .ts-Datei Abrufen

Als Nächstes konfigurieren wir die Haupt-TypeScript-Datei (WebPart.ts), um die Elemente einer SharePoint-Liste abzurufen und sie an die React-Komponente zu übergeben.

1. Die Notwendigen Bibliotheken Importieren

Importieren Sie in Ihrer Datei WebPart.ts die erforderlichen Bibliotheken für PnPjs und 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. PnPjs In onInit() Initialisieren

Initialisieren Sie PnPjs im onInit()-Methode, damit Sie es verwenden können, um die Listenelemente abzurufen.

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

3. Eine Funktion Zum Abrufen Der Listenelemente Erstellen

Erstellen Sie eine private Funktion, die die Listenelemente abruft und sie als Promise zurückgibt. Rufen Sie diese Funktion dann in der Methode render() auf und übergeben Sie die Daten an die React-Komponente.

private async _getListItems(): Promise<any[]> {
  try {
    const items: any[] = await spfi().web.lists.getByTitle('YourListName').items();
    return items;
  } catch (error) {
    console.error('Fehler beim Abrufen der Listenelemente: ', error);
    return [];
  }
}

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

  const element: React.ReactElement<IPnPGetListItemsProps> = React.createElement(
    PnPGetListItems,
    {
      items: items // Übergeben Sie die Listenelemente an die React-Komponente
    }
  );

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

In diesem Code:

• Ersetzen Sie 'YourListName' durch den tatsächlichen Namen Ihrer SharePoint-Liste.
• Die Funktion _getListItems() ruft die Listenelemente ab, und render() übergibt sie als Props an die React-Komponente PnPGetListItems.

Schritt 3: Die Listenelemente Mit React Anzeigen

Jetzt, da wir die Listenelemente an die .tsx-Datei übergeben, sehen wir uns an, wie wir sie im React-Komponenten anzeigen können.

1. Die Props Für Die Komponente Definieren

Definieren Sie in der Datei PnPGetListItems.tsx eine Schnittstelle für die Props, die die Listenelemente enthalten.

export interface IPnPGetListItemsProps {
  items: any[];
}

2. Die Listenelemente Anzeigen

Schreiben Sie nun die Logik, um die Listenelemente anzuzeigen. In diesem Beispiel zeigen wir sie in einer HTML-Tabelle an.

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

const PnPGetListItems: React.FC<IPnPGetListItemsProps> = (props) => {
  return (
    <div>
      <h2>Elemente der SharePoint-Liste</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;

In dieser Komponente:

• Die items werden in einer HTML-Tabelle angezeigt.
• Jedes Listenelement wird als Zeile dargestellt, die seine ID und Title anzeigt.

Tipps zur Fehlersuche: Überprüfung von State und Props

Um sicherzustellen, dass die Listenelemente korrekt übergeben werden, können Sie console.log-Anweisungen in der Komponente hinzufügen, um den Wert von props.items zu überprüfen.

console.log(props.items);

Dies hilft Ihnen, zu überprüfen, ob die Daten korrekt übergeben und im Komponenten gemappt werden.

Testen der Webpart

Nachdem Sie die Konfiguration abgeschlossen haben, führen Sie den folgenden Befehl aus, um Ihre Webpart zu starten und im SharePoint-Workbench zu testen.

gulp serve

Wenn Sie das SharePoint-Workbench öffnen, sollten Sie Ihre Webpart sehen und die Elemente Ihrer Liste sollten in Tabellenform angezeigt werden.

Fazit

In diesem Artikel haben wir eine SPFx-Webpart erstellt, die die Elemente einer SharePoint-Liste mit PnPjs abruft und sie in einer React-Komponente anzeigt. Indem wir die Listenelemente von der .ts-Datei an die .tsx-Komponente über Props übergeben, können Sie einen reibungslosen Datenfluss und eine korrekte Anzeige auf dem Bildschirm gewährleisten.

Wenn Sie weiterhin auf undefined-Fehler oder Probleme bei der Anzeige der Liste stoßen, überprüfen Sie Folgendes:

• Stellen Sie sicher, dass der Listenname korrekt ist.
• Verwenden Sie console.log, um Props und State zu debuggen.

Dieser Leitfaden sollte Ihnen helfen, die Probleme zu beheben, auf die Sie gestoßen sind, und eine funktionierende Webpart zu erstellen, um die Elemente Ihrer SharePoint-Listen mithilfe von Fluent UI oder einem anderen Framework Ihrer Wahl anzuzeigen.