Thursday, August 7, 2014

Reading a SharePoint List using JavaScript Object Model

Using JavaScript is the buzz since the introduction of the SharePoint apps. The JavaScript client side API has improved quite a lot in SharePoint 2013 and this is the only option if you are developing a SharePoint hosted app. When comparing with the server-side object model, I did not found many conceptual differences in the API. If we are to access a list, what we need to do is refer the current site through the current context and then refer the list available in the current site. 

Here is the div tag available in my Default.aspx file which contains an unordered list inside. Forget about the other items later. Will discuss about it in next post.


<div>
<ul id="ToDoItems"></ul>
</div>


Here are some important objects created in the JavaScript API and look how similar they are with the Server-side object model.


//Creates a client context object
var context = SP.ClientContext.get_current();
// Refer the current site through the accessing client context
var web = context.get_web();
//Gets the currently logged in user to the current site
var user = web.get_currentUser();
//Gets all the lists available in the site
var lists = web.get_lists();
// defined for setting the list items later 
var itemCollection;

Now lets see how to pick a single list from the available all lists. 

function loadToDoItems() {

// Gets the list by title
var toDoItemList = lists.getByTitle("ToDoList");

// Check whether list exists or accessible to current user
if (toDoItemList !== null) {
        // Create a CAML query object here. Since we do not need any filtering, go with the empty constructor
var camlQuery = new SP.CamlQuery();
        // assign all the queried list items to a collection
itemCollection = toDoItemList.getItems(camlQuery);
context.load(itemCollection);
        // Actual querying happens here. API connects to the server and request data asynchronously.
        // Here I have defined a function to be called on success and another to be called if fail
context.executeQueryAsync(loadToDoItemsSuccess, loadToDoItemsFail);
}

}

Here goes the success function.

function loadToDoItemsSuccess() {
        // Creates an enumerator from the item collection available
var listItemEnumerator = itemCollection.getEnumerator();
       // Here is an unordered list that I have created in the UI
var toDoUnorderedList = document.getElementById('ToDoItems');

       // Clears if there are any unordered list items available in the unordered list (HTML list)
if (toDoUnorderedList.hasChildNodes()) {
while (toDoUnorderedList.childNodes.length >= 1) {
toDoUnorderedList.removeChild(toDoUnorderedList.firstChild);
}
}

        // This will loop through the list items available in the collection
while (listItemEnumerator.moveNext()) {
                // Gets the current list item
var oListItem = listItemEnumerator.get_current();
                // Select the title field value of the list item. Needed field name should be mentioned here.
var title = oListItem.get_item('Title');
               // Adds a new HTML Unordered list item to the list
var liItem = document.createElement('li');
               // Set the list item title
liItem.innerHTML = title;
               // Append to the list
toDoUnorderedList.appendChild(liItem);
}
}

My fail function will simply give an alert with the error message and stack trace

function loadToDoItemsFail(sender, args) {
alert('Loading To Do Items failed: \n' + args.get_message() + '\n' + args.get_stackTrace());
}

So at the end my list items will be printed like this.


No comments:

Post a Comment