sp-dev-fx-webparts/samples/react-faqapp
Hugo Bernier 810a68ebee Updated contributors for readmes 2023-03-15 00:11:27 -04:00
..
.devcontainer Added 1.8.2 containers 2022-02-16 00:00:27 -05:00
assets Changed docs links to learn 2022-10-24 09:42:45 -04:00
config fix limit 100 items 2020-10-30 22:08:00 +01:00
src fix limit 100 items 2020-10-30 22:08:00 +01:00
teams Added a new sample react-faq app 2020-04-25 23:46:39 -07:00
.editorconfig Added a new sample react-faq app 2020-04-25 23:46:39 -07:00
.gitignore Added a new sample react-faq app 2020-04-25 23:46:39 -07:00
.yo-rc.json Added a new sample react-faq app 2020-04-25 23:46:39 -07:00
README.md Updated contributors for readmes 2023-03-15 00:11:27 -04:00
gulpfile.js Added a new sample react-faq app 2020-04-25 23:46:39 -07:00
package-lock.json Added a new sample react-faq app 2020-04-25 23:46:39 -07:00
package.json Added a new sample react-faq app 2020-04-25 23:46:39 -07:00
tsconfig.json Added a new sample react-faq app 2020-04-25 23:46:39 -07:00
tslint.json Added a new sample react-faq app 2020-04-25 23:46:39 -07:00

README.md

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.

Web part preview

Compatibility

⚠️ Important
Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.
Refer to https://aka.ms/spfx-matrix for more information on SPFx compatibility.

SPFx 1.8.2 Node.js v10 | v8 Compatible with SharePoint Online Does not work with SharePoint 2019 Does not work with SharePoint 2016 (Feature Pack 2) Local Workbench Compatible Hosted Workbench Compatible Compatible with Remote Containers

Applies to

Contributors

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