Verbinden mit SharePoint mithilfe des JavaScript-Objektmodells (JSOM)

2023-04-08

Beim Erstellen von SharePoint-Anpassungen, haben Sie vielleicht das SharePoint JavaScript-Objektmodell (JSOM) zur Kommunikation mit SharePoint verwendet. Dies ist nicht mehr der empfohlene Pfad (siehe Überlegungen weiter unten in diesem Artikel). Es gibt jedoch weiterhin gültige Anwendungsfälle für die Verwendung der JSOM-API, z. B. die Codemigration.

Um SharePoint JSOM in Ihrer SharePoint-Framework-Komponente zu verwenden, müssen Sie es Ihrem Projekt hinzufügen. Dies war zuvor nicht erforderlich, da es bereits auf SharePoint-Seiten zur Verwendung verfügbar war. Im SharePoint-Framework müssen Sie es explizit in Ihre Komponente laden.

Es gibt zwei Methoden, um in SharePoint-Framework auf SharePoint JSOM zu verweisen:

Deklarativ: über die Konfiguration
Imperativ: über Code

Jeder dieser Ansätze hat seine Vor- und Nachteile, die Sie unbedingt kennen sollten.

Erstellen eines neuen Projekts

Erstellen Sie in der Konsole einen neuen Ordnern für Ihr Projekt:
```
md react-sharepointlists
```
Wechseln Sie zum Projektordner:
```
cd react-sharepointlists
```
Führen Sie im Projektordner den SharePoint Framework-Yeoman-Generator aus, um ein Gerüst für ein neues SharePoint Framework-Projekt zu erstellen:
```
yo @microsoft/sharepoint
```
Wenn Sie dazu aufgefordert werden, geben Sie die folgenden Werte ein (wählen Sie für alle unten nicht aufgeführten Eingabeaufforderungen die Standardoption aus):
- Wie lautet der Name Ihrer Lösung? react-sharepointlists
- Welcher Typ von clientseitiger Komponente soll erstellt werden?: WebPart
- Wie lautet der Name des Webparts? SharePoint-Listen
- Welche Vorlage möchten Sie verwenden?: React
Öffnen Sie den Projektordner in einem Code-Editor. In diesem Artikel wird Visual Studio Code in den Schritten und Screenshots verwendet, Sie können jedoch einen beliebigen Editor verwenden.
Gehen Sie folgendermaßen vor, um das Verzeichnis in Visual Studio Code von der Konsole aus zu öffnen:
```
code .
```

Deklaratives Referenzieren von JSOM

Registrieren der SharePoint JSOM-API als externe Skripts

Beim deklarativen Verweisen auf JSOM besteht der erste Schritt darin, die SharePoint JSOM-API als externe Skripts innerhalb Ihres SharePoint Framework-Projekts zu registrieren.

Öffnen Sie im Code-Editor die Datei ./config/config.json, und fügen Sie dem Abschnitt externals Folgendes hinzu:
```
{
  // ...
  "externals": {
    "sp-init": {
      "path": "https://contoso.sharepoint.com/_layouts/15/init.js",
      "globalName": "$_global_init"
    },
    "microsoft-ajax": {
      "path": "https://contoso.sharepoint.com/_layouts/15/MicrosoftAjax.js",
      "globalName": "Sys",
      "globalDependencies": [
        "sp-init"
      ]
    },
    "sp-runtime": {
      "path": "https://contoso.sharepoint.com/_layouts/15/SP.Runtime.js",
      "globalName": "SP",
      "globalDependencies": [
        "microsoft-ajax"
      ]
    },
    "sharepoint": {
      "path": "https://contoso.sharepoint.com/_layouts/15/SP.js",
      "globalName": "SP",
      "globalDependencies": [
        "sp-runtime"
      ]
    }
  }
  // ...
}
```
Jeder Eintrag verweist auf eine andere Skriptdatei, die Ihnen zusammen die Verwendung von SharePoint JSOM in der SPFx-Komponente ermöglichen. Alle diese Skripts werden als Nicht-Modul-Skripts verteilt. Deshalb erfordert jeder Registrierungseintrag eine URL (angegeben mit der path-Eigenschaft) und den vom Skript verwendeten Namen (bereitgestellt in der globalName-Eigenschaft). Um sicherzustellen, dass diese Skripts in der richtigen Reihenfolge laden, werden die Abhängigkeiten zwischen diesen Skripts mit der globalDependencies-Eigenschaft angegeben.

