Build a Corona FAQ for SharePoint and Teams Overnight

The Request

At 10 p.m. on a Thursday we received an urgent call from a major customer: “By noon tomorrow we need a Corona SharePoint information page with FAQ functionality like https://www.oesterreich.gv.at/ plus tight Microsoft Teams integration.”

The goal was to answer recurring questions such as “Can we go back to the office?” or “How do childcare and home office work together?” per country while keeping the look and feel modern and trustworthy.

We immediately created a SharePoint communication site that we could later surface in Microsoft Teams. Hero web parts and call-to-action buttons set the visual tone, while our development team started working on an SPFx web part for dynamic FAQs.

Technical Implementation

SPFx FAQ web part

We opted for collapsible accordion items fed by a SharePoint list. To keep the SharePoint API integration lean we relied on the React modules from @pnp/sp.

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

Each accordion is represented by its own React component with a title, a toggle button, and the body text that becomes visible when expanded.

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

CSS animation

The accordion animation relies on CSS transition and a dynamically adjusted height, which keeps the interaction smooth without adding JavaScript overhead.

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

Integrating with Microsoft Teams

The fastest way to display the SharePoint information page in Microsoft Teams is to add it as a tab:

1. Choose the team and channel that should receive the tab.
2. Click the + icon, search for “SharePoint,” and select the app.
3. Pick the SharePoint page you want to embed; Teams loads it instantly inside the tab.

The Result

The resulting slider first showcases the SharePoint page with the accordion web part and then the Teams tab view.

For more Coronavirus-related insights, read our article Coronavirus – how can we as a SharePoint company help?.

Update: The entire solution is available on GitHub: https://github.com/smarterbusiness/coronalist. Feel free to fork it for extensions or contact us if you’d like support.