FAQ - Informationsseite zur Corona-Krise mit SharePoint/Teams erstellen

02.04.2020
|In SharePoint Lösungen & Produkte
|By Smarter Business

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.“

Screenshot der österreichischen GVAT Seite

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. Dies soll zusätzlich noch individuell für unterschiedliche Länder verfügbar sein und noch dazu ansprechend Aussehen.

Wir haben uns natürlich gleich ans Werk gemacht und eine SharePoint Kommunikationsseite erstellt, die wir später auch in Teams benutzen. Mittels Hero-Webparts und Call-To-Actions Buttons haben wir ein ansprechendes Design für die Corona SharePoint FAQ-Informationsseite angelegt. Gleichzeitig hat sich das Entwicklungsteam an die Umsetzung eines SPFx Webpart für die ansprechende Darstellung und Animation der FAQs gemacht.

Corona FAQ SPFx Umsetzung

Für den Webpart überlegten wir uns eine Auflistung die aus aufklappbaren Elementen, sogenannten Akkordeons, bestehen soll. Die darin angezeigte Information wird durch eine SharePoint Liste zu Verfügung gestellt. Damit wir relativ einfach auf die SharePoint API zuzugreifen können, bedienen wir uns an den React Modulen aus NPM -> @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. Dieses besteht immer aus einem Titel, einem Button zum Auf- und Zuklappen und dem Inhalt, der nach dem ausklappen erscheinen soll.

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>
    );
  }

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

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

Einbinden der Corona SharePoint FAQ-Informationsseite in Teams

Die einfachste Möglichkeit um die Corona SharePoint Informationsseite auch in Microsoft Teams anzeigen zu können, ist diese direkt als Microsoft Teams Tab zu verlinken. Dazu muss wie folgt vorgegangen werden:

  1. Auswählen des Teams und des Kanals, in dem das Tab hinzugefügt werden soll.
  2. Bei den Tabs auf das + Icon klicken und danach nach „SharePoint“ suchen.
  3. In den Einstellungen wählt man die SharePoint Seite aus, welche in dem Tab angezeigt werden 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.

Screenshot Corona Kriseninformationsseite im Sharepoint
Screenshot Corona Kriseninformationsseite im Teams Tab

Die fertige SPFx Lösung stellen wir euch natürlich gratis zur Verfügung – schreibt uns einfach einen Kommentar oder nehmt mit uns Kontakt auf.

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

Update – wir haben auch die Lösung auf GitHub zur Verfügung gestellt: https://github.com/smarterbusiness/coronalist. Falls ihr Erweiterungen oder Änderungen braucht – könnt ihr gerne über GitHub diese einarbeiten oder euch bei uns melden.

JavaScript Microsoft Teams SharePoint User engagement
5 Comments

Add comment