Introduction
This new project is a nice little feature that you can easily add to your SharePoint site to enable site messages or alerts. Having the ability to display site alerts is one of the top 10 most requested features to enhance SharePoint. This customization is built as an SPFx application customizer, with a little bit of UI hacking. This project can be used as-is or as a starting point for you to extend and create your own combinations of notifications, icons and colors.
Overview
The Alerts Header solution contains an SPFx application customizer and a list schema for the alerts messages. The list will automatically be created for you when the app is added to your site. Currently the app displays messages from the site it’s in but could be easily modified to pull notifications from another site. Initially this was designed to be deployed the the entire intranet and activated on each site. Each site had the option to display ‘local’ alerts, alerts contained within the site and remote alerts, alerts contained at the root site collection “/”. The remote alert functionality has been commented out for simplicity in the Git Hub repo but could be reenabled with just a little effort.
Implementation
The List
The solution installs an ‘Alerts’ list in your site. This list contains a number of required fields to properly display the alerts.
Title – The first part of the text that is displayed
Description – The second part of the text that is displayed. The description will fill the reminder of the space and truncate with ‘…’
Alert Type – The icon that is displayed. Warning, Actionable or Info as show below from top to bottom.
Link – The navigation url and the text that will be displayed
Start Date / Time – The date and time that the alert will be displayed
End Date / Time – The date and time that the alert will no longer be displayed
Items will immediately start to show up once they are added to the list and hit the duration between the start and end date.
The Web Part
This view below shows the alerts application customizer with all three types of alerts and active.
Icons – The icons used are from the Font Awesome 5.0 free library. You could easily update the code to change out the icons.
Expand / Collapse – If the alert has a long description it will be truncated once it fills the available screen space. The up / down arrow will allow the user to expand and collapse the alert to read the full description.
Dismiss / Close – The alert has and close icon at the far right to dismiss the alert. The alert will no longer show during that session. A new session will display the alert again. New Tabs are equivalent to new sessions.
SharePoint UI Hack – I hinted earlier that I’ve included a bonus UI Hack for free, haha. Take a peek at the picture below. The normal location of an application customizer is at the very top of the page. I did not want the alerts to show up there so I opted to move them to the bottom of the header. This is a non supported customization according to Microsoft. I’m pointing this out for transparency.
Responsive / Mobile Friendly – The web part was designed with the intention of working across all devices and screen sizes. The functionality is somewhat different on the mobile. Once the item is expanded it can only be closed. I’ve do it this way to intentionally close them out to regain the screen real estate back on the small devices.
Customizations
The web part comes with a few notification types. You can add more types directly to the list or to the list schema. After you add new Alert Types you would then need to do a few more updates
IAlerts.types.ts – Add your new Alert Types to the enumeration
AltertItem.tsx – Add new conditions for the new Alert Types and the icon you want to use
AlertItem.module.scss – Copy / Paste an existing Alert Type combination and change the colors to meet your needs.
Conclusion
Site Alerts are one of the top 10 features requested from clients and customers to build. I’m happy to be able to post this feature to share even though it’s not 100% Microsoft compliant. The tiny UI hack positions this feature in the location where I felt it belongs. I hope and wish that Microsoft would give us more Zones in which we could target in the application customizers.
Hi! Thanks for sharing! I have a question, can you help me? What should I do if I want to make it appear automatically? Because at hte moment it only works when I manually refresh the page. Thank you!
Thanks for the comment. This is similar to what John was asking about in the previous question. To make this a production-level app you would need to handle the refresh of the data.
Hi Tomas, thanks for sharing.
The banner only show the new alerts when I refresh the SP page manually. Is there any way to show the banner after the selected date/time equals automatically?
Thanks.
This is interesting comment. I’m not in the code currently and but if I remember correctly it only will pull in items that meet the time requirements. If your alert is at 11am it would not get that list item until 11am and a refresh. You might have to do a few things in order for this to work correctly. The easiest and worst option would be to poll the list. Set up a timer to poll the list but this is bad because anyone sitting on the site where the alert is deployed would constantly be pinging the list every X minutes… forever.
A better way might be to subscribe to a list webhook – https://learn.microsoft.com/en-us/sharepoint/dev/apis/webhooks/lists/overview-sharepoint-list-webhooks
In this case if a new item is create then it would be push to the alert notification component. The second thing you would need is to pull in any alerts from today regardless of time and then let the webpart handle the time to display the alert. You would needs some type of refresh on the web part maybe every 15 minutes but that would run on the user side and not be calling the SharePoint API for the list each time.
Hi Tom,
I used your solution. It’s more useful and looks great!. Thanks for providing this solution.
I want to disable the expand button if the description does not exceed more than 100 characters. if there are any options to do this.
There is no current option in the code to do that but you could easily add it.
just count the characters and either render the expand or do not. It should be a easy addition.
Hello Tom, I love this solution you have shared. Is there any way to make dismissing the alert persist across sessions?
Yes – it would have to be adjusted from session storage to local storage. this would just show the alert 1 time, you then need to say when that expires.
Hi Tomas, this looks great.
Thanks for sharing. Please note that the link to the repo above is to a different project (Back to top)
I downloaded your prebuilt package and added it to my dev tenancy and it shows the alert in both locations. Top and Bottom of the header.
Is there something that I was supposed to do to get this to show properly and only in one location?
Thanks. Dan
thanks for the feedback on the link [fixed]. They could have possibly made a change which would cause the dual locations.
I just checked it and I saw it once, then it stuck at the top only. I increase the timeout to give the page a little more time to catch up. Upped from 100ms to 3000ms
private renderPlaceHolders(): void {
if (!this.topPlaceholder) {
this.topPlaceholder = this.context.placeholderProvider.tryCreateContent(
PlaceholderName.Top
);
this._renderControls(3000);
}
}
Great, thanks for your quick response.
That makes sense. Thank you for the fix!