How You Make SharePoint Announcements Grab Attention Easily Using CSR

SharePoint has had “Announcements” for a very long time now.  The idea is good, you want to let people know what’s going in your department, division, location, site, project, whatever the case might be.  You put the Announcements on the homepage of your site, but they don’t exactly blow you away. 

Boring SharePoint announcements

It’s fine, but I know, yawn right?  Not exactly a wow factor.  Today I’m going to show you an easy way to use Announcements for Critical News that will with style that get a lot more visibility.

I’m sorry did you say something?  I wasn’t listening…

For example, a common request might be if IT needs a way to quickly get important or critical information out to users via your intranet (your intranet is mission-critical after all isn’t it?).  We need something front and center that users will notice.  What about this?

Critical SharePoint Announcement

Now we’re talking, much better.  How we do that?  We want an easy to enter interface, but still see something snazzy.  No problem. 

But wait, there’s more!  What if you just wanted to highlight something critical to all employees but wasn’t red?  We can do that too:

Critical News Information

This red or blue bars represent a simple Announcements list item, but styled via CSS and JavaScript via what’s called JSLink.  JSLink is a field on the web part that allows you to specify  a path to a JS file.  This loads your custom override CSR code.  CSR is one of the best features in SharePoint 2013 and beyond, and really open up a ton of new opportunities to easily bring some pizazz to SharePoint without a lot of fuss.  More on that in a minute but here are some code examples and on GitHub.  The real power here is that you are keeping eveyrthing out of the box with standard lists and columns.  We use code to OVERRIDE the default the styling with our own to represent it however we feel like.

How It’s Done – Apps Need Not Apply

Let me know show you how this works.  Here’s the stuff we’ll need:

  1. An Announcements list with a couple columns, and a view for the homepage
  2. HTML / CSS / images to render the color bars correctly
  3. Javascript to apply the override styling

Announcements List

All the data / text that’s displayed comes from a simple announcement list.  Here we have a simple list we call Critical News:

Critical News Item

We only added one column called Message Type as a choice:

Critical News Columns

The choice fields look like this:

Critical News choice

Critical News Homepage ViewFor the homepage, when you do anything like this, you need any column you need in code to be in the view.  So we created a Homepage view that only has Body, Expires and Message Type.  We also set the limit to only return the latest modified 1 item.  We add the Announcements list to the homepage, and select this view in the properties. Another cool part that is OOTB is that we can use the default Expires field, and it will automatically roll off the view. 

HTML / CSS / Images and JavaScript

We found all of this online, specifically for free from here.  Just right-click and view the page source, and save the CSS, JS and related PNG image files.

Download resource files

In SharePoint, we create some base structure to store the files in the Style Library:

  • Style Library\CriticalNews\css
    • homepage_message.css (css file saved from website)
  • Style Library\CriticalNews\img
    • 3 PNG images we wanted to use (saved from website)
  • Style Library\CriticalNews\js
    • homepage_message.js (js file saved from website)
    • homepage_message_override.js (we will create this file, and this is the file we point the JSLink to from the webpart)

That final homepage_message_override.js is what makes the magic happen, and uses the CSS styling.  This JS file uses CSR to work. 

[sourcecode language='javascript'  padlinenumbers='true' htmlscript='false' gutter='true']
(function () {
    
	document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>');
	document.write('<script src="/Style%20Library/CriticalNews/js/homepage_message.js"><\/script>');
	document.write('<link rel="stylesheet" type="text/css" href="/Style%20Library/CriticalNews/css/homepage_message.css" />');
	
	// Load our custom CSS
	/*var cssId = 'myCss';   // you could encode the css path itself to generate id..
	if (!document.getElementById(cssId))
	{
		var head  = document.getElementsByTagName('head')[0];
		var link  = document.createElement('link');
		link.id   = cssId;
		link.rel  = 'stylesheet';
		link.type = 'text/css';
		link.href = '/Style Library/CriticalNews/css/homepage_message.css';
		link.media = 'all';
		head.appendChild(link);
	}*/
	
	/*
     * Initialize the variable that store the overrides objects. 
     */
	var overrideCtx = {};
	overrideCtx.Templates = {};
	
//	Assign functions or plain html strings to the templateset objects:
//	header, footer and item.
	overrideCtx.Templates.Header = "<div class='center'>";
	overrideCtx.Templates.Footer = "</div>";

// 	This template is assigned to the CustomItem function.
	overrideCtx.Templates.Item = CustomItem;
	//overrideCtx.BaseViewID = 1;
	overrideCtx.ListTemplateType = 104;
	
//   	 Register the template overrides.
	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

/*
 * This function builds the output for the item template.
 * Uses the Context object to access announcement data.
 */
function CustomItem(ctx) {
    // Build a listitem entry for every announcement in the list.
	/*
	<div class="notification fail canhide"><span>ERROR!</span> This is an error message.</div>
	<div class="notification info canhide"><span>INFORMATION:</span> This is an information.</div>
	<div class="notification warning canhide"><span>WARNING!</span> This is a warning message.</div>
	*/
	//var ret = "<li>This is a " + ctx.CurrentItem.MoreText + "</li>";
	if (ctx.CurrentItem["MessageType"] == "Informational (blue)")
	{
		var ret = "<div class='notification info'>" + ctx.CurrentItem["Body"].replace("<p>","").replace("</p>","") + "</div>";
	}
	else  if (ctx.CurrentItem["MessageType"] == "Warning (yellow)")
	{
		var ret = "<div class='notification warning'>" + ctx.CurrentItem["Body"].replace("<p>","").replace("</p>","") + "</div>";
	}
	else  if (ctx.CurrentItem["MessageType"] == "Critical (red)")
	{
		var ret = "<div class='notification fail'>" + ctx.CurrentItem["Body"].replace("<p>","").replace("</p>","") + "</div>";
	}
	return ret;
}
[/sourcecode]

 

Basically what we’re doing is loading our other JS and CSS files, then set the TemplateType to 104 so it only affects Announcement lists.  So we just use a few if else statements to control what style to apply:

image

What you want to be careful of is to make sure the classes here line up with the classes in your CSS file.  Also be sure that all of your paths to the CSS and JS files are correct. 

Now that we’re wired up, edit the web part on the homepage, and under the Misc section, find the JS Link box. imagePaste a link to the homepage_message_override.js file.  Note that we can use site collection relative links:

~sitecollection/Style Library/CriticalNews/js/kap_homepage_message_override.js

Click Ok, and if everything lines up and you did things right, you should be good!  Of course you can go crazy here, append the Body with other text, use the Title, make it a scrolling marque, the possibilities are endless!  I just hope that gives you a simple way to use a little custom styling with out of the box data sources.  No apps required! 

If you don’t have SharePoint 2013 or SharePoint Online (and SharePoint 2016 very soon) to take advantage of this new and awesome functionality, please contact us to discuss how we can help you ensure a successful SharePoint migration project!  To get a head start, go download our SharePoint migration checklist, and learn about the 7 Deadly Sins of Collaboration so we can help you avoid them.  We’d be excited to hear from you!