This is an announcements bar for Sharepoint, featuring comments, likes, ratings.
You can:
-
install & go to quickly use the extension.
-
install customized to use the extension with a customized setup.
-
or read and code as part of the reusable hybrid repo mvc spfx examples.
This one hopefully illustrates:
- create a model extended from existing SharePoint Announcements for the SharePoint access
- use out of the box features like likes, comments
- little specific code needed
- create separate deployment packages for extension and lists
- Announcements bar Sharepoint extension
- In your sharepoint app store
Upload - Create a new team site called
news- On the
site contentpage of thenewssite - Click
+ New->App- Find
Announcements Bar lists - Click
Add
- Find
- On the
- With your new
Announcementslist- If you want use likes or ratings, enable them in
Settings->Rating settings - Add an announcement 🙂
- If you want use likes or ratings, enable them in
To be able to deploy the extension tenant wide, without powershell configuration, create the lists
Announcements and AcknowledgedAnnouncements on the site /sites/news. If the list names or site name differ, then the Announcements bar needs to be installed/configured using power shell on each site
it's installed. Alternatively you can rebuild the package to suit your defaults.
Navigate to your sharepoint app store
If you want to re-use and extend an existing Announcements list then, upload:
-
app/Announcements-Model-Deployment/sharepoint/solution/announcements-model-deployment.sppkg
This contains a list for acknowledged announcements and the extended announcements content type.
else if you want to create a new Announcements list then, upload:
-
app/Announcements-Lists-Deployment/sharepoint/solution/announcements-lists-deployment.sppkg
This contains a list for acknowledged announcements, the announcement list and the extended announcements content type
Upload app/Announcements-Bar-Extension/sharepoint/solution/announcements-bar.sppkg. If you want the bar to show
on each site of the tenant, tick Deploy tenant wide. Otherwise you can install it on each site later by going the sites Site Content:
- Click
+ New->App - Find
Announcements Bar - Click
Add
To use the like/rating feature, a team site is required, otherwise a communication site will be fine.
The hosting site must host both lists, Announcements and AcknowledgedAnnouncements.
By default the hosting site is sites/news.
On the site content page of the site hosting the Announcements:
- Click
+ New->App- Find
Announcements Bar listsorAnnouncements Bar model- Click
Add
- Click
- Find
Follow this if you've chosen the Announcements Bar model deployment package.
Open Settings for the announcement list
- In
Advanced settings- Enable management of content types
- Disable attachments
- In
Add from existing content types- Add
Announcements Extended
- Add
- Click on the default item content type (or other pre-existing)
- delete this content type
- Optional for ratings (this only works on team sites)
- Select
Rating settings- Rating Settings: Yes or (No if you want to disable ratings)
- Which voting/rating experience you would like to enable for this list?
Likesif you want to show the Thumbs icon and countStar Ratingsif you want to show the 5-star rating
- Select
In your sharepoint app store
Upload
app/Announcements-Bar-Extension/sharepoint/solution/announcements-bar.sppkg
Select [x] Deploy tenant wide if you used the above default settings and want the bar to appear on every modern site.
If you didn't host Announcements on sites/news, and or used different names for the lists, then you need to open PowerShell to add the extension to each site:
-
Connect-PnPOnline -Url https://YOUR-TENANT.sharepoint.com/sites/YourSite -
Modify the
{'listName': 'Announcements', 'acknowledgedListName': 'AcknowledgedAnnouncements', 'siteUrl': '/sites/News'}to point to your site containing your announcements announcement list and acknowledged list from earlier:Depending on your pnp / powershell version, the
ClientSideComponentPropertiesneed to be escaped different:Add-PnPCustomAction -Name "Mauri-Ora-Announcements-Bar" -Title "Mauri-Ora-Announcements-Bar" -Location "ClientSideExtension.ApplicationCustomizer" -ClientSideComponentId "f4e7b2fc-be9a-43de-bb92-4a67c3f72793" -ClientSideComponentProperties "{ `"listName`": `"Announcements`", `"acknowledgedListName`": `"AcknowledgedAnnouncements`", `"siteUrl`": `"/sites/News`"}"or
Add-PnPCustomAction -Name "Mauri-Ora-Announcements-Bar" -Title "Mauri-Ora-Announcements-Bar" -Location "ClientSideExtension.ApplicationCustomizer" -ClientSideComponentId "f4e7b2fc-be9a-43de-bb92-4a67c3f72793" -ClientSideComponentProperties "{'listName': 'Announcements', 'acknowledgedListName': 'AcknowledgedAnnouncements', 'siteUrl': '/sites/News'}"
If you have issues, check the browser logs, Announcements onInit logs an object with an properties object containing listName, acknowledgedListName and siteUrl.
Upload to the app store the lists and content types deployment package of your choice. On your Hosting site install the deployment package
You should have the following installed:
- Code editor
- Node 14
- yarn 2+
- GitExtension (the program, if your contributing or forking a new project of this)
git clone --recurse-submodules https://github.com/mauriora/Announcements-Bar-Spfx.git
cd Announcements-Bar-Spfx
yarn install
yarn build
code .Initially, please follow the steps in Debug first. Then:
Edit app\Announcements-Bar-Extension/config/serve.json
- set pageUrl to the page you want to test your extension on
- in properties, set siteurl to the Hosting site
open a terminal in the solution (root) folder
yarn servea browser will open and navigate to pageUrl
- In a solution terminal execute
yarn build - Either Install & go or Install customized
Before you can serve the extension, a debug-build needs to be installed. The first time you debug using serve the local developer certificate needs to be trusted.
In app/Announcements-Bar-Extension execute in a terminal:
yarn run trust-dev-certThe debug build basically uploads only the manifest, the code will be loaded from the local machine which is running serve.
In app/Announcements-Bar-Extension execute in a terminal:
yarn run build-debugEither Install & go or Install customized
To see the installation errors, go to Site content using the classic experience.
Locate the failed package and:
- click the more menu (
...) - Click
DETAILS - In the
Errorssection- Click on the number to the right of
Install Errors - A balloon popup should appear showing the error(s)
- Click on the number to the right of
If you see a blank page, open PowerShell with pnp and execute:
Connect-PnPOnline -Url "https://<YOURTENANT>-admin.sharepoint.com" -interactive
Set-PnPTenantSite -Identity "https://<YOURTENANT>.sharepoint.com/sites/<YOURSITE>" -DenyAddAndCustomizePages:$false
These are the actual "outputs" .sppkg.
Announcements-Bar-Extension is the visible react extension, either installed tenant wide or per site.
Announcements-Lists-Deployment is the extended announcements list package usually deployed on one site per tenant.
Announcements-Model-Deployment is the deployment of just the content type, if you want to extend an existing Announcements list.
These modules usually change during the cause of development. It might be that they are completely re-used and not modified at all. The hybrid repro structure makes it easy to quickly enhance commonly used modules.
Model-Announcement-Extended has been created with this project, but could be used in others as well.
Use the minimal path to awesomeness and please create a fork and branch for your contribution. Then do a pull request to merge your branch into the main branch.
- Fork the solution as YOUR-SOLUTION
- Clone the forked solution
- Fork the starting app project as YOUR-PROJECT
- Add the YOUR-PROJECT as submodule to YOUR-SOLUTION using the app GitExtension, manage sub modules
- Remove the starting project, and any other you don't need, from YOUR-solution using the app GitExtension, manage sub modules
- call
yarn generateNewGuidsResetVersionsin apps/YOUR-PROJECT - rename YOUR-..... in:
- app/YOUR-PROJECT
- package.json
- src/extensions/YOUR-EXTENSION
- YOUR-EXTENSION.manifest.json
- config
- config.json
- package-solution.json
- sharepoint/assets/*
- app/YOUR-PROJECT
- Copy the id value from YOUR-EXTENSION.manifest.json as componentId, and the alias value as title to
- config
- serve.json
- sharepoint/assets/
- elements.xml
- ClientSideInstance.xml
- config