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.

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.

Smarter Business Solutions GmbH
5.0
Based on 8 reviews
powered by Google
Martin Zach
Martin Zach
15:59 15 Jan 20
Wenn es darum geht, einen kompetenten Partner für SharePoint Entwicklungen zu finden, ist man bei Smarter Business... genau an der richtigen Adresse. Kurze Reaktions- und Umsetzungszeiten gepaart mit einem guten Preis- Leistungsverhältnis.On top kommt ein junges und dynamisches Entwicklerteam mit flacher Hierachie, wo es keine langen Entscheidungsprozesse gibt, bevor die Arbeit durchgeführt wird.Ich arbeite nun seit über zehn Jahren immer wieder erfolgreich mit Smarter Business zusammen und habe in etlichen Kundenprojekten auf die Entwicklungsexpertise dieser coolen Truppe zurückgegriffen unde werde dies auch in den kommenden Jahren weiter so betreiben.mehr
Stefan Huber
Stefan Huber
16:41 11 Dec 19
Die SharePoint-Spezialisten! Absolut kompetenter Partner für uns und unsere Kunden! Uneingeschränkt... weiterzuempfehlen! Partnerschaft mit Handschlagqualität!mehr
Daniel Giefing
Daniel Giefing
13:19 16 Oct 19
Super knuspriger Arbeitgeber ☝😬Alle sind miteinander auf Augenhöhe und Kollegialer Zusammenhalt is das A u.... O.Auch abseits vom Beruflichen Alltag unternimmt man mit den Kollegen mal gern öfters was :)Dazu kommen flexible Arbeitszeiten und die Möglichkeit seinen Tag selbst zu gestalten.Was will man mehr ;)mehr
Stefan Feichtegger
Stefan Feichtegger
13:12 16 Oct 19
Großartiges Unternehmen. Junge Menschen die zuhören, Probleme erkennen und Lösungen ausarbeiten. Super Potential.
Josef Benda
Josef Benda
13:00 16 Oct 19
Super Arbeitgeber, freie Zeiteinteilung, spannende Projekte und ein tolles Team, so macht Arbeit Spaß!
Georg Krewenka
Georg Krewenka
06:49 16 Oct 19
Ich habe Florian als einen professionellen & gewissenhaften Partner erlebt, der mit viel Motivation und Ehrgeiz für... sein Projekte einsteht.mehr
Nächste Bewertungen

© Smarter Business – Alle Rechte vorbehalten
Bestimmungen | Impressum | Datenschutz