In Abhängigkeit von der JSOM-Funktionalität, die Sie verwenden, müssen möglicherweise weitere Skripts hinzugefügt werden (z. B. sp.taxonomy.js).

Installieren von TypeScript-Eingaben für SharePoint JSOM

Der nächste Schritt besteht darin, TypeScript-Typdeklarationen für SharePoint JSOM zu installieren und zu konfigurieren. So profitieren Sie von den Sicherheitsfunktionen der TypeScript-Typen, wenn Sie mit SharePoint JSOM arbeiten.

Führen Sie von der Konsole ausgehend den folgenden Befehl in Ihrem Projektverzeichnis aus:
```
npm install @types/microsoft-ajax @types/sharepoint --save-dev
```
SharePoint JSOM wird nicht als Modul verteilt, Sie können es daher nicht direkt in Ihren Code importieren. Stattdessen müssen Sie die globalen TypeScript-Typdeklarationen global registrieren.

Öffnen Sie im Code-Editor die Datei ./tsconfig.json und fügen Sie in der types-Eigenschaft, hinter dem Eintrag webpack-env Verweise auf microsoft-ajax and sharepoint hinzu:

{
  "compilerOptions": {
    // ...
    "types": [
      "es6-promise",
      "es6-collections",
      "webpack-env",
      "microsoft-ajax",
      "sharepoint"
    ]
  }
}

Referenzieren von SharePoint JSOM-Skripts in einer React-Komponente

Um die SharePoint JSOM-Bibliotheken in die SPFx-Komponente zu laden, verweisen Sie auf diese im Code der Komponente. In diesem Beispiel fügen Sie die Verweise in der React-Komponente hinzu, in der SharePoint JSOM zur Kommunikation mit SharePoint verwendet wird.

Öffnen Sie im Code-Editor die Datei ./src/webparts/sharePointLists/components/SharePointLists.tsx. Fügen Sie den folgenden Code hinter der letzten import-Anweisung ein:

require('sp-init');
require('microsoft-ajax');
require('sp-runtime');
require('sharepoint');

Diese Namen entsprechen den externen Verweisen, die Sie zuvor hinzugefügt haben. Die SharePoint-Framework lädt diese Skripts aus den angegebenen URLs.

Zur Veranschaulichung, wie SharePoint JSOM zur Kommunikation mit SharePoint beiträgt, rufen Sie die Titel aller SharePoint-Listen ab, die sich auf der aktuellen Website befinden, und geben Sie sie wieder.

Hinzufügen von `siteUrl` zu React-Komponenteneigenschaften

Damit Sie sich mit SharePoint verbinden können, muss die React-Komponente die URL der aktuellen Website kennen. Die URL ist im übergeordneten Webpart verfügbar und kann über ihre Eigenschaften an die Komponente übergeben werden.

Öffnen Sie im Code-Editor die Datei ./src/webparts/sharePointLists/components/ISharePointListsProps.ts , und fügen Sie die siteUrl -Eigenschaft der ISharePointListsProps Schnittstelle hinzu:
```
export interface ISharePointListsProps {
  description: string;
  siteUrl: string;
}
```

Um die URL der aktuellen Website an die Komponente zu übergeben, öffnen Sie die Datei ./src/webparts/sharePointLists/SharePointListsWebPart.ts im Code-Editor, und ändern Sie die render()-Methode in:

