jQuery Announcement Rotator for SharePoint 2010

This code takes all your announcments on a site and rotates through them with a slick looking slider.  You can add images to your announcments, choose whether to display them or not, and add a link to a new article page if you wish.

This only works on SharePoint 2010!

1.Create an announcement list called “Announcements”.  On most team sites this exists already
2. Create a column called Image (Rich Text), PageURL (text) & Display (yes/no).  Capitalization Matters!
3. Upload text file with the below code and link to it with Content Editor webpart.  (Right click on the text file once it’s in Sharepoint library and click on “copy shortcut”.I

Notes:

If you already have announcements on the list, check the display property or they will NOT showup

For the Image, put an your image into the “Image” Rich Text box.  By default the SharePoint Logo will show up

The PageURL, paste the page you would like the Read More button to go to.

 

 

Special thanks to bxslider code at bxslider.com




<!--  Anouncment Rotator -->


<div id="slider"></div>

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script>

<!--  Anouncment Rotator -->

<script type="text/javascript">



//--------------------------------------------------------------

var defaultImagePath="https://wyly.files.wordpress.com/2012/02/sharepoint1.png";
var nameOfList="Announcements";

//--------------------------------------------------------------

ExecuteOrDelayUntilScriptLoaded(GetAnnouncementInfo, "sp.js");


var myAnnouncements;

function GetAnnouncementInfo() 
{ 

  if($('#slider').length==0){return false;}  // If the div slider is not on page; Stop

  // Create query string using CAML syntax
  var myQueryString = '1'; 


  // Create client context 
  var myContext = new SP.ClientContext.get_current();
 
  // Get current web (comparable to SPWeb) 
  var myWeb = myContext.get_web(); 

  // Get list by title (comparable to SPList) 
  var myList = myWeb.get_lists().getByTitle(nameOfList); 

  // Create (empty) query (comparable to SPQuery) 
  var myQuery = new SP.CamlQuery(); 

  // Attach query string to query 
  myQuery.set_viewXml(myQueryString); 

  // Get items from list using query 
  myAnnouncements = myList.getItems(myQuery); 

  // Declare what to load (myAnnouncements with
  myContext.load(myAnnouncements,'Include(ID, Title, Body, Image, PageURL)');
 
  // executed async, we have to define what should  
  // happen afterwards (in case of success and in   
  // case of failure).  
  // We do this with the 'createDelegate': 
  myContext.executeQueryAsync(Function.createDelegate(this, GetAnnouncementInfoSuccess),Function.createDelegate(this, GetAnnouncementInfoFail)); 
 
  writeToAnnouncment(''); 
}

// This function will be called if the
// "executeQueryAsync" failed// (e.g. list not available, query string wrong or anything else) 
function GetAnnouncementInfoFail(sender, args) 
{ 
  // Show error message
  writeToAnnouncment('GetAnnouncementInfo() failed:' + args.get_message()); 
}

// This function will be called if the "executeQueryAsync"// succeeded 
function GetAnnouncementInfoSuccess(sender, args) 
{ 
  // Now we can use the data retrieved from SharePoint! 
  // Get number of items 
  var listReaderCount = myAnnouncements.get_count(); 

  // Show how much items have been found
  writeToAnnouncment(listReaderCount + ' Announcements where found');
 
  // Get the enumerator to be able to loop through the items

  var announcementEnumerator = myAnnouncements.getEnumerator(); 
  
  // Declare temporary variable for announcement details 
  var announcementDetails = '';

  // Loop through all items 

  while (announcementEnumerator.moveNext()) 
  { 
    // Get current item 
    var currentAnnouncement = announcementEnumerator.get_current();
    var readMoreLink=currentAnnouncement.get_item("PageURL");
    if(!readMoreLink){readMoreLink="../Lists/Announcements/DispForm.aspx?ID="+currentAnnouncement.get_item("ID");}
    var archivesLink='../Lists/Announcements/AllItems.aspx';
   	var image = currentAnnouncement.get_item("Image")
   	if (image==null){image="<img src='"+defaultImagePath+"' />"}

    // Concatenate values 
    announcementDetails +='<div class="artContainer"><div class="artImage">'
    						+ image
    						+ '</div><div class="artText"><div class="artTitle"> ' 
    						+ currentAnnouncement.get_item("Title")
    						+ '</div> <div class="artBody">' 
    						+ currentAnnouncement.get_item("Body")
    						+ '</div>'
    						+ '<a href="'
    						+ readMoreLink
    						+ '">'
    						+ '<div id="readmore-button">Read More&lt;!--<img src="" style="float:right;border:0;" />--&gt;</div>'	
    						+ '</a>'
    						+ '<a href="'
    						+ archivesLink
    						+ '">'
							+ '<div id="archive-button">Archive&lt;!--<img src="" style="float:right;border:0;" />--&gt;</div>'
							+ '</a>'
    						+ '</div></div>';
    			
  } 

	var startScroll=false;

  // Show the items and add then to the div
  
  //if no items show a message
  if (listReaderCount ==0){announcementDetails="No Anouncements for this Site";return false;}
  
  writeToAnnouncment(announcementDetails);
  
  if (listReaderCount &gt;1) {

	//Start the scrolling
	//$('#slider').bxSlider();
	$('#slider').bxSlider({    auto: true, pager: true, pause: 10000, prevText: '&lt;', nextText: '&gt;'  });
	
	}

	
} 


function writeToAnnouncment(msg)
{
	document.getElementById('slider').innerHTML=msg;
}







#readmore-button, #archive-button{

	margin-top:10px;
	margin-left:20px;
}


