JavaScriptObjectModel in SharePoint(JSOM)

Hi All,

We have JSOM is SharePoint. Lets see with different examples.

All these example can be placed in Content Editor webpart to test.

Example 1: Modify the Title of specific list item based on ID

<script type="text/javascript">
var clientContext = null;
var web = null;

function Initialize()
{
clientContext = new SP.ClientContext.get_current();
web = clientContext.get_web();
this.list = web.get_lists().getByTitle('Genericlist');
this.oListItem = list.getItemById(1);
oListItem.set_item('Title', 'NewTitle updated');
oListItem.update();
clientContext.executeQueryAsync(Function.createDelegate(this, this.onUpdateListItemSuccess), Function.createDelegate(this, this.onQueryFailed));
}
function onUpdateListItemSuccess(sender, args) {
alert("list item updated");
}
function onQueryFailed(sender, args) {
alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
}</script>​​​
<button onclick="Initialize()">Insert</button>​​

Example 2: How to get the Created date and Last Modified date of a Site?

<div id="display"></div>  
<!-- Script Content -->  
<script type='text/javascript'>  
var oWeb;  
function getwebdetails()  
{  
    var clientContext = SP.ClientContext.get_current(); // equivalent to SPContext.Current  
    oWeb = clientContext.get_web(); //Gets the current Web Object    
    clientContext.load(oWeb,'Title', 'Created', 'LastItemModifiedDate');  
    clientContext.executeQueryAsync(onSucceeded,onFailed);  
}  
function onSucceeded()  
{  
    var strmsg = "";
    strmsg += "<b>Web Title:</b> " + oWeb.get_title() +"<br/>";
    strmsg += "Created Date: "+ oWeb.get_created()+"<br/>";
    strmsg += "Last Modified Date: "+ oWeb.get_lastItemModifiedDate();  
    document.getElementById("display").innerHTML = strmsg;
}  
function onFailed(sender, args)  
{  
    try  
    {  
        console.log('Error: ' + args.get_message());  
    }  
    catch (err)  
    {  
    }  
}  
ExecuteOrDelayUntilScriptLoaded(getwebdetails, "sp.js");  
</script>

Example 3: Get current loggedin user,id and usertitle

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(init,'sp.js');
var currentUser;
function init(){
    this.clientContext = new SP.ClientContext.get_current();
    this.oWeb = clientContext.get_web();
    currentUser = this.oWeb.get_currentUser();
    this.clientContext.load(currentUser);
    this.clientContext.executeQueryAsync(Function.createDelegate(this,this.onQuerySucceeded), Function.createDelegate(this,this.onQueryFailed));
}

function onQuerySucceeded() {
    document.getElementById('userLoginName').innerHTML = currentUser.get_loginName();
    document.getElementById('userId').innerHTML = currentUser.get_id();
    document.getElementById('userTitle').innerHTML = currentUser.get_title();  
}

function onQueryFailed(sender, args) {
    alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}
</script>
<div>Current Logged User:
    <span id="userLoginName"></span>
    <span id="userId"></span>
    <span id="userTitle"></span>  
</div>

Get ItemsCount in a sharepoint list:

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>

<script type="text/ecmascript">
    var customlist ;
    function GetListInformation() {
        var clientContext = new SP.ClientContext.get_current();
        var oWebsite = clientContext.get_web();
        customlist = oWebsite.get_lists();
        clientContext.load(customlist);
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
    }      

    function onQuerySucceeded() {    
alert("Success");
         alert("Item Count : " + this.customlist.get_itemCount());
    }

    function onQueryFailed(sender, args) {
        alert(" Failed");
    }      
</script>

<button type="button" onclick="GetListInformation()">Click Me!</button>
​
Hope this helps!!!