export default class SharePointListsWebPart extends BaseClientSideWebPart<ISharePointListsWebPartProps> {
  public render(): void {
    const element: React.ReactElement<ISharePointListsProps > = React.createElement(
      SharePointLists,
      {
        description: this.properties.description,
        siteUrl: this.context.pageContext.web.absoluteUrl
      }
    );

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

  // ...
}

Definieren des Status der React-Komponente

Die React-Komponente lädt Daten aus SharePoint, um sie für den Benutzer wiederzugeben. Der aktuelle Status der React-Komponente wird mit der state-Schnittstelle modelliert, die wir hinzufügen.

Erstellen Sie im Code-Editor im Ordner ./src/webparts/sharePointLists/components eine neue Daten namens ISharePointListsState.ts, und fügen Sie folgenden Inhalt ein:

export interface ISharePointListsState {
  listTitles: string[];
  loadingLists: boolean;
  error: string;
}

Hinzufügen des Status zur React-Komponente

Nachdem Sie die Schnittstelle definiert haben, indem Sie die Form des Komponentenstatus beschrieben haben, muss die React-Komponente als Nächstes die state-Schnittstelle verwenden.

Öffnen Sie im Code-Editor die Datei ./src/webparts/sharePointLists/components/SharePointLists.tsx. Fügen Sie unter den vorhandenen import -Anweisungen Folgendes hinzu:
```
import { ISharePointListsState } from './ISharePointListsState';
```

Im nächsten Schritt ändern Sie die Signatur der SharePointLists-Klasse in:

export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
  // ...
}

Fügen Sie in der SharePointLists-Klasse einen Konstruktor mit dem Standardstatuswert hinzu:

export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
  constructor(props?: ISharePointListsProps, context?: any) {
    super();

    this.state = {
      listTitles: [],
      loadingLists: false,
      error: null
    };
  }

  // ...
}

Herunterladen von Informationen zu SharePoint-Listen von der aktuellen Website mit JSOM

Das clientseitige Webpart, das in diesem Artikel als Beispiel verwendet wurde, lädt per Klick Informationen zu SharePoint-Listen in die aktuelle Website.

Das clientseitige SharePoint Framework-Webpart zeigt Titel von SharePoint-Listen in der aktuellen Website an

Öffnen Sie im Code-Editor die Datei ./src/webparts/sharePointLists/components/SharePointLists.tsx. Fügen Sie in der SharePointLists-Klasse eine neue Methode mit dem NamengetListsTitles() hinzu.

export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
  constructor(props?: ISharePointListsProps, context?: any) {
    super();

    this.state = {
      listTitles: [],
      loadingLists: false,
      error: null
    };

    this.getListsTitles = this.getListsTitles.bind(this);
  }

  // ...
  private getListsTitles(): void { }
}

Stellen Sie die richtigen Bereichsdefinition der Methode sicher; binden Sie sie im Konstruktor an das Webpart. Verwenden Sie in der getListsTitles()-Methode SharePoint JSOM, um die Titel der SharePoint-Listen auf die aktuelle Website zu laden:

export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
  // ...
  private getListsTitles(): void {
    this.setState({
      loadingLists: true,
      listTitles: [],
      error: null
    });

    const context: SP.ClientContext = new SP.ClientContext(this.props.siteUrl);
    const lists: SP.ListCollection = context.get_web().get_lists();
    context.load(lists, 'Include(Title)');
    context.executeQueryAsync((sender: any, args: SP.ClientRequestSucceededEventArgs): void => {
      const listEnumerator: IEnumerator<SP.List> = lists.getEnumerator();

      const titles: string[] = [];
      while (listEnumerator.moveNext()) {
        const list: SP.List = listEnumerator.get_current();
        titles.push(list.get_title());
      }

      this.setState((prevState: ISharePointListsState, props: ISharePointListsProps): ISharePointListsState => {
        prevState.listTitles = titles;
        prevState.loadingLists = false;
        return prevState;
      });
    }, (sender: any, args: SP.ClientRequestFailedEventArgs): void => {
      this.setState({
        loadingLists: false,
        listTitles: [],
        error: args.get_message()
      });
    });
  }
}

Setzen Sie zunächst den Status der Komponente zurück, um dem Benutzer mitzuteilen, dass die Komponente Informationen aus SharePoint laden wird. Verwenden Sie dann die URL der aktuellen Website, die der Komponente über ihre Eigenschaften übergeben wurde, um einen neuen SharePoint-Kontext zu instanziieren. Mit SharePoint JSOM werden Listen von der aktuellen Website geladen. Um die Leistung der Anforderung zu optimieren, geben wir an, dass nur die Title- Eigenschaft geladen werden sollte.

