Get or Set the Web Properties Using CSOM-JavaScript in SharePoint 2013

Introduction

This article explains how to get or set the current web properties using CSOM-JavaScript in SharePoint 2013.
 
Prerequisites

1. Ensure you have access to the Office 365 online.
2. Ensure Napa tool is available in your site.

Procedure to be followed

1. Create an app for SharePoint using Office 365 Tools. If you have missed out on how to create an app in SharePoint 2013, then  Click here.
2. Click on the "Default.aspx" page.
   
   
   
   
3. Add a div tag with id “listnames” and place it inside the “PlaceHolderMain” tag.
    
   <div id="webDetails">
   </div>
   
   
    
4. Click on the "App.js" file.
   
   
   
   
5. Globally declare the content and web objects as shown below.

   var context = SP.ClientContext.get_current();
   var web = context.get_web();
   

6. Now write the function to fetch the web details from  the current site.
    
     function getWebData() {

           context.load(web);

           context.executeQueryAsync(GetWebDataSuccess, GetWebDataFail);

           web.set_description("Setting the web description through CSOM-JavaScript");

           context.load(web);

           context.executeQueryAsync(GetWebDataSuccess, GetWebDataFail);

       }
    

7. Here in this example we are getting the web details in the first Async call and then we are setting the description property. To set the property we need to again load the web object again and execute the  "executeQueryAsync" call.
    

   // This function is executed if the above call is successful

       function GetWebDataSuccess() {

           webDetails += "Web Details <br/>";

           webDetails += "<br/> Title: " + web.get_title();

           webDetails += "<br/> Created: " + web.get_created();

           webDetails += "<br/> Description: " + web.get_description();

           webDetails += "<br/> ID: " + web.get_id();

           webDetails += "<br/> Language: " + web.get_language();

           var insert = document.getElementById('webDetails');

           insert.innerHTML = webDetails;

       }

       // This function is executed if the above call fails

       function GetWebDataFail(sender, args) {

           alert('Failed to get the web Details. Error:' + args.get_message());

       }

    

8. Now call the getListName function inside the document.ready().
    

   $(document).ready(function () {

           getWebData();

       });
                 

9. Please find the final execution of the code below.
   
   
   

Testing

1. Now to run the app click on the "Play" button that is available towards the left-most corner.
   
   
   
   
2. The app is packaged, deployed, and installed on your Office 365 Site.
   
   
   
   
3. Now you will be able to get or set the web properties.
   
   
   

Summary

Thus in this article you saw how to get or set the current web properties using CSOM- JavaScript in SharePoint 2013.