How to Create a Custom Announcements List using JSLink in SharePoint

With many clients that I have worked with, one common occurrence is the capability to be able to have announcements on their intranet home page. They want an easy-to-use experience for users to be able to add content, but for the look and feel to better suit the needs of their business.

Here is an example of a simple Announcements experience you can use for your users that is list-driven.

announcements

First Step, you need to create the “Announcements” list.

Create the following columns:

  • Title
  • PubDate
  • News Summary
  • News Author
  • News Image

The code – create a javascript file:

(function () {

 //Convert the input date 'item' to a Javascript Date object
 function convertPubDate(d) {
 return (
 d.constructor === Date ? d :
 d.constructor === Array ? new Date(d[0], d[1], d[2]) :
 d.constructor === Number ? new Date(d) :
 d.constructor === String ? new Date(d) :
 typeof d === "object" ? new Date(d.year, d.month, d.date) : Nan
 );
 }

 //Return full name of month
 function getMonthName(mon) {
 switch (mon) {
 case 0: return "January";
 case 1: return "February";
 case 2: return "March";
 case 3: return "April";
 case 4: return "May";
 case 5: return "June";
 case 6: return "July";
 case 7: return "August";
 case 8: return "September";
 case 9: return "October";
 case 10: return "November";
 case 11: return "December";
 }
 }

 //Get formatted date string (e.g. January 1, 1970)
 function formatAnnDate(d) {
 return getMonthName(d.getMonth()) + " " + d.getDate() + ", " + d.getFullYear();
 }

 function getImageSource(currentItemImage) {
 var imageTag = '';

 if (currentItemImage !== null && currentItemImage !== '') {

 var htmlDoc = document.implementation.createHTMLDocument('');
 htmlDoc.body.innerHTML = currentItemImage;
 var imgWrapper = htmlDoc.body.children;

 if (imgWrapper.length > 0 && imgWrapper[0].children.length > 0) {

 var image = imgWrapper[0].children[0];
 var imgSrc = image.getAttribute('src');

 if (imgSrc !== null) {
 imgSrc = imgSrc.split('?')[0] + '?height=100&width=100';
 image.setAttribute('src', imgSrc);
 image.setAttribute('class', 'announcement-img');
 image.removeAttribute('width');
 image.removeAttribute('height');

 imageTag = image.outerHTML;
 }
 }
 }

 return imageTag;
 }

 var NewsOverride = {
 Templates: {
 Header: function (ctx) {
 return "<div class='" + ctx.ListTitle.toLowerCase().replace(/[\s|_]/g, "-") + "'>";
 },
 Item: function (ctx) {
 var ListTitle = ctx.ListTitle.toLowerCase().replace(/[\s|_]/g, "-");
 var HTML = "";
 switch (ListTitle) {
 case "announcements":
 HTML += " <div class='item clearfix'>\
 <img class='announcement-image' src='{{Image}}' />\
 <div class='announcement-content'>\
 <h4><a href='{{displayURL}}'>{{Title}}</a></h4>\
 <p class='date'> {{Date}}</p>\
 <p class='description'> {{Description}}</p>\
 </div>\
 </div>"
 .replace(/{{Title}}/g, ctx.CurrentItem.Title)
 .replace(/{{Date}}/g, ctx.CurrentItem.Publish_x0020_Date)
 .replace(/{{Description}}/g, ctx.CurrentItem.Description)
 .replace(/{{Image}}/g, ctx.CurrentItem.NewsImage)
 .replace(/{{displayURL}}/g, "https://meetdux.sharepoint.com/sites/doitt/Lists/"+ctx.ListTitle+"/dispform.aspx?ID="+ctx.CurrentItem.ID);
 break;
 case "members":
 HTML += " <div class='item clearfix'>\
 <img class='member-img' src='{{Image}}'>\
 <div class='member-content'>\
 <h4><a href='{{displayURL}}'>{{Title}}</a></h4>\
 <p class='name'> {{Name}}</p>\
 <p class='company'>{{Agency}}</p>\
 <p class='email'>{{email}}</p>\
 <p class='phone'>{{Phone}}</p>\
 </div>\
 </div>"
 .replace(/{{Title}}/g, ctx.CurrentItem.Title)
 .replace(/{{Name}}/g, ctx.CurrentItem.Name)
 .replace(/{{Image}}/g, ctx.CurrentItem.Image)
 .replace(/{{Agency}}/g, ctx.CurrentItem.Agency)
 .replace(/{{email}}/g, ctx.CurrentItem.Email)
 .replace(/{{Phone}}/g, ctx.CurrentItem.Phone)
 .replace(/{{displayURL}}/g, "https://meetdux.sharepoint.com/sites/doitt/Lists/"+ctx.ListTitle+"/dispform.aspx?ID="+ctx.CurrentItem.ID);
 break;
 }
 
 return HTML;
 },
 Footer: function (ctx) {
 if (ctx.ListData.Row.length == 0) {
 return "<p class=\"NoAnnouncements\">There is currently no news.</p></div>";
 } else {
 return "</div>";
 }
 }
 },
 ListTemplateType: 100,
 BaseViewID: 1
 };

 if (typeof SPClientTemplates != "undefined") {
 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(NewsOverride);
 }
})();

Insert the url for the javascript file into the edit panel of the list webpart. Be sure to include the "~" at the beginning. It will require accessing the root site for the url to work.
news 
After completing, your new announcements experience is ready for use.













 

412 Views
Scroll to top
Close