Im nächsten Schritt führen Sie die Abfrage durch Aufruf der executeQueryAsync()-Methode und Übergabe zweier Rückruffunktionen aus. Nach Abschluss der Abfrage durchlaufen Sie die Sammlung der abgerufenen Listen, speichern deren Titel in einem Array und aktualisieren den Status der Komponente.

Wiedergeben der Titel von SharePoint-Listen auf der aktuellen Website

Nachdem Sie die Titel von SharePoint-Listen auf die aktuelle Website geladen haben, müssen Sie sie nur noch in der Komponente wiedergeben.

Öffnen Sie im Code-Editor die Datei ./src/webparts/sharePointLists/components/SharePointLists.tsx und aktualisieren Sie die render()-Methode:

export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
  // ...
  public render(): React.ReactElement<ISharePointListsProps> {
    const titles: JSX.Element[] = this.state.listTitles.map((listTitle: string, index: number, listTitles: string[]): JSX.Element => {
      return <li key={index}>{listTitle}</li>;
    });

    return (
      <div className={styles.sharePointLists}>
        <div className={styles.container}>
          <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
            <div className="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
              <span className="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
              <p className="ms-font-l ms-fontColor-white">Customize SharePoint experiences using web parts.</p>
              <p className="ms-font-l ms-fontColor-white">{escape(this.props.description)}</p>
              <a className={styles.button} onClick={this.getListsTitles} role="button">
                <span className={styles.label}>Get lists titles</span>
              </a><br />
              {this.state.loadingLists &&
                <span>Loading lists...</span>}
              {this.state.error &&
                <span>An error has occurred while loading lists: {this.state.error}</span>}
              {this.state.error === null && titles &&
                <ul>
                  {titles}
                </ul>}
            </div>
          </div>
        </div>
      </div>
    );
  }
  // ...
}

An diesem Punkt können Sie der Seite Ihr Webpart hinzufügen und die Titel von SharePoint-Listen auf der aktuellen Website anzeigen. Führen Sie den folgenden Befehl in der Konsole aus, um zu überprüfen, ob das Projekt ordnungsgemäß funktioniert:
```
gulp serve --nobrowser
```
Da Sie SharePoint JSOM zur Kommunikation mit SharePoint verwenden, müssen Sie das Webpart mit der gehosteten SharePoint-Workbench-Version testen. (Deshalb wird der --nobrowser-Parameter angegeben, um zu verhindern, dass die lokale Workbench automatisch geladen wird).

Das deklarative Referenzieren von SharePoint JSOM-Skripts als externe Skripts ist bequem und Sie können so den Code übersichtlich halten. Ein Nachteil besteht aber darin, dass Sie absolute URLs zum Speicherort angeben müssen, aus dem SharePoint JSOM-Skripts geladen werden sollen. Wenn Sie für Entwicklung, Prüfung und Produktion separate SharePoint-Mandanten verwenden, wird zusätzliche Arbeit erforderlich, um die folgenden URLs für die verschiedenen Umgebungen zu ändern. In solchen Fällen sollten Sie imperativ mithilfe von SPComponentLoader auf JSOM verweisen, um die Skripts im Code der SPFx-Komponenten zu laden.

Imperatives Verweisen auf JSOM

Eine weitere Möglichkeit zum Laden von JavaScript-Bibliotheken in SharePoint Framework-Projekten besteht darin, SPComponentLoader zu verwenden, eine Dienstprogrammklasse, die mit dem SharePoint Framework bereitgestellt wird und Ihnen helfen soll, die Skripts und andere Ressourcen in die Komponenten zu laden. Ein Vorteil der Verwendung von SPComponentLoader gegenüber dem deklarativen Laden von Skripts ist, dass Sie serverrelative URLs verwenden können, die bequemer sind, wenn Sie mehrere SharePoint-Mandanten für die verschiedenen Phasen des Entwicklungsprozesses verwenden.

