Using the SharePoint Client Object Model and Jquery to display List Items any way you want.

Hi all

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 with 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 flash, but you can apply your own styling and/or Jquery effects.

So, how does it work?

  1. Create yourself a FAQ’s list
  2. Use a SharePoint Custom List and call it ‘FAQs’
  3. Edit the List Settings and Change your ‘Title’ column name to ‘Question’
  4. 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.
  5. Your List Columns Should now look like this:
  6. Next up, fire up SharePoint Designer. (Don’t Worry, we’re not going to draw pictures or try to figure out how to create Master pages……)
  7. Navigate to “Site Assets”  in the site/web where you want to host your FAQs
  8. Right click and Select New > Create a File called “FAQs.htm”
  9. 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)
  10. <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">
    <p>.tbltmpleftimg {<br />align: center<br />}</p>
    <p>.hidden {<br />display: none;<br />}</p>
    <p>.tableStyle{<br />border: 1px #bfbfbf solid;<br />}</p>
    <p>.myparagraph{<br />margin-right: 10px;<br />padding-right: 10px;<br />margin-left: 10px;<br />padding-left: 10px;<br />}<br /></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 = '</p>
    <p>
    </p>
    <table width="100%">';
    html += '</p>
    <p>
    </p>
    <tr>
    </p>
    <td align="center"><p>
    </p>
    <h1>FAQs</h1>
    <p>
    </td>
    <p>
    </p>
    <td>&nbsp;</td>
    <p>
    </tr>
    <p>
    </p>
    <p>';
    html += '</p>
    <p>
    </p>
    <td colspan="2" style="margin-left: 10px; padding-left: 10px">
    <p>';
    
    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 = '</p>
    <p>
    </p>
    <div>
    <p><a href=\"#paragraph' + x + '\" onclick=\"toggleSlidingDiv(\'paragraph' + x + '\');"'; questionHTML+= ' style=\"cursor: hand;\" class=\"scroll\"></p>
    <p>
    </p>
    <h3>+ ' + Question + '</h3>
    <p>
    </p>
    <p></a>';
    
    var answerHTML = '</p>
    <p>
    </p>
    <div id=\"paragraph' + x + '\">
    <p>' +
    '</p>
    <p>
    </p>
    <div>' + Answer + '</div>
    <p>
    </div>
    <p>
    </p>
    <p>';
    
    html += questionHTML;
    html += answerHTML;
    }
    html += '</td>
    <p>
    </tr>
    <p>
    </table>
    <p>
    </p>
    <p>';
    $('#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>

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

Leave Comment

Your email address will not be published. Required fields are marked *