© GoodStudio/Shutterstock.com
Kolumne: SharePoint ganz praktisch

SharePoint und das Graph API – Fortsetzung


In der vorherigen Ausgabe dieser Kolumne wurde der Microsoft Graph im Detail vorgestellt. Im Schwerpunkt wurden die Möglichkeiten der Schnittstelle erläutert. Diesmal geht es um die konkrete Verwendung des Graph API innerhalb einer SharePoint-Lösung.

Die meisten integrierten eigenen SharePoint-Lösungen verwenden in irgendeiner Art und Weise spezielle SharePoint-Funktionen. Der Zugriff auf SharePoint-Daten und -Funktionen kann auf unterschiedlichen Wegen erfolgen. Setzt man Lösungen für On-Premises-Installationen um, steht auch die Option der Verwendung des serverseitigen API zur Verfügung. Bewegt man sich hingegen im reinen SharePoint-Online-Bereich, fällt diese Option weg. Hier reduzieren sich die Möglichkeiten auf die verschiedenen clientseitigen Schnittstellen, wie zum Beispiel CSOM oder JSOM. Weiterhin können REST-basierte Schnittstellen verwendet werden. Eine davon ist das Graph API, wie im letzten Teil bereits im Detail dargestellt wurde. Nachfolgend wird ein clientseitiges SharePoint Webpart auf Basis des SharePoint Frameworks realisiert, das das Graph API verwendet. Das nachfolgende Beispiel setzt ein Webpart um, das die vorhandenen SharePoint-Listen aus einem SharePoint-Web ausliest und in einer Auswahlliste anzeigt. Nach Auswahl einer Liste werden einige Daten aus der Liste geladen und angezeigt. Neben der reinen Implementierung werden zum Ende auch die verschiedenen notwendigen Berechtigungen auf das Graph API bzw. die konkreten Endpunkte des Zielsystems erläutert.

Anlage des Projekts

Im ersten Schritt ist ein neues Projekt anzulegen. Da in diesem Beispiel ein clientseitiges Webpart basierend auf dem SPFx realisiert werden soll, geschieht die Anlage über die Eingabeaufforderung. Für die Anlage des Grundgerüsts kommt der Yeoman-Generator, der schon in der vorherigen Ausgabe dieser Kolumne erläutert wurde, zum Einsatz. Vor der Anlage ist es sinnvoll, die SharePoint-Generator-Vorlage per npm install -g @microsoft/generator-sharepoint zu aktualisieren. Es muss mindestens die Version 1.4.1 oder höher installiert sein. Für die Neuanlage ist im Vorfeld ein neues Dateiverzeichnis anzulegen. Anschließend wechseln wir in das neue Verzeichnis und starten die Projektanlage über den Yeoman-Generator mit dem Befehl yo @microsoft/sharepoint. Daraufhin fragt der Generator einige Konfigurationswerte ab, die wie folgt lauten und beantwortet werden können (Abb. 1):

  • ein Name für die Lösung: z. B. using-graph-api

  • die Zielplattform für die Lösung: SharePoint Online only (latest)

  • Ablageort der Lösung: aktueller Ordner

  • Bereitstellung der Lösung global auf den Zielmandanten durch Tenant-Admin: nein

  • Lösungstyp: Webparts

  • Name des Webparts: z. B. GraphConsumer

  • Beschreibung: Verwendung des Graph API innerhalb eines Webparts

  • Entwicklungs-Framework: React

zhou_graphapi2_1.tif_fmt1.jpgAbb. 1: Anlage des Projekts mit Yeoman und der SharePoint-Vorlage

Danach starten wir die gewünschte Entwicklungsumgebung und öffnen das Verzeichnis. In Visual Studio ergibt sich dann die in Abbildung 2 zu sehende Projektstruktur. Im ersten Schritt wird die eigentliche Webpart-Komponente implementiert. Die dafür anzupassende Codedatei GraphApiDemo.tsx befindet sich im Unterordner component. Der gesamte Quellcode ist in Listing 1 zu sehen.

zhou_graphapi2_2.tif_fmt1.jpgAbb. 2: Projektansicht des erstellten Projekts

Listing 1: React-Komponente

import * as React from 'react'; import styles from './GraphApiDemo.module.scss'; import * as strings from 'GraphApiDemoWebPartStrings'; import { IGraphApiDemoProps } from './IGraphApiDemoProps'; import { IGraphApiDemoState } from './IGraphApiDemoState'; import { IListItem } from './IListItem'; import { DetailsList, DetailsListLayoutMode, CheckboxVisibility, SelectionMode, Dropdown, IDropdownOption, IDropdownProps } from 'office-ui-fabric-react'; import { AadHttpClient, MSGraphClient } from "@microsoft/sp-http"; let _listColumns = [ { key: 'title', name: 'Title', fieldName: 'title', minWidth: 50, maxWidth: 100, isResizable: true }, { key: 'id', name: 'ID', fieldName: 'id', minWidth: 50, maxWidth: 100, isResizable: true } ]; export default class GraphApiDemo extends React.Component<IGraphApiDemoProps, IGraphApiDemoState> { private ddChooseList: { key: string, text: string, data: any }[] = []; constructor(props: IGraphApiDemoProps, state: I...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang