SPServices Stories #14: Create a Slide Show in SharePoint 2010 using an Announcements List and SPServices
- SPServices Stories #1 – How to Start a Workflow on Multiple Items in a List
- SPServices Stories #2 – Charting List Data with HighCharts
- SPServices Stories #3 – AddWebPart Method of the WebPartPages Web Service
- SPServices Stories #4 – Using SPServices to Process Files from a Non-Microsoft Source
- SPServices Stories #5 – Gritter and Sharepoint: Integrate Nifty Notifications in Your Intranet!
- SPServices Stories #6 – Custom Quizzing System
- SPServices Stories #7 – Example Uses of SPServices, JavaScript and SharePoint
- SPServices Stories #8 – CEWP, Nintex, jQuery, SPServices and the Client API
- SPServices Stories #9: Developing with Client-side Technologies: jQuery, REST, SPServices and jsRender
- SPServices Stories #10 – jqGrid Implementation Using SPServices in SharePoint
- SPServices Stories #11 – Using SPServices and jQuery to Perform a Redirect from a SharePoint List NewForm to EditForm
- SPServices Stories #12 – SharePoint and jQuery SPServices in Education: A Case Study
- SPServices Stories #13: Durandal SP3: Developing SharePoint SPAs Made Easy
- SPServices Stories #14: Create a Slide Show in SharePoint 2010 using an Announcements List and SPServices
- SPServices Stories #15: Custom Client-side Calendar Query for Office 365 SharePoint Site Using SPServices jQuery Library
- SPServices Stories #17: Multiple Form Fields Autocomplete for SharePoint 2010/2013 using JavaScript
- SPServices Stories #18 – Retrieve Managed Metadata Using JavaScript and SPServices
- SPServices Stories #19 – Folders in SharePoint are as necessary as evil. Make the best of it using jQuery and SPServices.
- SPServices Stories #20 – Modify User Profile Properties on SharePoint Online 2013 using SPServices
- SPServices Stories #22 : SPServices SharePoint Attachments in Internet Explorer 9
- SPServices Stories #21 – Redirect If User Clicked a Button Previously
Introduction
It’s been a while since I’ve posted a new SPServices Story. This one was sitting in my draft bucket for way too long, so a big sorry goes out to Trace Armstrong (@TraceBArmstrong).
Trace wrote this post about using SPServices to drive a slideshow using an announcements list as the source. This is the sort of common use case that SPServices often sits behind as part of the underlying plumbing.
If you’re using SharePoint 2013 or Office365 running the 15 wave, you might say that one should use REST instead, and that’s an option of course. The nice thing about using SPServices for stuff like this is that if you are on SharePoint 2007 or 2010 or 2013, the SPServices calls are exactly the same. So in a sense, we’ve got easily upgraded code.
Note: I’ve made a few small changes to Trace’s code. One change was to replace .find(“[nodeName=’z:row’]”) with .SPFilterNode(“z:row”). This is required to make things work with up to date versions of jQuery.
Create a Slide Show in SharePoint 2010 using an Announcements List and SPServices
By Trace Armstrong
Recently, I had a client who wanted a different slide show for their SharePoint 2010 intranet home page. The original slide show ran using a custom web part that integrated the Nivo Slider, a jQuery based solution. The solution worked great but the person maintaining the news portion of the slider needed a no-code solution for easier updating.
I searched the Internet for a solution and came across this blog (https://www.nothingbutsharepoint.com/sites/eusp/Pages/Creating-your-own-Content-Slider-for-SharePoint.aspx) by Eric on http://www.nothingbutsharepoint.com. The solution was similar to what I needed but my task also required a place for slideshow images.
The first step was using the Announcements list for the announcements slider. I then created two custom list columns, “Image” and “Body”. The “Image” column is a “Hyperlink or Picture” column type and “Body” is a “multiple lines of text” column type.
Using Eric’s model, I referenced SP Services, jQuery, jShowoff, and set about editing the JavaScript code to pull an image column from the Announcements list.
The revised JavaScript looks like this:
$(document).ready(function () {
var emptyResults = "<div class='sliderDiv'><p class='announceTitle'>Company Name</p></div>";
var maxVal = 0;
var toShow = false;
var heightTemp = 0;
$().SPServices({
operation : "GetListItems",
async : false,
listName : "Announcements",
CAMLViewFields : "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Image' /><FieldRef Name='Body' /><FieldRef Name='Modified' /></ViewFields>",
CAMLQuery : "<Query><OrderBy><FieldRef Name='Created' /></OrderBy>" + "<Where><Or><Geq><FieldRef Name='Expires' /><Value Type='DateTime'>" + "<Today /></Value></Geq><IsNull><FieldRef Name='Expires' /></IsNull></Or></Where></Query>",
completefunc : function (xData, Status) {
var itemCount = $(xData.responseXML).SPFilterNode("rs:data").attr("ItemCount");
if (itemCount > 0) {
toShow = true;
$(xData.responseXML).SPFilterNode("z:row").each(function () {
var modDate = $(this).attr("ows_Modified");
modDate = modDate.substr(5, 2) + "/" + modDate.substr(8, 2) + "/" + modDate.substr(0, 4);
var titleHtml = "<div class='sliderDiv'><p class='announceTitle'>" + $(this).attr("ows_Title") + "</p>";
var imgBody = "<img class='anImage' src='" + $(this).attr("ows_Image").split(',')[0] + "'></img>";
var bodyHtml = "<p class='announceBody'>" + $(this).attr("ows_Body") + "</p>";
var expireHtml = "<p class='announceFooter'>Modified: <span>" + modDate + "</span></p></div>";
//div announcements is added by jshowoff js.
$("#announcements").append(titleHtml + imgBody + bodyHtml + expireHtml);
});
} else {
$("#announcements").append(emptyResults);
}
} //completefunc
}); //SPServices
if (toShow == true) {
$('.sliderDiv').each(function () {
heightTemp = $(this).height();
if (heightTemp > maxVal) {
maxVal = heightTemp
};
});
$('#announcements').css('min-height', maxVal);
$('#announcements').jshowoff({
speed : 12000,
changeSpeed : 3000,
controls : true,
animatePause : false,
effect : 'fade',
cssClass : true,
links : true
});
} //if stm
}); //ready
I edited a few syntax issues that were unnecessary to the solution and created/referenced a new variable, “imgBody”. The variable adds the img class “anImage” and retrieves the slide show image from the list column “Image”. One of the problems in the solution was SharePoint adding a comma to the end of the file name. The split property removes the comma and the image displayed as intended on the site.
The solution appears like this on the client’s main page.
This solution enabled the company to have a no-code update to their main page news slider using an image library and the Announcements list.
Hi Trace, Nice job! Question: Will this work in SharePoint 2013? I am planning to create an Announcements list, add the two custom columns and then add your script in a Script Editor Web Part…Thanks a lot for your time and help! Mima
Mima, I haven’t yet tried it in 2013 but it should work. If you use the new version of SPServices for SP 2013, it should still retain the same basic functionality needed for this solution.
Give it a try and let us know how it works. I’ll try to carve out some time later this week to test in 2013 if it doesn’t work for you.
Thanks!
From an SPServices perspective, it absolutely will work. Trace is using GetListItems to retrieve the content and then the jshowoff slider.
If you want to get all “modern”, you could switch from using SPServices and GetListItems to a REST call. All in all, this is the type of solution that works well on any version of SharePoint.
M.
Excellent post! I find myself doing more and more work in client script as opposed to the more traditional server side code.
Hi Trace and Marc, Thanks for your comments. Sorry but I am new to SharePoint altogether, so I am working on getting this to work… I am using jquery-1.8.1.min.js, jquery.SPServices-2013.01.js and jshowoff.js. Created an announcements list with the Image custom column, and Body is an existing column already. Added a Script Editor WP. Please let me know to what email address I can send my script since I cannot post it here. Thanks for your help and sorry to bother you. I know you must be very busy :-( PS. My email is ampimartinez at yahoo
Hi Marc,
I am trying to implement the cascading dropdown in sharepoint 2013. I am using jquery.SPServices-2013.01.js & jquery-1.7.2.min.js but cascading dropdown is not working.
I also tried with jquery.SPServices-2013.01.min.js but could not resolve the issue. same time if i use a previous version of SP services (jquery.SPServices-0.7.2.min.js), my cascading drodpwn is working in SharePoint 2010 environment.
Can you please help me on this.
yogendra:
Can you post your question in the SPServices discussions and post more details? There’s not enough here to go on.
M.
I have the slide show working perfectly; however, I’m missing the styling that the example uses. AKA, the bottom controls (play, pause, etc..) are presented as plain text. Could someone please tell me where I can find the correct css file to style the controls.
John, I would think you will use the jshowoff.css…
Could you please share how you setup the slide show?
I am using SharePoint 2013. Using:
* jquery-1.10.2.min.js
* jquery.SPServices-2013.02.js
* jshowoff.min.js
Added a Script Editor WP, and made reference to these above. Do I need to add the Announcements list to the page too? Right now, with/without it I do not get it to work. I tested & the script is loading though… Please any help is highly appreciated! Thank you!
I resolved my own issue, I had a syntax error in the CSS tag. Mima, I suggest you use an older version of jquery. The SPServices plug-in doesn’t work with the latest (1.10.2) jQuery version. I used 1.7.2 on my slide show.
Hi John, I’m glad it worked for you!
I changed the jQuery to 1.7.2 and now I get ‘undefined’.. Are you using SharePoint 2013? Is there any way you could please post your code? I will highly appreciate your help!
.sliderDiv {margin-left:5px; overflow:hidden;margin-top:5px;}
.announceTitle {font-weight:bold; border-bottom:3px red solid;}
.announceBody {padding-left:20px;}
.announceFooter {font-size:8pt; color:gray;}
.announceFooter span {font-style:italic;}
$(document).ready(function () {
// Check that jQuery is loaded:
// alert(typeof($));
var emptyResults = “There are no current announcements.”;
var maxVal = 0;
var toShow = false;
var heightTemp = 0;
$().SPServices({
operation : “GetListItems”,
async : false,
listName : “Announcements”,
CAMLViewFields : “”,
CAMLQuery : “” + “” + “”,
completefunc : function (xData, Status) {
var itemCount = $(xData.responseXML).SPFilterNode(‘rs:data’).attr(“ItemCount”);
if (itemCount > 0) {
toShow = true;
$(xData.responseXML).SPFilterNode(‘z:row’).each(function () {
var modDate = $(this).attr(“ows_Modified”);
modDate = modDate.substr(5, 2) + “/” + modDate.substr(8, 2) + “/” + modDate.substr(0, 4);
var titleHtml = “” + $(this).attr(“ows_Title”) + “”;
var imgBody = “”;
var bodyHtml = “” + $(this).attr(“ows_Body”) + “”;
var expireHtml = “Modified: ” + modDate + “”;
//div announcements is added by jshowoff js.
$(“#announcements”).append(titleHtml + imgBody + bodyHtml + expireHtml);
});
} else {
$(“#announcements”).append(emptyResults);
}
} //completefunc
}); //SPServices
// Check that a specific function is loaded:
alert(typeof(completefunc));
if (toShow == true) {
$(‘.sliderDiv’).each(function () {
heightTemp = $(this).height();
if (heightTemp > maxVal) {
maxVal = heightTemp
};
});
$(‘#announcements’).css(‘min-height’, maxVal);
$(‘#announcements’).jshowoff({
speed : 12000,
changeSpeed : 3000,
controls : true,
animatePause : false,
effect : ‘fade’,
cssClass : true,
links : true
});
} //if stm
}); //ready
//
//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2013.01/jquery.SPServices-2013.01.min.js
/Scripts/jquery.jshowoff.min.js
link type=”text/css” href=”/Scripts/jshowoff.css”
Mima:
Is there a reason you are not populating the CAML view and query fields? I want to make two suggestions:
1) populate the CAML view and query fields just like the article
2) debug your web page using IE developer tools – hit F12, select the script tab, and refresh the page. The script debugger will show exactly where the “undefined” error is occurring.
Hi John,
Thanks for your advice.
About CAML view: It totally went over my head.. I am new to this, so I am not sure how to proceed…I found this: https://spcamlviewer.codeplex.com/
However, I am not sure how to proceed… Do you have any info/links you could guide me with? Sorry about taking your time, and thanks for your help!
Mima:
Take a look at Karine Bosch’s CAML Designer for SharePoint 2010. It’s the simplest thing out there and great help.
http://karinebosch.wordpress.com/my-articles/caml-designer/
M.
Hi Marc,
Can you pls provide the link to download the entire source files (like the java script , slider code, css, images etc). I tried to see Erics blog but its not available any more.
Thanks in advance for your help …
Winz:
Sorry, but that’s the way the Internet works. Some things disappear and others can be lost. I think you should be able to infer the majority of it from Trace’s post.
M.
You need SPServices (found on this website)
jshowoff: http://ekallevig.com/jshowoff/
HTML and JS firing commands that looks something like what Mima posted above.
From there you should be able to figure it out.
Good luck!
Thanks, Trace!
M.
sure …will give a try ..thx for your guidance :)