Für diesen Teil des Lernprogramms passen wir den zuvor im Abschnitt zum deklarativen Verweisen erstellten Code an.

Modul installieren @microsoft/sp-loader

SPComponentLoader wird in einem separaten Modul @microsoft/sp-loader deklariert, der in Ihrem Projekt installiert werden soll.

Führen Sie von der Konsole ausgehend den folgenden Befehl in Ihrem Projektverzeichnis aus:
```
npm install @microsoft/sp-loader --save
```

Bereinigung durch deklaratives Verweisen

Wenn Sie die Schritte in den Abschnitten weiter oben zum deklarativen Verweisen befolgt haben, müssen Sie diese Verweise entfernen.

Entfernen Sie die vorhandenen externen Skriptverweise. Öffnen Sie dazu im Code-Editor die Datei config/config.json, und entfernen Sie aus der externals-Eigenschaft alle Einträge:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
  "version": "2.0",
  "bundles": {
    "share-point-lists-web-part": {
      "components": [
        {
          "entrypoint": "./lib/webparts/sharePointLists/SharePointListsWebPart.js",
          "manifest": "./src/webparts/sharePointLists/SharePointListsWebPart.manifest.json"
        }
      ]
    }
  },
  "externals": {},
  "localizedResources": {
    "SharePointListsWebPartStrings": "lib/webparts/sharePointLists/loc/{locale}.js"
  }
}

Wenn SharePoint JSOM-Skripts nicht mehr als externe Skripts registriert sind, können Sie nicht direkt im Code darauf verweisen.

Öffnen Sie im Code-Editor die Datei ./src/webparts/sharePointLists/components/SharePointLists.tsx und entfernen Sie die require()-Anweisungen, die auf die verschiedenen SharePoint JSOM-Skripts verweisen.

Warten Sie mit dem Laden der Daten, bis die SharePoint JSOM-Skripts geladen sind

Die Hauptfunktion des clientseitigen Webparts, das wir in diesem Lernprogramm erstellen, hängt von SharePoint JSOM ab. In Abhängigkeit von verschiedenen Faktoren kann das Laden dieser Skripts etwas dauern. Beim Erstellen von SPFx-Komponenten, die SharePoint JSOM verwenden, sollten Sie dies berücksichtigen. Wenn das Webpart einer Seite hinzugefügt worden ist, sollte es dem Benutzer mitteilen, dass es seine Voraussetzungen lädt, und melden, wann es einsatzbereit ist.

Um dies zu unterstützen, erweitern Sie den Status der React-Komponente um eine zusätzliche Eigenschaft, damit Sie den Ladestatus der JSOM-Skripts verfolgen können.

Öffnen Sie im Code-Editor die Datei ./src/webparts/sharePointLists/components/ISharePointListsState.ts, und fügen Sie folgenden Code ein:
```
export interface ISharePointListsState {
  listTitles: string[];
  loadingLists: boolean;
  error: string;
  loadingScripts: boolean;
}
```

Fügen Sie die neu hinzugefügte Eigenschaft zu den Statusdefinitionen in der React-Komponente hinzu. Öffnen Sie im Code-Editor die Datei ./src/webparts/sharePointLists/components/SharePointLists.tsx. Aktualisieren Sie den Konstruktor auf den folgenden Code:

export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
  constructor(props?: ISharePointListsProps, context?: any) {
    super();

    this.state = {
      listTitles: [],
      loadingLists: false,
      error: null,
      loadingScripts: true
    };

    this.getListsTitles = this.getListsTitles.bind(this);
  }
  // ...
}

Aktualisieren Sie in der gleichen Datei die getListsTitles()-Methode auf den folgenden Code:

