sp-dev-fx-webparts/samples/react-faqapp

page_type	products	languages	extensions
sample	office-sp	javascript typescript	contentType technologies platforms createdDate samples SharePoint Framework react 04/25/2017 12:00:00 AM

Frequently Asked Questions App

Summary

• This Web Part allows users to create Frequently Asked Questions(Faq App) in modern and classic SharePoint pages.
• This web part allows to search within questions and answers which are stored in a SharePoint FAQ list.
• "React-autosuggest and react-accessible-accordion" react packages are used for the search and accordion control.

Compatibility

Applies to

• SharePoint Framework
• Microsoft 365 tenant

Solution

Solution	Author(s)
react-FAQApp	Ashok Swain - LinkedIn: https://www.linkedin.com/in/ashok-kumar-swain-2627a514
react-FAQApp	Abderahman Moujahid

Version history

Version	Date	Comments
1.0.0	April 25, 2020	Initial release
1.0.1	October 30, 2020	Fix limit 100 items

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Minimal Path to Awesome

• git clone the repo
• npm i
• npm i -g gulp
• gulp serve

This sample can also be opened with VS Code Remote Development. Visit https://aka.ms/spfx-devcontainer for further instructions.

Local Mode

A browser in local mode (localhost) will be opened. https://localhost:4321/temp/workbench.html

SharePoint Mode

If you want to try on a real environment, open: https://[your-domain].sharepoint.com/_layouts/15/workbench.aspx

Usage

• Create a FAQ List in SharePoint.
• Create the below fields:
• Title field can be considered as "Question" field.

Column Name	Field Type
Title	Single line of text
Answer	Multiple lines of text
Category	Single line of text
CategorySortOrder	Number
QuestionSortOrder	Number

• Edit the web part, set the ListName in the property pane

Features

• This Web Part allows users to create Frequently Asked Questions(FAQ App) in modern and classic SharePoint pages.
• An accordion layout is used to make it easy to browse through different questions.
• Expand answers to your most frequent questions.
• Include text, links, images in your answers.
• A search bar to make your FAQ accordion searchable.
• This web part allows to search within questions and answers which are stored in a SharePoint FAQ list.
• Sorting is enabled on both the category & Question