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 9 reviews
powered by Google
Rene Niederhuber
Rene Niederhuber
09:41 01 Jul 20
Super innovative company: Are top experts in the field of Microsoft SharePoint, Power Apps, etc. We have already... implemented many joint projects. The collaboration is always very pleasant and professional.mehr
Martin Zach
Martin Zach
15:59 15 Jan 20
When it comes to finding a competent partner for SharePoint developments, Smarter Business is the right place for you.... Short reaction and implementation times paired with a good price-performance ratio.On top comes a young and dynamic development team with a flat hierarchy, where there are no long decision-making processes before the work is carried out.I have been working successfully with Smarter Business for over ten years now and have used the development expertise of this cool group in numerous customer projects and will continue to do so in the coming years.mehr
Stefan Huber
Stefan Huber
16:41 11 Dec 19
The SharePoint specialists! Absolutely competent partner for us and our customers! Unreservedly recommend! Partnership... with handshake quality!mehr
Daniel Giefing
Daniel Giefing
13:19 16 Oct 19
Super crispy employer ☝😬Everyone is at eye level and collegial cohesion is the A u. O.Even apart from the... professional life, you often like to do something with your colleagues :)In addition there are flexible working hours and the possibility to design your own day.What more do you want ;)mehr
Stefan Feichtegger
Stefan Feichtegger
13:12 16 Oct 19
Great company. Young people who listen, recognize problems and work out solutions. Great 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
Blogheim.at Logo

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