export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
  // ...
  private getListsTitles(): void {
    this.setState({
      loadingLists: true,
      listTitles: [],
      error: null,
      loadingScripts: false
    });

    const context: SP.ClientContext = new SP.ClientContext(this.props.siteUrl);
    const lists: SP.ListCollection = context.get_web().get_lists();
    context.load(lists, 'Include(Title)');
    context.executeQueryAsync((sender: any, args: SP.ClientRequestSucceededEventArgs): void => {
      const listEnumerator: IEnumerator<SP.List> = lists.getEnumerator();

      const titles: string[] = [];
      while (listEnumerator.moveNext()) {
        const list: SP.List = listEnumerator.get_current();
        titles.push(list.get_title());
      }

      this.setState((prevState: ISharePointListsState, props: ISharePointListsProps): ISharePointListsState => {
        prevState.listTitles = titles;
        prevState.loadingLists = false;
        return prevState;
      });
    }, (sender: any, args: SP.ClientRequestFailedEventArgs): void => {
      this.setState({
        loadingLists: false,
        listTitles: [],
        error: args.get_message(),
        loadingScripts: false
      });
    });
  }
}

Um dem Benutzer den Ladestatus der SharePoint JSOM-Skripts zu melden, aktualisieren Sie die render()-Methode auf den folgenden Code:

export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
  // ...
  public render(): React.ReactElement<ISharePointListsProps> {
    const titles: JSX.Element[] = this.state.listTitles.map((listTitle: string, index: number, listTitles: string[]): JSX.Element => {
      return <li key={index}>{listTitle}</li>;
    });

    return (
      <div className={styles.sharePointLists}>
        <div className={styles.container}>
          {this.state.loadingScripts &&
            <div className="ms-Grid" style={{ color: "#666", backgroundColor: "#f4f4f4", padding: "80px 0", alignItems: "center", boxAlign: "center" }}>
              <div className="ms-Grid-row" style={{ color: "#333" }}>
                <div className="ms-Grid-col ms-u-hiddenSm ms-u-md3"></div>
                <div className="ms-Grid-col ms-u-sm12 ms-u-md6" style={{ height: "100%", whiteSpace: "nowrap", textAlign: "center" }}>
                  <i className="ms-fontSize-su ms-Icon ms-Icon--CustomList" style={{ display: "inline-block", verticalAlign: "middle", whiteSpace: "normal" }}></i><span className="ms-fontWeight-light ms-fontSize-xxl" style={{ paddingLeft: "20px", display: "inline-block", verticalAlign: "middle", whiteSpace: "normal" }}>SharePoint lists</span>
                </div>
                <div className="ms-Grid-col ms-u-hiddenSm ms-u-md3"></div>
              </div>
              <div className="ms-Grid-row" style={{ width: "65%", verticalAlign: "middle", margin: "0 auto", textAlign: "center" }}>
                <span style={{ color: "#666", fontSize: "17px", display: "inline-block", margin: "24px 0", fontWeight: 100 }}>Loading SharePoint JSOM scripts...</span>
              </div>
              <div className="ms-Grid-row"></div>
            </div>}
          {this.state.loadingScripts === false &&
            <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
              <div className="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
                <span className="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
                <p className="ms-font-l ms-fontColor-white">Customize SharePoint experiences using web parts.</p>
                <p className="ms-font-l ms-fontColor-white">{escape(this.props.description)}</p>
                <a className={styles.button} onClick={this.getListsTitles} role="button">
                  <span className={styles.label}>Get lists titles</span>
                </a><br />
                {this.state.loadingLists &&
                  <span>Loading lists...</span>}
                {this.state.error &&
                  <span>An error has occurred while loading lists: {this.state.error}</span>}
                {this.state.error === null && titles &&
                  <ul>
                    {titles}
                  </ul>}
              </div>
            </div>
          }
        </div>
      </div>
    );
  }
  // ...
}

Wenn der Status der React-Komponente angibt, dass die SharePoint JSOM-Skripts geladen werden, wird ein Platzhalter angezeigt. Nachdem die Skripts geladen wurden, zeigt das Webpart den erwarteten Inhalt mit der Schaltfläche an, damit der Benutzer die Informationen zu SharePoint-Listen auf die aktuelle Website laden kann.

Laden der SharePoint JSOM-Skripts mit SPComponentLoader

SPFx-Komponenten sollten SharePoint JSOM-Skripts nur einmal laden. Da das Webpart in diesem Beispiel aus einer einzelnen React Komponente besteht, ist der beste Ort zum Laden von SharePoint JSOM-Skripts die Methode der React KomponentecomponentDidMount(), die nur einmal ausgeführt wird, nachdem die Komponente instanziiert wurde.

