Search This Blog

Tuesday, November 15, 2011

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.

<table cellspacing="0" cellpadding="0" width="400" border="0"><tbody><tr><td class="boxTBarBG " align="left" style="width: 1%"><div class="boxTLcon"></div></td>
<td class="boxTBarBG" valign="middle" align="left" style="width: 98%"><div class="boxHead">Getting Started</div></td>
<td class="boxTBarBG" align="right" style="width: 1%"><div class="boxTRcon"></div></td></tr>
<tr><td class="borderL"></td>
<td style="background-color: #f4f5f7"><div>
<div class=" MainDiv " id=" MainDiv"></div>
</div></td>
<td class=" borderR"></td></tr>
<tr><td class="boxBBarBG" align="left" style="width: 1%"><div class="boxBLcon"></div></td>
<td class="boxBBarBG" style="width: 98%"></td>
<td class="boxBBarBG" align="right" style="width: 1%"><div class="boxBRcon"></div></td></tr></tbody></table>
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.

Hope it will be a help to you!
Ravish

3 comments:

  1. I need some urgent help to create some ECMA scripts for my project. I have an html map of europe with 39 countries marked out in hotspots. I have a SharePoint 2010 list with 3 fields; country, description, and url.

    I want to create an ECMA script to create a pop up with the country name and description when a user hovers over that country on the html map. I will be pasting this code into a Content Editor Web Part for use on my Intranet. I need to retrieve and filter the list data, then bind to the onmouseover event to trigger the pop up with the information.

    Can anyone help me with the script, I am new to Javascript.

    ReplyDelete
  2. hi man,

    can you please supply the css classses u used in the table???

    thanx

    ReplyDelete
    Replies
    1. Hope it will help you....

      .fields{
      font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; border-color:#c8d9e3; border-style:solid; border-width:1px; height:16px; width:150px;
      }
      .fieldsTitle{
      padding:7px 5px 5px 5px;font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:#666666;float:left;
      }
      .fieldscontr{
      padding:5px 5px 5px 5px;font-family:Arial, Helvetica, sans-serif; font-size:10px; font-weight:normal; color:#666666;
      }
      .boxTBarBG{
      background-image:url(images/boxTBarBG.gif);
      background-repeat:repeat-x;

      }
      .boxTLcon{
      background:url(images/boxTLcon.gif);
      width:6px;
      height:23px;
      }
      .boxTRcon{
      background:url(images/boxTRcon.gif);
      width:6px;
      height:23px;
      }

      .boxHead{
      font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:#FFF; float:left; padding:3px 0px 0px 0px;
      }

      .boxBBarBG{
      background-image:url(images/boxBBarBG.gif);
      background-repeat:repeat-x;
      font-family:Arial, Helvetica, sans-serif; font-size:10px; font-weight:normal; color:#666769;

      }
      .boxBLcon{
      background:url(images/boxBLcon.gif);
      width:6px;
      height:23px;
      }
      .boxBRcon{
      background:url(images/boxBRcon.gif);
      width:6px;
      height:23px;
      }
      .borderR{border-right-style:solid; border-right-color:#d1d2d4; border-right-width:1px;background-color:#f4f5f7}
      .borderL{border-left-style:solid; border-left-color:#d1d2d4; border-left-width:1px;background-color:#f4f5f7}
      .boxTitleArc{background:url(images/boxTitleArc.gif); width:50px; height:23px;}

      Delete