Übung: Erweitern von Microsoft Viva Connections mit Erweiterungen für adaptive Karten

12 Minuten

In dieser Übung erstellen Sie eine Erweiterung für adaptive Karten (Adaptive Card Extension, ACE), um die neueste wichtige Unternehmensankündigung anzuzeigen. Sie fügen den ACE dem Dashboard hinzu, sodass es auf der Viva Connections-Desktop- und mobilen Oberfläche angezeigt wird.

Erstellen einer neuen Lösung

Beginnen Sie damit, dass Sie mit dem Yeoman-Generator des SharePoint-Frameworks eine neue Lösung erstellen.

Erstellen Sie einen Ordner namens spfx-company-announcements-ace für Ihr Projekt.
Ändern Sie in einem Terminal das Arbeitsverzeichnis in spfx-company-announcements-ace.
Führen Sie als Nächstes den Befehl yo @microsoft/sharepoint aus, um mit dem Erstellen eines Gerüsts für eine neue Lösung zu beginnen.
Eingabeaufforderungen des Antwort-Generators:
1. Wie lautet der Name Ihrer Lösung? spfx-company-announcements-ace
2. Nur SharePoint Online (neueste Version) wird unterstützt. Verwenden Sie für frühere Versionen von SharePoint (2016 und 2019) die Version 1.12.1 des Generators. Nur SharePoint Online (aktuellste)
3. Wohin möchten Sie die Daten verschieben? Verwenden Sie den aktuellen Ordner.
4. Möchten Sie den Mandantenadministratoren erlauben, festzulegen, ob die Lösungen unmittelbar für alle Websites bereitgestellt werden, ohne die Bereitstellung von Features oder das Hinzufügen von Apps zu Websites? Nein
5. Benötigen die Komponenten in der Lösung Berechtigungen für den Zugriff auf eindeutige, nicht für andere Komponenten des Mandanten freigegebene Web-APIs? Nein
6. Welchen Typ von clientseitiger Komponente möchten Sie erstellen? Erweiterung für adaptive Karten
7. Welche Vorlage möchten Sie verwenden? Standardkartenvorlage
8. Wie lautet der Name Ihrer Erweiterung für adaptive Karten? Wichtige Ankündigungen
9. Wie lautet die Beschreibung Ihres Webparts? Zeigt wichtige Unternehmensankündigungen an.
Warten Sie, bis die Erstellung des Projekts abgeschlossen wurde. Es kann ein paar Minuten dauern.

Tipp

Beim Erstellen des Projekts werden wahrscheinlich einige Warnungen angezeigt. Diese können Sie unbesorgt ignorieren.

Installieren des Entwicklungszertifikats

SharePoint Framework verwendet eine workbench, die in SharePoint Online gehostet wird, damit Sie Ihren Code testen können, bevor Sie ihn in Viva Connections bereitstellen. Wenn Sie Ihren Code testen, starten Sie einen lokalen Webserver mit Gulp. Die SharePoint-Framework-Workbench lädt dann Dateien von Ihrem lokalen Server und ermöglicht ihnen, diese zu testen. Damit die Workbench Dateien von Ihrem lokalen Entwicklungsserver laden kann, müssen Sie dem von SharePoint-Framework bereitgestellten Entwicklungszertifikat vertrauen.

Wichtig

Sie müssen das Entwicklungszertifikat nur einmal auf Ihrem Computer installieren. Wenn Sie ein neues Projekt erstellen, verwenden SharePoint-Framework das zuvor installierte Zertifikat. Wenn Sie dies bereits getan haben, können Sie diese Schritte überspringen.

Öffnen Sie ein Terminal.
Ändern Sie das Arbeitsverzeichnisses in Ihren Projektordner.
Führen Sie den Befehl gulp trust-dev-cert aus.
Befolgen Sie die Anweisungen auf dem Bildschirm, um die Installation des Zertifikats abzuschließen.

Bearbeiten des Codes der Erweiterung für adaptive Karten

Nachdem Sie Ihrer Lösung eine Erweiterung für adaptive Karten hinzugefügt haben, besteht der nächste Schritt darin, den Code zu implementieren, damit die neueste wichtige Ankündigung angezeigt wird.

Laden der neuesten Ankündigung

Erweitern Sie zu Beginn zunächst den Code der ACE, um die neueste Ankündigung aus der Liste Ankündigungen zu laden.