Öffnen Sie im Code-Editor die Datei ./src/webparts/sharePointLists/components/SharePointLists.tsx. Fügen Sie im oberen Bereich der Datei eine import-Anweisung hinzu, die auf SPComponentLoader verweist. Fügen Sie die SharePointLists-Klasse der componentDidMount()-Methode hinzu.

import { SPComponentLoader } from '@microsoft/sp-loader';

export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
  // ...
  public componentDidMount(): void {
    SPComponentLoader.loadScript('/_layouts/15/init.js', {
      globalExportsName: '$_global_init'
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/MicrosoftAjax.js', {
        globalExportsName: 'Sys'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/SP.Runtime.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/SP.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): void => {
      this.setState((prevState: ISharePointListsState, props: ISharePointListsProps): ISharePointListsState => {
        prevState.loadingScripts = false;
        return prevState;
      });
    });
  }
  // ...
}

Unter Verwendung einer Reihe von verketteten Zusagen laden wir die verschiedenen Skripts, die zusammen die Verwendung von SharePoint JSOM in Ihrer clientseitigen SharePoint Framework-Webpart ermöglichen. Dank Verwendung des SPComponentLoader können Sie serverrelative URLs verwenden, die Skripts aus dem aktuellen SharePoint-Mandanten laden. Nachdem alle Skripts geladen wurden, aktualisieren Sie den Status der React-Komponente, indem Sie bestätigen, dass alle Voraussetzungen geladen wurden und das Webpart einsatzbereit ist.
Bestätigen Sie, dass das Webpart wie erwartet funktioniert, indem Sie auf der Konsole den folgenden Befehl ausführen:
```
gulp serve --nobrowser
```
Wie zuvor sollte das Webpart die Titel der SharePoint-Listen auf der aktuellen Website anzeigen.

Obwohl die Verwendung des SPComponentLoader einigen Aufwand erfordert, ermöglicht er Ihnen, serverrelative URLs zu verwenden, die in Szenarien nützlich sind, in denen Sie unterschiedliche Mandanten für Entwicklung, Prüfung und Produktion einsetzen.

Überlegungen

In der Vergangenheit haben Sie vielleicht beim Erstellen von clientseitigen Anpassungen auf SharePoint-Plattformen SharePoint JSOM zur Kommunikation mit SharePoint verwendet. Jetzt ist die empfohlene Vorgehensweise aber entweder die Verwendung der SharePoint REST-API oder der PnP JavaScript-Core-Bibliothek.

Als sharePoint JSOM eingeführt wurde, war dies der erste Schritt zur Unterstützung clientseitiger Lösungen in SharePoint. Sie wird jedoch nicht mehr aktiv verwaltet und bietet möglicherweise nicht mehr Zugriff auf alle Funktionen, die über die REST-API verfügbar sind. Unabhängig davon, ob Sie die SharePoint-REST-API direkt oder über die PnP-JavaScript-Kernbibliothek verwenden, können Sie Zusagen verwenden, die das Schreiben von asynchronem Code erheblich vereinfachen (ein häufiges Problem bei der Verwendung von JSOM).

Es gibt zwar immer noch Fälle, in denen SharePoint JSOM Zugriff auf Daten und Methoden bietet, die noch nicht von der SharePoint-REST-API abgedeckt sind, wenn möglich sollte aber die REST-API verwendet werden.

Wenn Sie über vorhandene Anpassungen mit SharePoint JSOM verfügen und in Erwägung ziehen, diese zum SharePoint-Framework zu migrieren, sollten Sie in diesem Artikel die erforderlichen Informationen zur Verwendung von SharePoint JSOM in SharePoint-Framework Lösungen bereitstellen. Längerfristig sollten Sie jedoch in Betracht ziehen, die Art der Kommunikation mit SharePoint so zu ändern, dass entweder die SharePoint-REST-API direkt oder über die PnP-JavaScript-Kernbibliothek verwendet wird.

Freigeben über