Getting Started with ECMAScript Client Object Model in Sharepoint 2013

The emergence of dynamic webpages has also encouraged developers to develop efficient web applications with lesser post backs and delays. To interact with efficiency with SharePoint, Microsoft has also introduced a client object model which is very similar to the server object model. Before discussing the objects and methods of the client object model, lets first try to understand the basics of the JavaScript client object model (JSOM) of the SharePoint.

The client object model(JSOM) provides 3 major javascript files which contains all the necessary methods to make an operation on Sharepoint. These javascript files are as follows;

1. SP.js
2. SP.Core.js
3. SP.Runtime.js

The above 3 javascript files resides in {Sharepointroot}\Template\Layouts folder. An WCF webservice named as 'Client.svn' is used by these files to interact with the Sharepoint. This webservice should not be used directly but rather use js files provided by the Microsoft for interaction.

When an HttpRequest is made from the client then a call is made to /_vti_bin/client.svn/Processrequest. The request is a well form Xml but after the processing, the response is in the form of JSON. The response also downloads the required files in the browser. The question here raises is how to download only the files which are being needed? The answer lies in the Script on Demand framework that is being provided. The developer can reference the javascript files which are need by setting the property OnDemand="true" as follows;

Enable Intellisense in JSOM

To enable intellisense on client side, write the following lines of code in the visual webpart;

<% #if SOME_UNDEFINED_CONSTANT %> 


<% #endif %>

SharePoint: Referencing JQuery and Css files in a Visual Webpart

Solution: Create an empty SharePoint project in your Visual studio.

Add a Visual web part into it. Now right click on your project and click on Add option and select 'Layouts' as shown in the following figure;

Synchronize Site list with Subsite list via Event Receivers on SharePoint 2013 

Synchronizing a child list with a Parent list can be done by writing the event receivers. Whenever a user will add, update or delete operations on a parent list then the child will also be synchronized accordingly. The following are the series of steps that you need to know to accomplish it;

The Parent list resides in the root site of Site collection. Child List is part of a sub site  The following is how my parent and child list looks like in my environment;

              

For writing event receivers  create an empty SharePoint 2013 project in Visual Studio 2012. In the project, select add new item and select Event Receiver as shown in the figure below.

Select the type of event receiver you need to add. In my case, I selected a Custom List for the time being. I will show you later how to change it.

Now once the event is generated, go to the Elements.xml of the Event reciever and replace the "ListTemplateId=100" with ListUrl="Lists\ParentList". Here my List name is 'ParentList'. Now the event receivers will be going to be attach with ParentList once they are deployed.

Go to the .cs file of your event reciever and write the following code to automate the synchronization.

/// 

        /// An item was added.
        /// 
        public override void ItemAdded(SPItemEventProperties properties)
        {
            SPWeb _currentweb = properties.Web;
            string strSiteCollct = _currentweb.Site.Url;

            using (SPWeb _subSite = _currentweb.Webs[0])
            {
                SPList _list = _subSite.Lists["ChildList"];
                SPListItem _item = _list.AddItem();
                _item[SPBuiltInFieldId.ID] = properties.ListItemId;
                _item["Title"] = properties.ListItem["Title"].ToString();
                _item["Employee Name"] = properties.ListItem["Employee Name"].ToString();
                _item["Joining Date"] = properties.ListItem["Joining Date"].ToString();

                _item.Update();
            }
            base.ItemAdded(properties);
        }

        /// 

        /// An item was updated.
        /// 
        public override void ItemUpdated(SPItemEventProperties properties)
        {
            SPWeb _currentweb = properties.Web;
            using (SPWeb _subSite = _currentweb.Webs[0])
            {
                SPList _list = _subSite.Lists["ChildList"];

                int ItemId = properties.ListItemId;
                SPListItem _item = _list.GetItemById(ItemId);

                _item["Title"] = properties.ListItem["Title"].ToString();
                _item["Employee Name"] = properties.ListItem["Employee Name"].ToString();
                _item["Joining Date"] = properties.ListItem["Joining Date"].ToString();
                _item.Update();
            }
            base.ItemUpdated(properties);
        }

        /// 

        /// An item was deleted.
        /// 
        public override void ItemDeleted(SPItemEventProperties properties)
        {
            SPWeb _currentweb = properties.Web;
            using (SPWeb _subSite = _currentweb.Webs[0])
            {
                SPList _list = _subSite.Lists["ChildList"];

                int ItemId = properties.ListItemId;
                if (DoesListItemExist(_list, ItemId)) // Before deleting item verify, it exist in the ChildList
                {
                    SPListItem _item = _list.GetItemById(ItemId);
                    _item.Delete(); //Delete item
                    _list.Update();
                }                
            }

            base.ItemDeleted(properties);
        }

        private Boolean DoesListItemExist(SPList _list, int ListID)
        {
            try
            {
                SPQuery query = new SPQuery();
                string strQuery = string.Format(@"
                                            
                                                 
                                                    
                                                    {0}
                                                
                                            ", ListID);
                query.Query = strQuery;
                SPListItemCollection found = _list.GetItems(query);
                if (found.Count > 0)
                {
                    return true;
                }

                return false;
            }
            catch (Exception)
            {

                throw;
            }

        }

That's it...deploy the event receiver and perform add, update and delete operations on your parent list. The changes will also be reflected on the child list of the subsite. ..:)