Wednesday, July 7, 2010

Show list items through ECMAScript and jQuery

1) Create an announcement list named "Announcements"


clip_image002


2) Create some items in the list and set some of the items Expires date to today and some to a nother date.


clip_image004


2) Through SharePoint deisnger create a new page layout.


3) Add this code to the page



<%@ Page language="C#" Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full" %>
<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>


<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
<SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<SharePointWebControls:ScriptLink Name="SP.debug.js" runat="server" OnDemand="true" Localizable="false"/>
<script src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.4.2.min.js%22 type="text/javascript"></script>
<script type="text/javascript">


function GetAnnoucmentItems()
{
var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var annoucmentlist = web.get_lists().getByTitle("Announcements");
var camlQuery = new SP.CamlQuery();
var camlString = '<View><Query><Where><Eq><FieldRef Name="Expires" /><Value Type="DateTime"><Today /></Value></Eq></Where></Query><RowLimit>100</RowLimit></View>'
camlQuery.set_viewXml(camlString);


this.listItems = annoucmentlist.getItems(camlQuery);


clientContext.load(this.listItems,'Include(Title, Body)');
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded()
{
var listItemEnumerator = this.listItems.getEnumerator();
this.listCount = this.listItems.get_count()-1;
if(this.listItems.get_count() != 0)
{
ShowAnnouncement(0);
}


}
function onQueryFailed(sender, args)
{
alert('faild');
}
function ShowAnnouncement(index)
{
if(index != 0)
{
$("#text").hide();
}
$("#text").fadeIn("slow");
var htmlString = this.listItems.get_item(index).get_item("Title") + "<br />" + this.listItems.get_item(index).get_item("Body")
$("#text").html(htmlString);
if(index < this.listCount)
{
++index
setTimeout("ShowAnnouncement(" + index + ")",3000);
}
else
{
setTimeout("ShowAnnouncement(0)",3000);
}
}
</script>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(GetAnnoucmentItems, "sp.js");
</script>
<div id="text" />
</asp:Content>


4) Create a new page based on the page layout.


clip_image006


5) And wola.


clip_image008

2 comments:

  1. Hi There,

    Brilliant post. 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 you help me with the script, I am new to Javascript.

    ReplyDelete
  2. Make your images larger, they are blurry and small.

    ReplyDelete