Client Object Model, Sharepoint

Using the sharepoint Client Object Model (Client OM or ECMA Script) and Jquery to display List Items any way you want.

Hi all

I haven’t created a Post in a while just because i’ve been soo busy playing around with the Sharepoint 2010 Client Object model. I find it a fantastic addition to the Sharepoint API and together with Jquery it opens up a new world of interactive great looking client side loading beauty!

I thought i’d create a post on a couple of things I did with the Client OM and i’ll share some Scripts with you.

Using Jquery to create a FAQ wich answers sliding open by clicking on the Title

Ok, so here’s the end result:

Clicking on the Questions, will slide open/close the answers.. Not very high tech or great looking, but you can apply your own styling and/or Jquery effects.

So, how does it work?

  1. Create yourself a FAQ’s list
    1. Use a Sharepoint Custom List and call it ‘FAQs’
    2. Edit the List Settings and Change your ‘Title’ column name to ‘Question’
    3. Add a new Column and call it ‘Answer’ . Set your column type to ‘Multiple Lines of Text’ > Enhanced rich text (Rich text with pictures, tables, and hyperlinks) and also make it required.
    4. Your List Columns Should now look like this:
  2. Next up, fire up Sharepoint Designer. (DONT Worry, we’re not going to draw pictures or try to figure out how to create Master pages……)
    1. Navigate to “Site Assets”  in the site/web where you want to host your FAQs
    2. Right click and Select New > Create a File called “FAQs.htm”
    3. Paste the following HTML/CSS/Javascript (Note there are two seperate code blocks below. I just split it up for display purposes, but you can put both in the same HTM File)
<div id="faqDiv">Loading...</div>
<script type="text/javascript" src=""></script>

<style type="text/css">

.tbltmpleftimg {
align: center

.hidden {
display: none;

border: 1px #bfbfbf solid;

margin-right: 10px;
padding-right: 10px;
margin-left: 10px;
padding-left: 10px;

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(initializeScript, "sp.js");

// ----   SP VARIABLES   -----------------------------------------
var clientContext = null;
var spWebobj = null;
var spListobj = null;
var spListobjItems = null;
var liCount;

// -----------------------------------------------------------
function initializeScript() {
clientContext = new SP.ClientContext.get_current();
spWebobj = this.clientContext.get_web();

spListobj = spWebobj.get_lists().getByTitle("FAQs");

var spCamlQuery = new SP.CamlQuery();
var spViewXML = '<View><Query /></View>';

spListobjItems = spListobj.getItems(spCamlQuery);
clientContext.executeQueryAsync(onSuccess, onFail);

function onSuccess() {

liCount = spListobjItems.get_count();
var html = '<table width="100%">';
html += '<tr><td align="center"><h1>FAQs</h1></td><td>&nbsp;</td></tr>';
html += '<td colspan="2" style="margin-left: 10px; padding-left: 10px">';

if (liCount > 0) {

// populate content

for (x = 0; x < liCount; x++) {
var listItem = spListobjItems.itemAt(x);

var Question = listItem.get_item('Title');
var Answer = listItem.get_item('Answer');

var questionHTML = '<div><a href=\"#paragraph' + x
+ '\" onclick=\"toggleSlidingDiv(\'paragraph' + x + '\');"';
questionHTML+= ' style=\"cursor: hand;\" class=\"scroll\"><h3>+ ' + Question + '</h3></a>';

var answerHTML = '<div id=\"paragraph' + x + '\">' +
'<div>' + Answer + '</div></div>';

html += questionHTML;
html += answerHTML;
html += '</td></tr></table>';

function onFail() {
alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
function toggleSlidingDiv(id) {
$('#' + id).animate({"height": "toggle"}, { duration: 1000 });

Bascically the code above does the following:
Query’s a Sharepoint List using Client OM (Ajax)
Iterates through the returned results and writes it as HTML
Using Jquery, apply some fancy animation.

Lastly, drop a Content Editor Web part on any Sharepoint webpart page, and add the FAQs.htm as the file you want to reference.

That’s it, we’re done!
This is a pretty basic example, but I hope it’s helped you see what is possible with Sharepoint Client Object Model.

Just a note: Most of original code above was written by Bennie. I made a few adjustments to the HTML for displaying in a FAQ style and also added JQuery effects.


8 thoughts on “Using the sharepoint Client Object Model (Client OM or ECMA Script) and Jquery to display List Items any way you want.

    1. Hi. Good Question. The official documentation states that it’s required to dispose of any newly created objects, however, i found that Sharepoint throws an exception when trying to dispose of it. Lately, i just dont dispose of at all. I know that’s probably not the right way of doing things, but hey, sometimes it’s the only thing.

  1. I’m impressed, I must say. Rarely do I encounter a blog that’s equally educative and entertaining,
    and without a doubt, you’ve hit the nail on the head.
    The issue is something that not enough folks are speaking
    intelligently about. I’m very happy I stumbled across this during
    my search for something regarding this.

  2. Wonderful post however , I was wondering if
    you could write a litte more on this topic? I’d be very thankful if you could elaborate a little bit further.
    Thank you!

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s