Central notification bar for non coder users in SharePoint 2013 (or 2010)

We wanted a central place to notify people of any important news - planned outages, where the donuts are, etc. This marquee banner had to appear on every site and subsite using our template.

I added a content editor webpart, pointing to a file in the SiteAssets of the root site.
That worked and allowed me to add CSS, javascript, jquery, etc. in one location and all was right and good. I set up a marquee for those announcements, but since it was in my external file, i was a little uneasy when they decided that the night shift should be able to edit my marquee bar.
The night shift usually can't be trusted to close the refrigerator door, let alone any HTML tags, so I needed to lock them down while preventing them from breaking the site as much as possible.

I looked into SPServices - "GetListItems", but that seems to always be a local list.  I use this to my advantage when working with "Announcements" and "Links" and that works well, but I couldn't figure out how to point to an Announcements list on the Root site when I need it to appear on all my subsites.

I looked into creating an ASP.Net #include file, but that also was blocked. SharePoint doesn't want that to happen easily.

I considered using three content editor webparts with the middle one pointing to a text file, but that seemed a little clunky since I'd need to open my <marquee> in webpart 1, and close </marquee> in webpart 3. Anyone could remove a webpart and break the whole effect

Finally, I went back to JQuery to load a file, and that worked. Here's what I did.

In my external file that I'm already loading through the content editor webpart, I added a jquery reference, told it to load my text file from a special [locked down] document library, then wrapped the output div in my styled up marquee bar.

<script type="text/javascript" src="/SiteAssets/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function(){
$('#CentralNotificationBar').load('/CentralNotificationBar/CentralNotificationBar.txt');
});

</script>

<marquee class='ms-ContentAccent1-bgColor CustomMarquee'>
<div id="CentralNotificationBar"></div>
</marquee>


I would do a screen shot, but that would be more difficult than it sounds, so just trust me - it's lovely.
Please leave a comment if you found this useful or have any questions. 

Comments

Post a Comment

Popular posts from this blog

Setting SharePoint announcements to auto delete after expiration

Updating a single field in a SharePoint List using Power Automate Flows

SharePoint driven rich text dashboard using jqueryui. (JQuery file)