Thursday, July 03, 2008

How access SharePoint (MOSS) List data using JavaScript in SharePoint (MOSS):


How access SharePoint (MOSS) List data using JavaScript in SharePoint (MOSS):

In the SharePoint (MOSS) some time you faced the requirements in which by using native SharePoint (MOSS) functionality you need to provide the best solution to the client. Suppose one of the example of this type of requirement is: Without using any server side code you need to display the data from the SharePoint (MOSS) list in the master page. In the SharePoint (MOSS) master page you will be not able to add any web part ( for example SharePoint List View Web Part). In this scenario you will be not able to write any code in the Microsoft Language (e.g. C#.net). At that type of scenario only one option left for the programmer i.e. client side code/client side script i.e. JAVA SCRIPT. Now, our motive is to write the script using JavaScript to fetch/access data from the SharePoint (MOSS) List. In this solution we used the SharePoint (MOSS) List web service to access data from SharePoint (MOSS) List (Custom list/Link List/Document Library/….).

For example I have one SharePoint (MOSS) List called RequestToDate with column name ‘Title’ and my requirement is to display data from the Title column. The JavaScript Code for this are given below:

<script type="text/javascript" language="javascript">

//Complete URL of the page in which you write this code
// http://amitkumarmca04.blogspot.com/sites/MYSITE/AMIT.aspx
var siteCompleteURL=document.URL;

//Split the complete URL from ‘//’
// componentList[0]=’http:’
// componentList[1]= ‘amitkumarmca04.blogspot.com/sites/MYSITE/AMIT.aspx’
componentList=siteCompleteURL.split('//');

//Split the URL (without //) with ‘/’
// siteURL[0]= ‘amitkumarmca04.blogspot.com’
// siteURL[1]=’ sites’
// siteURL[2]=’ MYSITE’
// siteURL[3]=’ AMIT.aspx’
siteURL=componentList[1].split('/');


var slideImagesArr=new Array();

var slideImagesDisplayArr=new Array();

var slideImageLinksArr=new Array();

var baseURL = componentList[0] + "//" + siteURL[0] + "/";
// baseURL=’http:’ + "//" + ‘amitkumarmca04.blogspot.com’ + "/";

var baseLibURL = componentList[0] + "//" + siteURL[0] + "/" + "sites/ MYSITE /Lists/RequestsToDate/DispForm.aspx?ID=";
// baseLibURL =’http:’ + "//" + ‘amitkumarmca04.blogspot.com’ + "/" + ‘sites/MYSITE/Lists/RequestsToDate/DispForm.aspx?ID='


var siteURL = componentList[0] + "//" + siteURL[0] + "/" + "sites/ MYSITE /";
// siteURL =’http:’ + "//" + ‘amitkumarmca04.blogspot.com’ + "/" + ‘sites/MYSITE/’

//GUID of RequestToDate list
var listGUID = "6f9d3029-120e-4177-9f9b-bdeae0598df2";

var str = '';

function GetRootUrl()
{
return siteURL;
}

function getNodeValue(obj,tag)
{
return obj.getElementsByTagName(tag)[0].firstChild.nodeValue;
}

function QueryListEx()
{
var a = new ActiveXObject("Microsoft.XMLHTTP");

if(a == null) return null;

a.Open("POST", GetRootUrl() + "_vti_bin/Lists.asmx", false);
a.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
a.setRequestHeader("SOAPAction", "http://schemas.microsoft.com/sharepoint/soap/GetListItems");


var d =
"<?xml version=\"1.0\" encoding=\"utf-8\"?><soap:Envelope xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:tns=\"http://schemas.microsoft.com/sharepoint/soap/\"><soap:Body><tns:GetListItems><tns:listName>{"+listGUID+"}</tns:listName><viewFields><ViewFields><FieldRef Name=\"ID\"/></ViewFields></viewFields></tns:GetListItems></soap:Body></soap:Envelope>";

a.Send(d);

var xmlDoc=a.responseXML;
var responseElement=xmlDoc.getElementsByTagName("z:row");
var temp = '';

for (i=0;i<responseElement.length;i++)
{
//Store Title Column Value
slideImagesArr[i] = responseElement[i].getAttribute('ows_Title');

//Store ID Column Value
slideImageLinksArr[i] = responseElement[i].getAttribute('ows_ID');

//Store Created date Column Value
slideImagesDisplayArr[i] = responseElement[i].getAttribute('ows_Created');
}


if (a.status != 200)
return null;
else
{
if (extractRows)
return a.responseXML.selectNodes('//Row');
else
return a.responseXML;
}
}

QueryListEx(false);



</script>

<DIV id=divMaster></DIV>
<script>
<!--



for (var x = 0; x <= slideImagesArr.length; x++)
{
if(slideImageLinksArr[x] > 0)
{
//Store Title Column Value in variable str
str = slideImagesArr[x];

}
}


document.getElementById("divMaster").innerHTML = str;

//-->
</script>






In the above code divMaster is the ID of the DIV, in which we are displaying the data from the SharePoint (MOSS) List called RequestToDate.

I think the above solution helps you in writing the code when you are not able to write any server side code (for example C#/C-Sharp) for fetching/ retrieving data from the SharePoint (MOSS) List.
Share:

8 comments:

Hiral said...

Hello,

When i logged in with Administrator, I am able to access my list data with this method.
But when i logged in with other user who is not primary administrator of the site, i got 401 unauthorised error.
Please provide some solution with other user.

Thanks,
Hiral

Yaseen A Mohammed said...

Hi Amit,
I was looking something similar to this. I'm actually trying to create a Left Navigation Based on SharePoint list. I believe thats possible thru JS. I have like 3 level
Menu Title
-- Title
--- Sub Title
Is it possible to display the list item in an order like the above tree. I really Appreciate your help.
regards
Merchant

Yaseen A Mohammed said...

Hi Amit,
Thanks for sharing, I was wondering is it possible to create a left navigation/ Quick Launch based on the SharePoint List. I have like three level down
ie.--->Menu Title
----> Title(url)
----->Sub Title(url)
Is it possible to pull up the list item to used as a left navigation item.
Thanks in advance
Regards
Merchant

Amit Kumar said...

In that case you need to create custom master page. In the custom master page, you need to define the content block, where you can render HTML using JS.

Amit Kumar said...

@Hiral: Please check page is published or not.

Sean said...

Well handy. Thanks for the tip!

Priyanka said...

Can you give me an example usng where clause inside the soap function.

I cannot make this to work..

<

query>" + NewValuePart + "

Anonymous said...

Hi,
In my sharepoint 2007 project, 2 users are A and B. If A need chat with B( user to user). How do???

About Me

My photo
Based in Bangalore, INDIA, Amit is a MCC. He has an MCA from the U.P.T.U., INDIA and holds Microsoft certifications including SharePoint 2007/2010/2013. He is an contributor to MSDN and http://amitkumarmca04.blogspot.com/. Amit have experience in SharePoint,ASP.Net with C#, Classic ASP, VB,Macros,HTML,JavaScript,JSON,BootStrap and AngularJS.

Followers

Labels