Corona-FAQ in SharePoint und Teams schnell erstellen

Der Auftrag

Von einem großen Kunden ereilte uns am Donnerstag um 22:00 ein dringender Hilferuf: „Wir brauchen morgen um 12:00 eine Corona SharePoint Informationsseite mit einer FAQ-Funktionalität wie bei https://www.oesterreich.gv.at/ und einer Teams-Integration.“

Das Ziel des Unternehmens ist es, allgemeine Fragen wie „Dürfen wir wieder ins Büro?“ oder „Kinderbetreuung und Homeoffice – geht das überhaupt?“ zu beantworten. Diese Informationen sollen zusätzlich individuell für die jeweiligen Länder vorliegen und gleichzeitig modern aussehen.

Wir haben uns natürlich sofort ans Werk gemacht und eine SharePoint-Kommunikationsseite erstellt, die wir später auch in Teams verwenden. Mittels Hero-Webparts und Call-to-Action-Buttons haben wir ein ansprechendes Design für die Corona SharePoint FAQ-Informationsseite angelegt. Parallel übernahm das Entwicklungsteam das SPFx-Webpart für die animierte Darstellung der FAQs.

Technische Umsetzung

SPFx-Webpart für die FAQ

Für den Webpart entschieden wir uns für eine Auflistung aus aufklappbaren Elementen, sogenannten Akkordeons. Die darin angezeigten Informationen liefert eine SharePoint-Liste. Damit wir unkompliziert auf die SharePoint-API zugreifen können, verwenden wir React-Module aus @pnp/sp.

private loadFAQItems() {
  return sp.web.lists
    .getByTitle(this.props.listName)
    .items
    .orderBy("Abfolge")
    .get();
}

Ein Akkordeon haben wir als eigenes React-Element abgebildet. Es besteht aus einem Titel, einem Button zum Auf- und Zuklappen sowie dem Inhalt, der nach dem Öffnen sichtbar wird.

public render(): React.ReactElement<IFaqListProps> {
  return (
    <div className={styles.coronaList}>
      {this.state.listItems.length > 0
        ? this.state.listItems.map((item) => (
            <CoronaCard title={item.title} body={item.body} />
          ))
        : null}
    </div>
  );
}

Animation via CSS

Die Animation beim Aus- und Zuklappen wird im CSS mithilfe von transition und dynamischem Anpassen der Höhe realisiert.

.faqContent {
  transition: height 1s;
  overflow-y: hidden;
}

Einbindung in Microsoft Teams

Die einfachste Möglichkeit, die Corona SharePoint Informationsseite in Microsoft Teams anzuzeigen, ist ein direkter Tab-Link. So funktioniert es:

1. Team und Kanal auswählen, in dem das Tab ergänzt werden soll.
2. Am Tab-Bereich auf das + klicken und nach „SharePoint“ suchen.
3. In den Einstellungen die SharePoint-Seite auswählen, die im Tab erscheinen soll.

Das Ergebnis

Der anschließende Slider zeigt zuerst die Corona SharePoint FAQ-Informationsseite mit dem Akkordeon Webpart und danach die Darstellung in einem Teams Tab.

Für weitere Infos zum Thema Coronavirus sieh dir auch diesen Beitrag an: Coronavirus – wie können wir als SharePoint Firma helfen.

Update: Wir haben die Lösung auf GitHub veröffentlicht: https://github.com/smarterbusiness/coronalist. Wenn ihr Erweiterungen oder Änderungen braucht, könnt ihr sie direkt dort einarbeiten oder euch bei uns melden.