.artContainer{
	width:620px;
	height:300px;
}


.artImage{
	width:350px;
	height:300px;
	float:left;
}

.artText{
	width:250px;
	height:300px;
	margin-right:10px;
	float:left;
}

.artTitle{
	width:100%;
	min-height:30px;
	color:#002244;
	font-weight:bold;
	font-size:18px;
}

.artBody{
	width:100%;
	height:110px;
	overflow:hidden;
}

.bx-pager{
	position:relative;
	top:-20px;
	text-align:center;
}

.bx-pager .pager-active, .bx-pager a:hover {
    color: #DE312A;
    text-decoration: none;
}

.bx-pager a {
    color: #838383;
    font-size: 16px;
    padding: 0 10px;
}

.bx-prev, .bx-next{
	font-size:16px;
	font-weight:bold;
	color: #717073;
	position:relative;
	top:-40px;
	text-decoration:underline;
	display:none;

}

.bx-prev{
	left:20px;
	float:left;
	display:none;
}
.bx-next{
	left:-50px;
	float:right;
	display:none;
}











Advertisements

8 Responses to jQuery Announcement Rotator for SharePoint 2010

  1. Avinash says:

    Hi ,
    Can you explain more about this :
    Create a column called Image (Rich Text), PageURL (text) & Display (yes/no). Capitalization Matters!
    how many columns to create and what they should contain.

    • wyly says:

      Avinash,

      It is really that easy, open up your announcement list (go to view all sites – Announcements, then go to list settings.)
      Create three new columns:
      Image (select rich text as the column type)
      PageUrl (text as the column type)
      Display (select yes/no as the column type)

      Make sure you spell and capitalize these names exactly as listed because the jQuery code is case sensitive.

      Next on you page, place a content editor web part and link it to a text file with the above code on your site ( you can upload it to shared documents if you like)

      After uploading the text file, right click on it, select copy url and paste that into the link section of the Content Editor Web Part

      Make sure all announcements you want to show have the display box checked and add images into the rich text images field for your picture. Use the PageUrl to create links to the articles full page.
      Enjoy!

  2. Avinash says:

    Wyly,

    You are simply superb !! Thanks a ton ! for you post and patience for the detailed explanation am deligted ! Let me know if you have any blogs so that i can follow and learn more i am new to SP.

  3. Avinash says:

    Wyly,

    Only the Jquery code is displayed in the CEWP… I did all the steps which you told

    • wyly says:

      Avish, found the issue. I had links to the jQuery in my masterpage. I added the links to the two libraries at the top. Could you edit the script and see if it works now for you?

  4. Is it possible to do this in Sharepoint 2007 because some of us are still using 2007 :(.
    Thanks

    • wyly says:

      Unfortunately no, there is a new javascript codebase in 2010 that I’m tapping into to make this work. It will not work on 2007. Sorry 😦

  5. Rasmita says:

    Is it possible for SharePoint 2013?
    I have tried but failed. Any other option is there to achive this in SharePoint 2013. Need you help wyly.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: