Built purely with off-the-shelf SharePoint capabilities, Engage Hub is a contemporary SPFx-based substitute for Viva Engage. In addition to providing essential social capabilities such as liking and unliking posts, threaded comments, and comment creation, it manages post data using SharePoint Lists and Document Libraries.
Engage Hub maintains responsiveness and light weight with its elegant React user interface and integrated infinite scrolling. Additionally, it incorporates an AI-powered twist by using the Azure OpenAI JavaScript SDK to assist users in revising content and correcting grammar mistakes.
| Every SPFx version is optimally compatible with specific versions of Node.js. In order to be able to build this sample, you need to 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. |
This sample is optimally compatible with the following environment configuration:
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1"){kind=icon}
Get your own free development tenant by subscribing to Microsoft 365 developer program
Create a SharePoint list Discussion Point in the SPO site with below columns
| Column Name | Type |
|---|---|
| Description | Multi-line text with enhanced text enabled |
| UserID | Text |
| PostID | Text |
| AuthorName | Text |
| AuthorMailID | Text |
Create a Document library Discussion Point Gallery in SPO site & create one new column
| Column Name | Type |
|---|---|
| PostID | Text |
| Version | Date | Comments |
|---|---|---|
| 1.0 | April 27, 2025 | Initial release |
| 1.1 | May 4, 2025 | Add support for Rich Text, MSFT Notepad inspired AI features & other improvements Editor |
- Clone this repository
- Ensure that you are at the solution folder
- in the command-line run:
npm installgulp serve
-
Ensure that you are at the solution folder
-
in the command-line run:
gulp build --shipgulp bundle --shipgulp package-solution --ship
-
Upload package to AppCatalog & add it to the SharePoint site.
Key features demonstrated by this solution:
- Leverage like/unlike, comments capabilities of list
- Azure OpenAI JS SDK
- Infinite loading
- Custom hooks
- Follows single responsiblity principle
- Microsoft 365 Patterns and Practices - Guidance, tooling, samples and open-source controls for your Microsoft 365 development.
- SharePoint Framework
- PnP JS
- React Docs
- Azure OpenAI Library for TS
- AOAI SDK
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you're having issues building the solution, please run spfx doctor from within the solution folder to diagnose incompatibility issues with your environment.
If you encounter any issues while using this sample, create a new issue.
For questions regarding this sample, create a new question.
Finally, if you have an idea for improvement, make a suggestion.
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.