SharePoint Journey: Populate List Data by using SharePoint 2010 ECMA Scripts without writing custom code in Visual Studio

Thursday, March 19, 2015

Populate List Data by using SharePoint 2010 ECMA Scripts without writing custom code in Visual Studio

Sometimes we are into a requirement that we need to populate List items and to show into some HTML Tags/Table arrangement. In this case our first choice remains a Custom Web Part.

But what if the client doesn’t want the custom web part and wants to achieve this Out of the Box.

SharePoint 2010 has a wonderful feature with the help of which we can achieve this requirement without using Visual Studio - "ECMA Scripts".

Below are the steps by following which we can easily populate the list data and arrange them in HTML tags accordingly.

Step 01: Create a custom list and name it as GettingStarted.

Step 02: Add “Title, Description, ImageUrl” columns to it.

Step 03: Click on Edit Page link in the ribbon and add Content Editor Web part.

Step 04: Add the below function in the content editor web part on the top.

<script type="text/javascript">

ExecuteOrDelayUntilScriptLoaded(PopulateItem, "sp.js");

This step is required because we will be using ECMA scripts to populate the List Items and these scripts have to be loaded before we made a call to these scripts. Here PopulateItem is the name of JavaScript method which contains the ECMA script code.

Step 05: Now add the below given JavaScript Function to the content Editor Web part

function PopulateItem()

{

var context = new SP.ClientContext.get_current();

var web = context.get_web();

var list = web.get_lists().getByTitle('GettingStarted');

var query = SP.CamlQuery.createAllItemsQuery();

allItems = list.getItems(query);

context.load(allItems, 'Include(Title,Description,ImageUrl)');

context.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failed));

}

function success() {

var sHtml = "";

var ListEnumerator = this.allItems.getEnumerator();

while(ListEnumerator.moveNext())

{

var currentItem = ListEnumerator.get_current();

var title = currentItem.get_item('Title');

var imgUrl = currentItem.get_item('ImageUrl');

var Description = currentItem.get_item('Description');

sHtml += '<table><tr><td><img src="' + imgUrl + '" height="55px" width="55px"></td><td><table><tr><td valign="top"><div class="fieldsTitle">'+ title +'</div></td></tr><tr><td valign="top">'+ Description +'<a href="/">Read More >></a></td> </tr><tr><td></td></tr></table></td></tr></table>';

}

document.getElementById('MainDiv').innerHTML =sHtml;

}

function failed(sender, args) {

alert("failed. Message:" + args.get_message());

}

Here MainDiv is the ID of the Div for which we will be replacing the inner HTML with the HTML

Step 06: Add the end of script tag

</script>

Step 07: Add the HTML part in content editor webpart accordingly. Below is one example. In the below HTML one div with the ID “MainDiv” is present which we used in the Jquery tag to find the DIV for adding the dynamically created HTML with the list data.

<td class="boxTBarBG" valign="middle" align="left" style="width: 98%"><div class="boxHead">Getting Started</div></td>

<div class=" MainDiv " id=" MainDiv"></div>

</div></td>

Step 08: Now save the content of Content Editor webpart and save the page. You will see the list items from the list.

In this way we can populate list items from the Sharepoint List using Sharepoint 2010 ECMA scripts.