Using SharePoint JavaScript Client Object Model to Get Web Site Properties

SharePoint has introduced a new feature called Client Object Models. Which is an addition to SharePoint. Lets start with the basics of retrieving the data from SharePoint using JSOM (JavaScript Client Object Model) also familiar with the name "ECMA Script Object Model". JSOM runs on client browser.

I'm going to tell you step by step on how to get SharePoint site collection or web site properties using SharePoint 2013 JavaScript Client Object Model.

1. Add a Page in your site and add a Content Editor Web Part in your page.
2. Add JQuery min file by adding reference file in your Site Assets or Add google api reference in Content Editor Web Part.
<script type="text/JavaScript"
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
3. Load "SP.js" file in your Content Editor Web Part (in SharePoint 2013 it is registered by default).
<script type="text/JavaScript"
  src="/_layouts/SP.js"></script>
Retrieve the website properties.
<script type="text/JavaScript">
RegisterSod('sp.js', _spPageContextInfo.siteServerRelativeUrl + 
            '/_layouts/15/SP.js');

$(document).ready(function () { 
  ExecuteOrDelayUntilScriptLoaded(retrieveWebSite, "sp.js");
});

function retrieveWebSite() {
   var clientContext = new SP.ClientContext(_spPageContextInfo.siteServerRelativeUrl);
   this.oWebsite = clientContext.get_web();
   clientContext.load(this.oWebsite);
   clientContext.executeQueryAsync(
      Function.createDelegate(this, this.onQuerySucceeded), 
      Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded(sender, args) {
   alert('Title: ' + this.oWebsite.get_title() + 
      ' Description: ' + this.oWebsite.get_description());
}

function onQueryFailed(sender, args) {
  alert('Request failed. ' + args.get_message() + 
      '\n' + args.get_stackTrace());
} 
</script>

You can Check SharePoint 2013 JavaScript Client Object Model to Get List Items

Now lets go into some more details on how to retrieve selected properties of web:
To reduce unnecessary data transference between client and server, you can return only specified properties of the website object, not all of its properties.

function retrieveWebSiteProperties() {
    var clientContext = SP.ClientContext.get_current();
    this.oWebsite = clientContext.get_web();
    clientContext.load(this.oWebsite, 'Title', 'Created');
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded), 
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded(sender, args) {
    alert('Title: ' + this.oWebsite.get_title() + 
        ' Created on : ' + this.oWebsite.get_created());
}
    
function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}
Note
If you try to access other properties you see an exception message because other properties are not loaded in this context.

Now lets go into some more advanced things on how to Write to a website's properties:
To modify a website, you set its properties and call the update() method.

function updateWebSite() {
    var clientContext = SP.ClientContext.get_current();
    this.oWebsite = clientContext.get_web();
    this.oWebsite.set_title('Updated Web Site');
    this.oWebsite.set_description('Updated Web site using
                      JavaScript Client Object Model.');

    this.oWebsite.update();
    clientContext.load(this.oWebsite, 'Title', 'Description');
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded), 
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded(sender, args) {
    alert('Title: ' + this.oWebsite.get_title() + 
        ' Description: ' + this.oWebsite.get_description());
}
   
function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}
You can get more Info on MSDN.
Hope this Article is Helpful for you and i will give articles on JSOM.Keep checking.
SHARE

Sudheer Gangumolu

I'm a Software Analyst / Developer / Blogger, having good experience in working with different flavors & Customization of SharePoint (i.e.,SP O365 / 2013 / 2010 / 2007) and .Net Apps. Currently, working on SharePoint 2013 / SharePoint O365. Guiding people on my technologies.

    Blogger Comment
    Facebook Comment

1 comments :

  1. SharePoint CSOM released long back.
    Is this CSOM different or new in SP 2013?

    ReplyDelete