Home > 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.

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="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<style type="text/css">

.tbltmpleftimg {
align: center
}

.hidden {
display: none;
}

.tableStyle{
border: 1px #bfbfbf solid;
}

.myparagraph{
margin-right: 10px;
padding-right: 10px;
margin-left: 10px;
padding-left: 10px;
}
</style>

<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>';
spCamlQuery.set_viewXml(spViewXML);

spListobjItems = spListobj.getItems(spCamlQuery);
clientContext.load(spWebobj);
clientContext.load(spListobjItems);
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>';
$('#questionsDiv').html(html);
}
}

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

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.

About these ads
  1. Cindrella
    February 20, 2012 at 12:39 pm

    When is it required to dispose the clientcontext object in ecma? pls explain

    thx

    • February 20, 2012 at 4:29 pm

      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.

  2. satish
    January 30, 2013 at 7:41 pm

    Thank you, for your explanation this will help for the beginners.

  3. October 10, 2014 at 8:22 am

    Touche. Solid arguments. Keep up the good work.

  1. October 23, 2013 at 4:51 am

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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: