Short summary on functionality and used technologies.
Get your own free development tenant by subscribing to Microsoft 365 developer program
Create a list called Alerts on the site you want to deploy this extension on with these fields:
- Title - this will be the field that shows in the top bar
- Expires (Date and time) - this will be the field to determine if an alert should show
| Solution | Author(s) |
|---|---|
| spfx-alert-bar | MRS Company Ltd |
| Version | Date | Comments |
|---|---|---|
| 1.0 | November 22, 2023 | Initial release |
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.
Clone repository and navigate to solution folder
git clone https://github.com/mrscompanyltd/spfx-alert-bar
cd spfx-alert-barAdd dependencies
npm iServe (update /config/serve.json with your page URL)
gulp serveBuild and package
gulp build && gulp bundle --ship && gulp package-solution --ship # Builds, bundles, and creates sppkg fileUpload sppkg package from /sharepoint/solution/spfx-alert-bar.sppkg.
This application customizer reads alerts from a list (list should be called "Alerts" on the same site as the extension). Based on the "Expires" date for the alert, the application customizer will render each alert at the top of the page, cycling every 10 seconds. They can also be cycled manually.
Specifically, it uses the following features:
- SPFx Application Customizer
- Page Placeholder (top)
- SPHttpClient and SharePoint List API
- Getting started with SharePoint Framework
- Building for Microsoft teams
- Use Microsoft Graph in your solution
- Publish SharePoint Framework applications to the Marketplace
- Microsoft 365 Patterns and Practices - Guidance, tooling, samples and open-source controls for your Microsoft 365 development