jQuery Announcement Rotator for SharePoint 2010

August 20, 2012

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

Summerizing Multiple List Content into a Single Pie Chart

January 8, 2010

I was just asked by stump the panel on endusersharepoint.com if I could make the Pie Chart I demonstrated in a previous post, summarize content from multiple SharePoint lists. (see stump the panel thread –Summarizing List content in a chart…)

The scenario is once again you want to take a list and use google analytics to create a pretty pie chart.  But now instead of having one list you have two or more lists with the same groupings and then have the summarized data from all the lists in one pie chart.

Seemed easy enough so I gave it a swing and here it is.

As in the previous post, replace the keyword with the column on the lists you are grouping by.  Also you can hide the lists if you want only a pie chart dashboard.


<script type="text/javascript">
if(typeof jQuery=="undefined"){
var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";
document.write("<script src='",jQPath,"jquery.js' type='text/javascript'><\/script>");
}
</script>

<script type="text/javascript">
var chartkeyword = [];
var chartcolor = [];

////////////////////////// Customizations /////////////////////////////////

chartkeyword[1]="Release" 	//name of the first column that's grouped
chartkeyword[2]="Release"   //name of the second column that's grouped
chartcolor[1]="FF0000"		//Color of Pie Chart 1
chartcolor[2]="00FF00"		//Color of Pie Chart 1

var charts=2 // if you only want one pie chart chang this to 1

</script>
<table width=100%><tr>
<td><div id="jLoadMex1" class="content"><strong>

<!------------- Name of Chart 1 -------------------------->
Add a Name Here

</strong></div></td>
<td><div id="jLoadMex2" class="content"><strong>

<!------------- Name of Chart 2 -------------------------->
Add a Name Here

</strong></div></td>
</tr></table>

<script type="text/javascript">
$("document").ready(function(){

for(var i=1;i<=charts;i++)
{
makeChart(i)
}
});

function makeChart(i)
{
	var arrayList=$("td.ms-gb:contains('" + chartkeyword[i] + "')");
	var coord= new Array();
	var labels= new Array();

	$.each(arrayList, function(i,e)
	{
		var MyIf= $(e).text();
		var txt= MyIf.substring(MyIf.indexOf('(')+1,MyIf.length-1); // Extract the 'Y' coordinates
		coord[i]=txt;
		var txt1= MyIf.substring(MyIf.indexOf(':')+2,MyIf.indexOf("(")-1); // Extract the labels
		//labels[i]=txt1+"("+txt+")";   //add also coordinates for better read
		labels[i]=txt1
	});
	//----------Start of "Summerize Lists into a single Pie Chart" Code -----------
	var labelsCoords= new Array();
	for ( var count1=0;count1<labels.length;count1++) //Dupe Check
	{
		if (labels[count1]=="!delete!")
		{
			 labels.splice(count1,1); //delete dupe from array
			 coord.splice(count1,1); //delete numbers from array
			 count1-=count1; //reset the counter to match the index
		}
		else
		{
			for ( var count2 in labels )
			{
				if (labels[count1].replace(/ /g,"-")==labels[count2].replace(/ /g,"-")&&count1!=count2&&labels[count1]!="!delete!")
				{
					coord[count1]=(coord[count1]*1)+(coord[count2]*1) //total dupe counts
					labels[count2]="!delete!" //label as a dupe to delete
				}
			}
		}
		labelsCoords[count1]=labels[count1]+"("+coord[count1]+")";
	} 

	var txt= coord.join(",");
	var txt1= labelsCoords.join("|"); // This replaces  var txt1=labels.join("|");

	//----------End of "Summerize Lists into a single Pie Chart" Code -----------

	// Adjust Chart Properties below - See Google Charts API for reference
	var vinc= "<IMG src='http://chart.apis.google.com/chart?cht=p&chs=320x120&chd=t:"+txt+"&chl="+txt1+"&chco="+chartcolor[i]+"' />";
	$("#jLoadMex"+i).append("<p>"+vinc+"</p>")
}

</script>


6 Ways to easily “Juice” your SharePoint Pages

November 21, 2009

Right now I am in Birmingham Alabama getting ready to give a couple of presentaions at the SharePoint Saturday here.  I have uploaded the outline to how to Jazz up your sharepoint pages with no more skill than copy and pasting.

Three items are already covered in my blog; Pie charts, SharePointCanvas.com, and Hiding/Displaying web parts.  The other three are from other authors and I have provided links directly to their sites.  Please let me know if you are author on any of these sites and the links or credit due is not to your liking.

* note: I updated the Progress bar text to the code I use on my site, since the linked text did not work during the presentation.

Juice_your_SharePoint_page.doc

Here is the link to the outline for creating a Master Calendar or Library

Creating_ Master_Calendar_Presented.doc