sp-dev-fx-webparts/samples/react-questions-and-answers
Hugo Bernier 103907bdc6 Added compatibility warning on readme and template 2023-02-10 10:22:32 -05:00
..
assets Changed docs links to learn 2022-10-24 09:42:45 -04:00
config
fluent-svg-backup
sharepoint
src Updating telemetry link 2021-12-20 10:25:30 -05:00
.editorconfig
.gitignore
.yo-rc.json
LICENSE
README.md Added compatibility warning on readme and template 2023-02-10 10:22:32 -05:00
gulpfile.js
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

Questions and Answers

Summary

This is an application that supports Questions & Answers through a web part that can be used directly on a Modern SharePoint Site without the need for Yammer or a backing Microsoft Team site. It relies on a backing SharePoint list that is hidden and a provisioned Site Page that hosts a pre-configured version of the questions web part.

Questions and Answers

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.11 Node.js v10 Compatible with SharePoint Online Does not work with SharePoint 2019 Does not work with SharePoint 2016 (Feature Pack 2) Teams Incompatible Local Workbench Incompatible Hosted Workbench Compatible Compatible with Remote Containers

Applies to

Prerequisites

Solution

Solution Author(s)
react-questions-and-answers Bo George (@bo_george), Mike Homol (@homol)

Version history

Version Date Comments
1.0 September 13, 2020 Initial release
2.0 March, 22, 2021 Version 2.0 with new features and new editor based on TinyMCE.
This change has new list schema dependencies so you will need remove and re-add the app if you installed version 1.0. See below for more on what's new in 2.o

Minimal Path to Awesome

  • Clone this repository
  • in the command line run:
    • npm install
    • gulp serve

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

Slightly Longer Path to More Awesome

To really get the full experience go to the workbench on a SharePoint Site [Your site url]/_layouts/15/workbench.aspx and that's where the magic will happen but this requires that you deploy and activate features to provision the required SharePoint assets

  1. Run one of the following custom commands to clean, build, bundle and package the solution.
    • If you want to be able to debug using your local code using gulp serve gulp package
  2. Navigate to the output questions-application.sppkg (found in the /sharepoint/solution folder)
  3. Upload it to an application catalog (either a tenant or site collection one)
  4. In your site collection go to Site Contents and click New > App
  5. Find and add the Questions Application App
    • wait for it to finish installing and activating features on the Site Contents page
  6. Go to a site page like home, edit the page and find and add the Questions web part
    • If you deployed a shippable (SharePoint Online) version you don't need to do anything else
    • If you deployed a debug (http://localhost:4321) version you'll need to ensure gulp serve is running

Features in Version 1

Below is intended to provide “notable” details on different features. Notable meaning, they may be different than a typical expectation or require clarification. For all features see “Features based Questions Role” to understand if they are available for a specific role.

Questions

Feature Details
Search for a Question After 3 characters are entered in the search box the list of questions will filter based on matching somewhere in the question title
Show List of Questions by All, Answered or Open Allows a user when viewing the list of Questions to only show those that are answered or not answered (open) in addition to seeing all.
View a Question and Replies
Ask a Question Title and details are required to Post
Edit a Question Title and details are required to Post. Available on Gear icon.
Delete a question Deletes the question (and replies when done by moderator). Available on Gear icon.
Follow/Unfollow a Question Filled envelop if followed & empty envelop if not followed for the current user. Used to drive email notification on questions.
Like/Unlike a Question Filled thumbs if liked & empty thumbs if not. Count should be for all likes on the Question but not including replies.

Replies

Feature Details
Reply to a Question or Reply
Edit a Reply
Delete a Reply Deletes the reply (and replies when done by moderator). Available on Gear icon.
Like/Unlike a Reply Filled thumbs if liked & empty thumbs if not.
Mark/Unmark a Reply as Helpful Filled star if liked & empty star if not. Count should be for all helpful items on the Reply but not including replies
Mark/Unmark a Reply as Correct Answer When marked as correct answer a banner will show with “CORRECT ANSWER”. Copy of reply is promoted just below question so that long thread doesnt have to be viewed for the answer. Unmarking will remove the banner and the copy of reply promoted to the to of the thread. Available on Gear icon.

User Roles Overview

The Questions web part relies on the standard SharePoint Groups and the permissions they are granted.

Questions Role SharePoint Group Details
Moderator Site owners Users in this group are treated as moderators of Questions with additional capabilities and notifications than others outlined below.
Contributor Site members Users in this group are treated as “typical” users and considered contributors to questions by default.
Viewer Site visitors By default, users in this group can only view questions and replies.
Contributor Site visitors Within the web part there is a toggle that allows a Site owner to grant visitors the same capabilities as a site member on questions. When set to Yes site visitors are considered contributors to questions.

Features based Questions Role

The table below shows what features and capabilities a user can perform for each role. Where a feature is dynamic (such as questions entered by others or me) separate line items call out the different behaviors.

Feature Moderator Contributor Viewer
Questions
Search for a Question Yes Yes Yes
View a list of Questions Yes Yes Yes
Show List of Questions by All, Answered or Open Yes Yes Yes
View a Question and Replies Yes Yes Yes
Ask a Question Yes Yes No
Edit a Question - Entered by me Yes Yes No
Edit a Question - Entered by others No No No
Delete a question - Entered by me with no replies Yes Yes No
Delete a question - Entered by me with replies Yes No No
Delete a question - Entered by others with no replies Yes No No
Delete a question - Entered by others with replies Yes No No
Follow/Unfollow a Question Yes Yes No
Like/Unlike a Question Yes Yes No
Replies
Reply to a Question or Reply Yes Yes No
Edit a Reply - Entered by me Yes Yes No
Edit a Reply - Entered by others No No No
Delete a Reply - Entered by me with no replies Yes Yes No
Delete a Reply - Entered by me with replies Yes No No
Delete a Reply - Entered by others with no replies Yes No No
Delete a Reply - Entered by others with replies Yes No No
Like/Unlike a Reply Yes Yes No
Mark/Unmark a Reply as Helpful Yes Yes No
Mark/Unmark a Reply as Correct Answer - Question entered by me Yes Yes No
Mark/Unmark a Reply as Correct Answer - Question entered by others Yes No No

Summary of Features added in Version 2

  • Upgraded editor to support:
    • use TinyMCE standalone as a replacement for primereact
    • embedding of images in questions, conversations and replies
    • at mention users within editor
  • Introduced "Conversations" which are behave like Questions without the ability to:
    • Mark a reply as Helpful
    • Mark a reply as the correct answer
  • Add ability to categorize questions which:
    • allows a single site to have questions on many different topics and filter them as necessary
  • Make the Questions list visible and searchable
    • added extension which intercepts list item url and redirects to the appropriate questions or conversations page with threaded replies
  • Bug fixes with dates

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.