Entwicklung eines SharePoint-Telefonbuch-Webparts

Wir haben vor kurzem eine neue Anfrage von einem Kunden für ein SharePoint Telefonbuch bekommen. Der Kunde möchte damit gerne die Benutzer von Active-Directory-Gruppen und Security-Gruppen anzeigen. Dabei möchte der Kunde die Informationen eines Benutzers, wie Job-Beschreibung, Telefonnummer, E-Mail-Adresse und weiteres, anzeigen. In diesem Blogbeitrag möchten wir euch daher gerne Einblicke in die Entwicklung dieses SharePoint Telefonbuchs geben.

Default SharePoint Personen Webpart vs. unser SharePoint Telefonbuch Webpart

Im SharePoint Online gibt es einen Default Personen Webpart, welcher auch Benutzerinformationen darstellen kann. Der Kunde müsste damit allerdings jeden Benutzer manuell hinzufügen. Auch wenn sich die Benutzer einer Gruppe ändern, muss dies manuell nachgezogen werden. Um den Aufwand hier so gering wie möglich zu gestalten, hatte der Kunde die Anforderung, alle Benutzer einer konfigurierten Active-Directory-Gruppe oder Security-Gruppen automatisch anzuzeigen.

Wir haben das SharePoint Telefonbuch mittels eines SPFx-Webparts umgesetzt. Ein Admin kann die Gruppen in den Webpart-Properties konfigurieren.

Wir lesen die Benutzerinformationen über die Graph API aus und zeigen diese in unserem Webpart an. Beim Hovern eines Benutzers, zeigt die Komponente dessen Informationen in einem Popup an. Diese Funktionalität ist dieselbe wie auch beim Default SharePoint Personen Webpart.

Benutzer Sortierung per Drag&Drop

Eine weitere Anforderung des Kunden an das SharePoint Telefonbuch war die Sortierung der Benutzer innerhalb einer Gruppe. Diese Sortierung haben wir mittels einer Drag&Drop Funktionalität umgesetzt. Befindet sich die Seite im Bearbeitungsmodus wird das Drag&Drop der Benutzer aktiv. Der Admin hat dann die Möglichkeit, die Benutzer in der gewünschten Reihenfolge zu sortieren.

Wir speichern uns die Reihenfolge der Benutzer der Gruppen in einer Konfigurationsdatei am SharePoint ab. Beim Laden der Seite lesen wir die Reihenfolge der Benutzer aus der Konfigurationsdatei aus und sortieren die Benutzer danach.

{
  "groups": [
    {
      "title": "Test",
      "orderedUserIds": [
        "flo@openinnovationhub.onmicrosoft.com",
        "verena@openinnovationhub.onmicrosoft.com",
        "josef@openinnovationhub.onmicrosoft.com",
        "cerima@openinnovationhub.onmicrosoft.com"
      ]
    }
  ]
}