Steve's SharePoint Nuggets: Create a dynamic content slider against a SharePoint list using jQuery. SharePoint 2007, 2010, 2013

On the front page of many SharePoint sites there is a section called "news" or "announcements". Located on the home page of your company or organization site, this is a quick way to disseminate important information to all users of your SharePoint site.

This is usually set up using a SharePoint list that contains the announcements or news items, and a content query web part on the front page gets the most recently published news item or article. This is a quick way to update the home page without having to edit the html source on that page every time the news or announcement changes.

However, the issue with this approach is that it only shows one announcement at a time. Sometimes, there may be multiple news items or announcements to show on the home page, but you don't have the space on the page for multiple items.

I was tasked with taking an existing news content query web part and replacing it with a Content Slider. This would show each news item on the page for a few seconds, and then scroll to the right for the next news item. A group of buttons at the bottom allows direct control of which news item you wish to see.

This is a fairly standard way of presenting information on the web, and so there are a lot of javascript and css based solutions for this challenge available. However, I wanted to host this solution in SharePoint 2007, and wanted to be able to use jQuery to extract information from the SharePoint news list. So it made sense to look into a few of the available jQuery content sliders to see which would meet my needs. The final choice ended up being awShowcase, you can download it from here:

Awkward Showcase on GitHub

Step 1: Download supporting libraries.

Within the SharePoint site that is going to be hosting your content slider, locate your site assets library. If it doesn't exist, create a document library called site assets.

Download and unzip the AWShowcase files locally, and place the unzipped files and folders in your site assets library. Download the jquery source file and SP Services jquery source files and place those in your site assets library as well. Your site assets library should look similar to this:

Step 2: Update your news or announcements library.

If you have an existing news or announcements list, you will need to add and update a couple of fields to make it work with this content slider. The first thing to add is a field called "Slider". This is a straight text field. If you want your announcement or news article to appear in the slider, you put the letter "Y" in this textbox.

You may already have a start date associated with your announcement/news list. If not, add it now. If you name it "StartDate" as one word, then you won't need to change the jquery for that field later.
You will also have a field that contains the announcement content. In my case, I called the field "HTML" because it allows rich html content to give richer tools to people entering the slider content. You will need to change the field name in the code below if it is not "HTML".

If you have not already enabled it, enable approval for the announcments/news list. The list items must be approved to show on the content slider.

Step 3: Add and populate the content editor web part.

Navigate to the page you wish to display the new content slider on and edit the web part page. Add a new content editor web part. Edit this web part and choose to edit the HTML source.

Add links to your supporting libraries at the top of your html content:

Now, copy and paste the following code underneath your supporting library links:

$(document).ready(function()
	{
                //alert('jquery loaded');
		var callbacks = $.Callbacks();
		callbacks.add(renderSlider);
		callbacks.add(renderShowCase);
		callbacks.fire();

});

function renderSlider()
	{

//alert('inside renderSlider');
		var recordsReturned = 0;
		var ArticleHTMLArray = [];
		var ArticleTitleArray = [];
		var XMLResponse = "";
		var ShowOnSlider = "";

$().SPServices({
		  		operation: "GetListItems",
				async: false,
				listName: "spotlight",
				CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='HTML' /><FieldRef Name='StartDate' /><FieldRef Name='Slider' /><FieldRef Name='_ModerationStatus' /></ViewFields>",
				CAMLQuery:  "<Query>" +
								"<Where>" +
									"<And>" +
										"<Eq>" +
											"<FieldRef Name='_ModerationStatus'/>" +
											"<Value Type='Modstat'>Approved</Value>" +
										"</Eq>" +
										"<And>" +
											"<Eq>" +
												"<FieldRef Name='Slider'/>" +
												"<Value Type='Text'>"+"Y"+"</Value>" +
											"</Eq>" +
											"<Lt>" +
												"<FieldRef Name='StartDate'/>" +
												"<Value Type='DateTime'><Today/></Value>" +
											"</Lt>" +
										"</And>" +
									"</And>" +
								"</Where>" +
								"<OrderBy>"+
									"<FieldRef Name='StartDate' Ascending='False' />"+
								"</OrderBy>"+
							"</Query>",

completefunc: function (xData, Status) {
		      		$(xData.responseXML).SPFilterNode("z:row").each(function() {
		      			ArticleHTMLArray[recordsReturned] = $(this).attr("ows_HTML");
		      			ArticleTitleArray[recordsReturned] = $(this).attr("ows_Title");
		      			ShowOnSlider = $(this).attr("ows_Slider");
						recordsReturned = recordsReturned + 1;
					});
				}
			});

var pageHTML = "";

for(i=0; i<recordsReturned; i++) {
				pageHTML = pageHTML + "<div class=\"showcase-slide\">";
				pageHTML = pageHTML + "<div class=\"showcase-content\">";
				pageHTML = pageHTML + "<div class=\"showcase-content-wrapper\">";
				pageHTML = pageHTML + ArticleHTMLArray[i]
				pageHTML = pageHTML + "</div>";
				pageHTML = pageHTML + "</div>";
				pageHTML = pageHTML + "</div>";

}

$('#showcase').html(pageHTML);

}

function renderShowCase() {

//alert('Showcase Applied');

$("#showcase").awShowcase(
		{
			content_width:			550,
			content_height:			470,
			fit_to_parent:			false,
			auto:					true,
			interval:				3000,
			continuous:				false,
			loading:				true,
			tooltip_width:			200,
			tooltip_icon_width:		32,
			tooltip_icon_height:	32,
			tooltip_offsetx:		18,
			tooltip_offsety:		0,
			arrows:					false,
			buttons:				true,
			btn_numbers:			true,
			keybord_keys:			true,
			mousetrace:				false, /* Trace x and y coordinates for the mouse */
			pauseonover:			true,
			stoponclick:			false,
			transition:				'hslide', /* hslide/vslide/fade */
			transition_delay:		0,
			transition_speed:		500,
			show_caption:			'onload', /* onload/onhover/show */
			thumbnails:				false,
			thumbnails_position:	'outside-last', /* outside-last/outside-first/inside-last/inside-first */
			thumbnails_direction:	'vertical', /* vertical/horizontal */
			thumbnails_slidex:		1, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
			dynamic_height:			false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
			speed_change:			true, /* Set to true to prevent users from swithing more then one slide at once. */
			viewline:				false, /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
			custom_function:		null /* Define a custom function that runs on content change */
		});
	}

</script>
<div style="width: 550px; margin: auto;">
	<div class="showcase" id="showcase">
	</div>
</div>

Step 4 - Modify the code to suit your environment.

Make the following changes in the code:

Update all of the view fields in the CAML query to match your field names. So if the field I call "HTML" is called "Announcement" in your source list, change all instances of HTML to "Announcement". Make sure you change the names in all locations, use search and replace.
Update the name of the announcements list to match the name of your source list. In the code above, our list is called "spotlight".
Refer to the github link at the beginning of this article to understand the showcase property customizations. You will want to modify the width and height to fit your page.

Save the content editor web part code in SharePoint, and close the web part configuration window. Refresh the page to review the functionality. If the page doesn't work, first ensure you have the libraries correctly linked by uncommenting the "alert('jquery loaded')" line by removing the two forward slashes. Save you changes and refresh the page. If an alert pops up, jquery is working, if not, then that is the problem.

The other potential source of issues is within the field names. Be sure your field names are the internal SharePoint names for those items, rather than the name displayed on the list. If you are unsure what the internal name is, open properties for that list, and hover over the column names. The link that appears will contain the actual field name at the end.

The field looks like "Start Date" but when we hover over the field we see this URL

/_layouts/FldEdit.aspx?List=%7B06826D90%2D478A%2D423F%2DA762%2DDFCDD7005964%7D&Field=StartDate

we know the actual field name is "StartDate".

Steve's SharePoint Nuggets

Wednesday, June 13, 2018

Create a dynamic content slider against a SharePoint list using jQuery. SharePoint 2007, 2010, 2013

Step 1: Download supporting libraries.

Step 2: Update your news or announcements library.

Step 3: Add and populate the content editor web part.

Step 4 - Modify the code to suit your environment.

1 comment:

Post a Comment