Öffnen Sie Ihr Projekt im Code-Editor.
Öffnen Sie die Datei ./src/adaptiveCardExtensions/importantAnnouncements/ImportantAnnouncementsAdaptiveCardExtension.ts.
Fügen Sie der Liste der Importe import { SPHttpClient } from '@microsoft/sp-http'; hinzu.
Fügen Sie eine Schnittstelle hinzu, um die Form der Ankündigungsdaten zu definieren.
```
export interface IAnnouncement {
  title: string;
  url: string;
}
```
Aktualisieren Sie die IImportantAnnouncementsAdaptiveCardExtensionState-Schnittstelle, um Informationen über die abgerufene Ankündigung zu speichern.
```
export interface IImportantAnnouncementsAdaptiveCardExtensionState {
  announcement: IAnnouncement | undefined;
}
```

Aktualisieren Sie die onInit-Methode, um den Anfangszustand für die Karte festzulegen und das Laden von Ankündigungen zu initialisieren.

public onInit(): Promise<void> {
  this.state = {
    announcement: undefined
  };

  this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView());
  this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView());

  return this._fetchAnnouncements();
}

Implementieren Sie die _fetchAnnouncements-Methode, die die Unternehmensankündigungen aus der Liste lädt.
```
private _fetchAnnouncements(): Promise<void> {
  return this.context.spHttpClient
    .get(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getByTitle('Announcements')/items?$filter=Important eq 1&$select=Title,ID`,
      SPHttpClient.configurations.v1,
      {
        headers: {
          'accept': 'application/json;odata.metadata=none'
        }
      })
    .then(response => response.json())
    .then(announcements => {
      const announcement = announcements.value.pop();
      this.setState({
        announcement: {
          title: announcement.Title,
          url: `${this.context.pageContext.web.absoluteUrl}/lists/Announcements/DispForm.aspx?ID=${announcement.ID}`
        }
      });
    })
    .catch(error => console.error(error));
}
```
Die Methode verwendet den spHttpClient, um wichtige Ankündigungen aus der Liste Ankündigungen abzurufen. spHttpClientumschließt die Standard-API fetch und wird für das Aufrufen von SharePoint-APIs authentifiziert. In der API-URL verwenden Sie den OData-Parameter $select, um die Liste der abzurufenden Eigenschaften anzugeben. Diese Eigenschaften stimmen mit den Spalten aus der Liste Ankündigungen überein. Beim Aufrufen der SharePoint-API legen Sie außerdem den accept-Header so fest, dass Metadaten in der Antwort unterdrückt werden. Dadurch können Sie die Menge der über das Netzwerk gesendeten Daten verringern. Nachdem die Methode die Daten abgerufen hat, ruft sie die neueste Ankündigung ab und weist sie zur Anzeige durch die ACE zu.
Der letzte Schritt besteht darin, das Symbol der Karte in ein Warndreieck im iconProperty-Getter zu ändern:
```
protected get iconProperty(): string {
  return 'warning';
}
```

Anzeigen des Ankündigungstitels auf der Karte

Nachdem Sie den Code zum Abrufen der neuesten wichtigen Ankündigung aus der Liste implementiert haben, besteht der nächste Schritt darin, sie auf der Karte anzuzeigen.

Öffnen Sie im Code-Editor die Datei ./src/adaptiveCardExtensions/importantAnnoungates/cardView/CardView.ts.
Aktualisieren Sie in der CardView-Klasse den data-Getter so, dass der Titel der Ankündigung dem primären Text der Karte zugewiesen wird.
```
public get data(): IBasicCardParameters {
  return {
    primaryText: this.state.announcement.title
  };
}
```

Aktualisieren Sie als Nächstes den cardButtons-Getter so, dass er auf die URL der Ankündigung verweist:

public get cardButtons(): [ICardButton] | [ICardButton, ICardButton] | undefined {
  return [
    {
      title: 'View',
      action: {
        type: 'ExternalLink',
        parameters: {
          target: this.state.announcement.url
        }
      }
    }
  ];
}

Aktualisieren Sie schließlich den Ereignishandler onCardSelection so, dass er auch auf die URL der Ankündigung verweist:
```
public get onCardSelection(): IQuickViewCardAction | IExternalLinkCardAction | undefined {
  return {
    type: 'ExternalLink',
    parameters: {
      target: this.state.announcement.url
    }
  };
}
```
Mit diesen Änderungen wird auf der Karte eine Schaltfläche angezeigt, um die Details der Ankündigung in der SharePoint-Liste anzuzeigen. Wenn Sie jedoch die Karte selbst auswählen, wird die Ankündigung auch geöffnet.

Testen der Erweiterung für adaptive Karten in der Workbench

So testen Sie Erweiterung für adaptive Karten in der Workbench

Öffnen Sie das Terminal, und ändern Sie das Arbeitsverzeichnis in Ihren Projektordner.
Führen Sie den Befehl gulp serve --nobrowser aus, um den lokalen Webserver zu starten.

Warnung

Wenn im Terminal die folgende Warnung angezeigt wird:

Warnung: [spfx-serve] Bei der Bereitstellung im HTTPS-Modus müssen ein PFX-Zertifikatpfad oder ein Zertifikatpfad und ein Schlüsselpfad angegeben werden, oder ein Entwicklungszertifikat muss generiert und vertrauenswürdig sein. Wenn kein SSL-Zertifikat bereitgestellt wird, wird ein selbstsigniertes Standardzertifikat verwendet. Erwarten Sie Browsersicherheitswarnungen.

bedeutet dies, dass der lokale Webserver ihr Entwicklungszertifikat nicht laden konnte. Um dieses Problem zu beheben, beenden Sie den Webserver, indem Sie CTRL+C drücken und den Befehl gulp trust-dev-cert ausführen.
Wechseln Sie in einem Webbrowser zur Workbench unter <Home site url>/_layouts/workbench.aspx. Die URL der Startsite ist der Ort, an dem Sie in der vorherigen Übung die Liste Ankündigungen erstellt haben.

Warnung

Wenn nach dem Öffnen der Workbench der folgende Fehler angezeigt wird: .

Ihr Webpart wird nicht in der Toolbox angezeigt. Stellen Sie sicher, dass "gulp serve" in einem Webpartprojekt ausgeführt wird. Aktualisieren Sie die Seite, sobald "gulp serve" ausgeführt wird.

bedeutet dies, dass der lokale Webserver ihr Entwicklungszertifikat nicht laden konnte. Um dieses Problem zu beheben, beenden Sie den Webserver, indem Sie CTRL+C drücken und den Befehl gulp trust-dev-cert ausführen.
Um die neu erstellte Erweiterung für adaptive Karten zum Zeichenbereich hinzuzufügen, wählen Sie die Schaltfläche + aus, um die Toolbox zu starten.
Geben Sie in der Suchleiste Important announcements ein, und wählen Sie die Erweiterung für adaptive Karten aus.
Wählen Sie in den Workbench-Ansichtsoptionen Vorschau aus, um den Bearbeitungsmodus zu beenden und mit dem Roten Pfeil der Adaptive Kartenerweiterung zu interagieren,
Wenn Sie die Karte oder die Schaltfläche Anzeigen auswählen, werden Sie zur SharePoint-Liste umgeleitet, um die Ankündigung anzuzeigen.
Um die Tests zu beenden, wechseln Sie zum Terminal, und drücken Sie CTRL+C, um den lokalen Webserver zu beenden.

Nachdem Sie sich vergewissert haben, dass die neu hinzugefügte Erweiterung für adaptive Karten wie beabsichtigt funktioniert, stellen Sie sie für Viva Connections bereit.

Bereitstellen der Erweiterung für adaptive Karten für Viva Connections

Sie haben die Erweiterung für adaptive Karten Important announcements (Wichtige Ankündigungen) mithilfe des SharePoint-Frameworks erstellt. Nun stellen wir es für Viva Connections bereit.

Verpacken der App

So packen Sie die Erweiterung für adaptive Karten in einer App mit Gulp

Wechseln Sie zum Terminal, in dem das Arbeitsverzeichnis der Stammordner des Projekts ist.
Führen Sie den Befehl gulp bundle --ship aus, um die Lösung im Releasemodus zu erstellen.
Führen Sie den Befehl gulp package-solution --ship aus, um ein Releasemoduspaket der Lösung zu erstellen.
Die package-solution-Aufgabe hat eine App-Paketdatei namens spfx-company-announcements-ace.sppkg im Ordner ./sharepoint/solution erstellt.

Diese Datei ist Ihr App-Paket. Als Nächstes stellen Sie dieses Paket im SharePoint-App-Katalog bereit, der alle Viva Connections-Erweiterungen enthält.

Erstellen eines App-Katalogs

Wenn Sie keinen App-Katalog in Ihrem Mandanten haben, müssen Sie ihn erstellen, bevor Sie diese Übung fortsetzen.

Wechseln Sie in einem Webbrowser zum Microsoft 365 Admin Center unter https://admin.microsoft.com.
Wählen Sie im seitlichen Menü die Option Alle anzeigen aus.
Wählen Sie in der Liste der Admin Center die Option SharePoint aus.
Wählen Sie im SharePoint Admin Center in der seitlichen Navigation Weitere Funktionen aus.
Wählen Sie im Abschnitt Apps die Schaltfläche Öffnen aus, um zur Administratorseite Apps zu wechseln.
Wählen Sie unter Apps den App-Katalog aus.
Wenn die Website geöffnet wird, verfügen Sie bereits über einen App-Katalog und können weitere Schritte überspringen.
Wenn der App-Katalog nicht vorhanden ist, werden Sie aufgefordert, einen zu erstellen.
Wählen Sie in der Liste der Optionen Automatisch eine neue App-Katalogwebsite erstellen aus, und wählen Sie OK aus.

Bereitstellen der App im SharePoint-App-Katalog

So stellen Sie Ihre Anwendung im App-Katalog bereit

Wechseln Sie in einem Webbrowser zum SharePoint-App-Katalog.
Wählen Sie im SharePoint-App-Katalog in der seitlichen Nagivation Apps für SharePoint aus.
Laden Sie die Datei spfx-company-announcements-ace.sppkg in die Liste hoch, bzw. verwenden Sie hierzu Drag & Drop.
SharePoint fordert Sie zur Bestätigung auf und stellt das Paket bereit. Es macht das Paket auf SharePoint-Websites zur Installation verfügbar.
Wählen Sie Bereitstellen aus.

Installieren der App auf Ihrer Startwebsite

Nachdem die App erfolgreich im App-Katalog bereitgestellt wurde, müssen Sie sie auf Ihrer Startwebsite installieren.

So installieren Sie die App

Wechseln Sie in einem Webbrowser zur Startwebsite.
Wählen Sie in der oberen Navigationsleiste das Symbol Einstellungen (Zahnrad) aus.
Wählen Sie im Abschnitt SharePoint den Link App hinzufügen aus. Sie werden zur Seite Meine Apps weitergeleitet.
Geben Sie im Suchfeld auf der Seite Company ein, und suchen Sie die App spfx-company-announcements-ace-client-side-solution.
Um die App zu installieren, wählen Sie die Schaltfläche Hinzufügen aus.

Die Erweiterung für adaptive Karten in der App ist jetzt verfügbar, um sie dem Dashboard hinzuzufügen.

Vorschau der Erweiterung für adaptive Karten in Viva Connections

Nachdem Sie das neue Lösungspaket mit adaptiver Kartenerweiterung bereitgestellt haben, müssen Sie es als Letztes im Viva Connections-Desktop testen.

Hinzufügen der Erweiterung für adaptive Karten zum Viva Connections-Dashboard

So fügen Sie die Erweiterung für adaptive Karten für wichtige Ankündigungen zu Viva Connections hinzu:

Wechseln Sie in einem Webbrowser zur Startsite in Ihrem Microsoft 365-Mandanten.
Wählen Sie im Sitemenü die Option Seiten aus.
Wählen Sie in der Liste der Seiten Dashboard.aspx aus.
Wählen Sie im Seitenmenü die Option Bearbeiten aus.
Wählen Sie im Zeichenbereich die Schaltfläche Karte hinzufügen
Geben Sie in das Suchfeld Important announcements ein, und wählen Sie aus der Liste der Suchergebnisse die Erweiterung für adaptive Karten Wichtige Ankündigungen (Important announcements) aus.
Um die Änderungen am Dashboard zu speichern, wählen Sie im Seitenmenü die Option Erneut veröffentlichen aus.

Vorschau der Erweiterung für adaptive Karten in Viva Connections Desktop

Nachdem Sie die Erweiterung für adaptive Karten zum Dashboard hinzugefügt haben, können Sie eine Vorschau auf dem Viva Connections-Desktop anzeigen.

Öffnen Sie den Microsoft Teams-Desktopclient, oder navigieren Sie in einem Webbrowser zu https://teams.microsoft.com.
Wählen Sie auf der linken Schiene die Viva Connections-App aus.
Weitere Informationen finden Sie unter Wichtige Ankündigungen adaptive Kartenerweiterung im Dashboard

Vorschau der Erweiterung für adaptive Karten in Viva Connections Mobile

Nachdem Sie die Erweiterung für adaptive Karten zum Dashboard hinzugefügt haben, ist sie auch in der mobilen Viva Connections-Benutzeroberfläche sichtbar. So zeigen Sie eine Vorschau davon an

Öffnen Sie die Microsoft Teams-App auf Ihrem Mobilgerät.
Wählen Sie in der Liste der Apps die Viva Connections-App aus.
Weitere Informationen finden Sie unter Wichtige Ankündigungen adaptive Kartenerweiterung, die im