Pro-Tipp: So richten Sie eine personalisierte Ansprache im Headerbanner auf Ihrer SharePoint Communication Site ein

In der heutigen digitalen Arbeitswelt sind maßgeschneiderte Erlebnisse der Schlüssel zu höherem Engagement und effektiverer Kommunikation. Dies gilt insbesondere für die interne Kommunikation. Stellen Sie sich vor, jeder Mitarbeiter würde beim Besuch Ihrer SharePoint Communication Site mit einer personalisierten Botschaft begrüßt. Das schafft nicht nur eine freundlichere Atmosphäre, sondern stärkt auch das Zugehörigkeitsgefühl und die Bindung an das Unternehmen. Dieser Artikel enthüllt Ihnen einen Pro-Tipp, wie Sie genau das erreichen können: eine dynamische, personalisierte Ansprache im Headerbanner Ihrer SharePoint Communication Site.

Warum Personalisierung in der internen Kommunikation so entscheidend ist

Eine generische Willkommensnachricht, die für jeden gleich ist, mag funktional sein, aber sie berührt nicht. Eine personalisierte Ansprache hingegen vermittelt Wertschätzung und Aufmerksamkeit. Hier sind die Hauptgründe, warum Sie darüber nachdenken sollten, Ihre SharePoint-Seiten persönlicher zu gestalten:

• Erhöhtes Engagement: Wenn sich Benutzer direkt angesprochen fühlen, sind sie eher geneigt, sich mit dem Inhalt der Website auseinanderzusetzen. Eine einfache Begrüßung wie „Guten Morgen, [Name des Benutzers]!” kann die Aufmerksamkeit sofort fesseln.
• Stärkung des Zugehörigkeitsgefühls: In großen Organisationen kann es leicht passieren, dass sich Mitarbeiter als bloße Nummern fühlen. Eine personalisierte Begrüßung erinnert jeden Einzelnen daran, dass er Teil eines Ganzen ist und wertgeschätzt wird.
• Verbesserte Benutzererfahrung (UX): Eine Website, die sich „kennt”, bietet ein intuitiveres und angenehmeres Erlebnis. Dies führt zu einer höheren Akzeptanz der Kommunikationsplattform.
• Förderung einer positiven Unternehmenskultur: Kleine Gesten haben oft eine große Wirkung. Die proaktive Personalisierung signalisiert eine mitarbeiterzentrierte Kultur, die Wert auf Details und das Wohlbefinden ihrer Teammitglieder legt.
• Bessere Informationsaufnahme: Eine entspannte und freundliche Umgebung fördert die Konzentration. Wer sich wohlfühlt, nimmt Informationen besser auf und verarbeitet sie effektiver.

Die Herausforderung: SharePoint Out-of-the-Box

Standardmäßig bietet SharePoint moderne Communication Sites hervorragende Möglichkeiten zur Inhaltserstellung, aber die direkte Implementierung einer dynamischen, personalisierten Ansprache im festen Headerbereich ist nicht vorgesehen. Sie können zwar Webparts zu Seiten hinzufügen, diese sind jedoch Teil des Seiteninhalts und nicht des globalen Headers, der über alle Seiten hinweg konsistent bleibt. Genau hier kommt der „Pro-Tipp” ins Spiel: Wir nutzen das SharePoint Framework (SPFx), um diese Lücke zu schließen.

Was ist SPFx und warum ist es die beste Lösung?

Das SharePoint Framework (SPFx) ist ein Entwicklungsmodell für die Erstellung von clientseitigen Webparts und Erweiterungen, die auf modernen SharePoint-Seiten laufen. Es ermöglicht Entwicklern, robuste, performante und sichere Anpassungen vorzunehmen, die nahtlos in die moderne SharePoint-Oberfläche integriert sind. Im Gegensatz zu älteren Anpassungsmethoden ist SPFx zukunftssicher, unterstützt moderne Web-Technologien (wie React, Angular oder einfaches JavaScript) und wird von Microsoft aktiv weiterentwickelt.

Für unseren Anwendungsfall, eine personalisierte Begrüßung im Headerbanner, verwenden wir eine spezielle Art von SPFx-Erweiterung: den Application Customizer. Dieser ermöglicht es uns, Skripte auszuführen und HTML-Elemente in bestimmte vordefinierte Platzhalterbereiche (wie den oberen oder unteren Bereich einer Seite) einzufügen, noch bevor der Seiteninhalt geladen wird. Dies macht ihn perfekt, um eine persistente und thematisch angepasste Grußbotschaft in den sichtbaren Kopfbereich Ihrer SharePoint-Website zu integrieren.

Schritt-für-Schritt-Anleitung: Personalisierte Ansprache mit SPFx Application Customizer

Die Implementierung erfordert einige Entwicklungs- und administrative Schritte. Keine Sorge, wir führen Sie detailliert durch den Prozess.

Schritt 1: Ihre Entwicklungsumgebung einrichten

Bevor Sie loslegen können, benötigen Sie eine funktionierende SPFx-Entwicklungsumgebung. Falls Sie diese bereits haben, können Sie diesen Schritt überspringen.

1. Node.js installieren: SPFx basiert auf Node.js. Achten Sie darauf, eine von Microsoft unterstützte Version zu installieren (prüfen Sie die offizielle SPFx-Dokumentation für die aktuellsten Kompatibilitätslisten).
2. npm installieren: Normalerweise wird npm (Node Package Manager) zusammen mit Node.js installiert.
3. Yeoman und Gulp installieren: Diese globalen Pakete sind essenziell. Yeoman generiert das Grundgerüst Ihres SPFx-Projekts, Gulp automatisiert Bauaufgaben. Öffnen Sie ein Terminal oder eine Eingabeaufforderung und führen Sie aus:
   npm install -g yo gulp
4. SharePoint Yeoman Generator installieren: Dieser Generator ist spezifisch für SPFx-Projekte:
   npm install -g @microsoft/generator-sharepoint
5. Visual Studio Code (VS Code) installieren: Dies ist der empfohlene Code-Editor für SPFx-Entwicklung und bietet hervorragende TypeScript-Unterstützung.

Stellen Sie sicher, dass alle Tools korrekt installiert sind, indem Sie ihre Versionen über die Kommandozeile überprüfen (z.B. node -v, npm -v, yo -v).

Schritt 2: Ein neues SPFx Application Customizer Projekt erstellen

Navigieren Sie in Ihrem Terminal zu einem leeren Ordner, in dem Sie Ihr Projekt speichern möchten, und führen Sie dann den Yeoman Generator aus:

yo @microsoft/sharepoint

Der Generator wird Ihnen eine Reihe von Fragen stellen. Antworten Sie wie folgt (Beispielwerte):

• Solution name: PersonalizedHeaderGreeting
• Baseline packages: SharePoint Online only (latest)
• Client-side component: Extension
• Extension type: Application Customizer
• Application Customizer name: GreetingCustomizer
• Template: No JavaScript framework (oder React, wenn Sie React für komplexere Logik verwenden möchten; für eine einfache Begrüßung reicht „No JavaScript framework”)

Der Generator erstellt nun die Projektstruktur und installiert alle Abhängigkeiten. Dies kann einige Minuten dauern.

Schritt 3: Die Logik des Application Customizers entwickeln

Öffnen Sie das Projekt in VS Code (code . im Projektordner). Die Hauptlogik finden Sie in src/extensions/greetingCustomizer/GreetingCustomizerApplicationCustomizer.ts.

Wir müssen zwei Hauptaufgaben erledigen:

1. Benutzerinformationen abrufen: Den Anzeigenamen des aktuellen Benutzers erhalten.
2. Begrüßung generieren und anzeigen: Eine zeitabhängige Begrüßung erstellen und in den oberen Platzhalter der Seite injizieren.

Fügen Sie in der onInit()-Methode Ihres Application Customizers den folgenden Code ein. Dieser Code identifiziert den oberen Platzhalter und injiziert unser personalisiertes HTML-Element.

import { override } from '@microsoft/utilities';
import {
  BaseApplicationCustomizer,
  PlaceholderContent,
  PlaceholderName
} from '@microsoft/sp-application-base';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './GreetingCustomizer.module.scss'; // Für benutzerdefiniertes Styling

export interface IGreetingCustomizerApplicationCustomizerProperties {
  // Keine Konfigurationseigenschaften benötigt
}

export default class GreetingCustomizerApplicationCustomizer
  extends BaseApplicationCustomizer<IGreetingCustomizerApplicationCustomizerProperties> {

  private _topPlaceholder: PlaceholderContent | undefined;

  public onInit(): Promise<void> {
    this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
    return Promise.resolve();
  }

  private _renderPlaceHolders(): void {
    if (!this._topPlaceholder) {
      this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
        PlaceholderName.Top,
        { onDispose: this._onDispose }
      );

      // Prüfen, ob der Platzhalter existiert
      if (!this._topPlaceholder) {
        console.error("The 'Top' placeholder was not found.");
        return;
      }

      const userName: string = this.context.pageContext.user.displayName;
      const currentHour: number = new Date().getHours();
      let greetingMessage: string;

      if (currentHour < 12) {
        greetingMessage = "Guten Morgen";
      } else if (currentHour < 18) {
        greetingMessage = "Guten Tag";
      } else {
        greetingMessage = "Guten Abend";
      }

      if (this._topPlaceholder.domElement) {
        this._topPlaceholder.domElement.innerHTML = `
          <div class="${styles.app}">
            <div class="${styles.top}">
              <div class="${styles.greetingText}">
                <span>${escape(greetingMessage)}, ${escape(userName)}!</span>
              </div>
            </div>
          </div>`;
      }
    }
  }

  private _onDispose(): void {
    console.log('[GreetingCustomizerApplicationCustomizer._onDispose] Disposed custom top placeholder.');
  }
}

Wichtiger Hinweis zum Styling: Der Code referenziert styles aus GreetingCustomizer.module.scss. Erstellen Sie diese Datei im selben Ordner wie Ihre TS-Datei, falls sie nicht schon vorhanden ist (oder passen Sie den Import an). Hier ein Beispiel-SCSS, um die Begrüßung visuell ansprechend zu gestalten und in den Header zu integrieren:

.app {
  .top {
    position: relative; /* Oder 'fixed'/'sticky' je nach gewünschter Position */
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--themePrimary, #0078d4); /* Passt sich SharePoint-Design an */
    color: var(--white, #ffffff);
    padding: 10px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
    font-size: 1.2em;
    z-index: 100; /* Stellt sicher, dass es über anderem Inhalt liegt */

    .greetingText {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
  }
}

Passen Sie die Stile an das Erscheinungsbild Ihrer SharePoint Communication Site an, um eine nahtlose Integration zu gewährleisten.

Schritt 4: Packen und Bereitstellen der Lösung

Sobald Ihr Code fertig ist, müssen Sie die Lösung packen und in Ihrem SharePoint-Mandanten bereitstellen.

1. Bundle und Package erstellen: Führen Sie im Terminal in Ihrem Projektordner folgende Befehle aus:
   • gulp bundle --hdr (Für die Erstellung des JavaScript-Bundles im Debug-Modus. Entfernen Sie --hdr für den Release-Modus.)
   • gulp package-solution --hdr (Erstellt die .sppkg-Datei im Ordner sharepoint/solution.)
2. Deployment im SharePoint App Catalog:
   • Navigieren Sie zu Ihrem SharePoint App Catalog (normalerweise https://[IhrMandant].sharepoint.com/sites/AppCatalog).
   • Laden Sie die generierte .sppkg-Datei hoch.
   • Aktivieren Sie im Dialogfeld die Option „Make this solution available to all sites in the organization” (Lösung für alle Websites in der Organisation verfügbar machen), wenn Sie die Begrüßung auf allen Ihren Communication Sites sehen möchten. Bestätigen Sie die Bereitstellung.
3. Application Customizer auf Ihrer Site aktivieren:

   Dies ist ein kritischer Schritt. Der Application Customizer wird erst ausgeführt, wenn er auf einer Site oder mandantenweit aktiviert ist. Am einfachsten geht dies mit PnP PowerShell.

   Installieren Sie PnP PowerShell, falls noch nicht geschehen: Install-Module PnP.PowerShell.

   Verbinden Sie sich mit Ihrer Site: Connect-PnPOnline -Url https://[IhrMandant].sharepoint.com/sites/[IhreCommunicationSite] -Interactive

   Fügen Sie den Application Customizer als benutzerdefinierte Aktion hinzu. Sie benötigen die ClientSideComponentId aus der manifest.json Ihres Projekts (zu finden unter src/extensions/greetingCustomizer/GreetingCustomizerApplicationCustomizer.manifest.json, es ist der Wert für id).

   Add-PnPCustomAction -Name "PersonalizedHeaderGreeting" -Title "Personalisierte Header Begrüßung" -Location ClientSideExtension.ApplicationCustomizer -ClientSideComponentId "Ihre-ClientSideComponentId-Hier" -Scope Web

   Ersetzen Sie „Ihre-ClientSideComponentId-Hier” durch die tatsächliche ID aus Ihrer Manifest-Datei.

   Wenn Sie die Lösung mandantenweit bereitgestellt und die Option „Make this solution available to all sites…” aktiviert haben, ist dieser PowerShell-Schritt in der Regel nicht mehr nötig, da der Customizer dann auf allen modernen Seiten aktiv wird. Prüfen Sie in Ihrem App Catalog unter „API-Zugriff”, ob API-Anfragen für Graph (falls verwendet) genehmigt wurden.

Schritt 5: Testen und Verfeinern

Besuchen Sie Ihre SharePoint Communication Site und aktualisieren Sie die Seite. Sie sollten nun Ihre personalisierte Begrüßung im oberen Bereich sehen. Überprüfen Sie:

• Wird der richtige Benutzername angezeigt?
• Wechselt die Begrüßung (Morgen, Tag, Abend) korrekt?
• Passt das Styling zum Rest Ihrer Site?
• Wird die Begrüßung auf verschiedenen Seiten Ihrer Communication Site konsistent angezeigt?

Nehmen Sie bei Bedarf Anpassungen am Styling (SCSS-Datei) vor und wiederholen Sie die Schritte 4 und 5 (bundle, package, upload, falls Änderungen am Code vorgenommen wurden).

Best Practices und Überlegungen

• Leistung: Halten Sie den Code schlank und effizient, um die Ladezeiten der Seite nicht zu beeinträchtigen.
• Barrierefreiheit: Stellen Sie sicher, dass Ihre Begrüßung auch für Benutzer mit Bildschirmlesegeräten zugänglich ist. Verwenden Sie semantisches HTML.
• Sicherheit: Zeigen Sie keine sensiblen Informationen im Header an. Der Anzeigename ist in der Regel unbedenklich.
• Designkonsistenz: Passen Sie die Farben und Schriftarten an das Design Ihrer SharePoint-Site an. Nutzen Sie die Design-Token von SharePoint (var(--themePrimary) etc.) für eine nahtlose Integration.
• Fehlerbehandlung: Implementieren Sie eine einfache Fehlerbehandlung, falls beispielsweise der Benutzername nicht abgerufen werden kann.
• Zukunftssicherheit: Halten Sie Ihr SPFx-Projekt und Ihre Abhängigkeiten aktuell. Microsoft veröffentlicht regelmäßig Updates für SPFx.
• Internationalisierung: Wenn Ihr Unternehmen international agiert, sollten Sie überlegen, wie Sie die Begrüßung in verschiedenen Sprachen anbieten können (z.B. durch Abrufen der Benutzersprache und entsprechendes Umschalten der Begrüßungsnachricht).

Fazit

Die Implementierung einer personalisierten Ansprache im Headerbanner Ihrer SharePoint Communication Site mittels SPFx Application Customizer ist ein kraftvoller Weg, um die Benutzerbindung zu erhöhen und eine einladendere, effizientere Kommunikationsumgebung zu schaffen. Obwohl es einen initialen Entwicklungsaufwand erfordert, sind die Vorteile für die Benutzererfahrung und die interne Kultur immens. Mit diesem Pro-Tipp haben Sie nun die Werkzeuge an der Hand, um Ihre SharePoint-Erfahrung auf das nächste Level zu heben. Experimentieren Sie, passen Sie an und begeistern Sie Ihre Mitarbeiter mit einer persönlichen Note!

Sind Sie bereit, Ihre SharePoint Communication Sites noch ansprechender zu gestalten? Beginnen Sie noch heute mit der Personalisierung!