JavaScript Object Model in SharePoint 2010
Introduction
In this post I will provide detials of how you can acces sharepoint data with JavaScript Object Model.
There are pretty much differences between the ECMAScript (JavaScript, JScript) and client object models. I am not covering those in this post.
As JavaScript Object Model has different syntax all togther, as usual I will cover common tasks of a SharePoint to get familarity in accessing the objects.
Files that are referred for JavaScript Object Model are
<script type="text/ecmascript" src="/_layouts/SP.Core.js" /> <script type="text/ecmascript" src="/_layouts/SP.Debug.js" /> <script type="text/ecmascript" src="/_layouts/SP.Runtime.Debug.js" />
Access SharePoint Website
The following code explains how we can access Sharepoint WebSite.
Code Example:1
var siteUrl = '/MySiteCollection/mysite '; function getMyWebSite() { var clientContext = new SP.ClientContext(siteUrl); this.WebsiteObj = clientContext.get_web(); clientContext.load(this.WebsiteObj); clientContext.executeQueryAsync(Function.createDelegate(this, this.onGetSucceeded), Function.createDelegate(this, this.onGetFailed)); } function onGetSucceeded(sender, args) { alert('Site Title: ' + this.WebsiteObj.get_title() + ' Site Decription: ' + this.WebsiteObj.get_description()); } function onGetFailed(sender, args) { alert('Site Request failed. ' + args.get_message() + 'n' + args.get_stackTrace()); }
We have to give only sitecollection relative url for getting the site object.
clientContext.get_web() gets the web objct
clientContext.get_site() is the method used to get site collection object
Get SharePoint List data
The following code explains how we can access Sharepoint List data.
Code Example:2
var siteUrl = '/MySiteCollection/mysite'; function getMySiteListData() { var clientContext = new SP.ClientContext(siteUrl); var empList = clientContext.get_web().get_lists().getByTitle('EmpInfo'); var camlQuery = new SP.CamlQuery(); camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name='Department'/>' + '<Value Type='Text'>HR</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>'); this.empListItems = empList.getItems(camlQuery); clientContext.load(empListItems); clientContext.executeQueryAsync(Function.createDelegate(this, this.onListDataSucceeded), Function.createDelegate(this, this.onListDataFailed)); } function onListDataSucceeded(sender, args) { var empInfo = ''; var listItemEnumerator = empListItems.getEnumerator(); while (listItemEnumerator.moveNext()) { var oListItem = listItemEnumerator.get_current(); empInfo += 'nEmp ID: ' + oListItem.get_id() + 'nEmployee Name: ' + oListItem.get_item('Title'); } alert(empInfo.toString()); } function onListDataFailed(sender, args) { alert('List Data fetch failed. ' + args.get_message() + 'n' + args.get_stackTrace()); }
Conclusion
with this basic understanding hope you can have quick start on javascript object model. Happy coding
March 30, 2012
В·
Adi В·
No Comments
Tags: JavaScript Object Model in SharePoint 2010 В· Posted in: Client Object Model, JavaScript Object Model, Sharepoint 2010
Leave a Reply