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. ..:)

Filter Lookup Column based on Status from Child List(Filtering lookup columns)

Recently, I came across a problem where I have to filter values in a Lookup column based on status(True/False) from a child list. At first i thought I will do it via Sharepoint Designer but later I found out that it is not as easy to customize it in SharePoint 2013 so I came up with a solution which is quite easy and you donot have to write any code for it.

The following are the steps to create a filtered lookup column;

1. Create two Lists. A Parent List and a Child List.
2. Create a column in the Child List with name 'Status' as shown in the following figure.
   
   
   
   
   
3. Create a calculated column in the Child List with the formula shown in the following figure. Here the formula is copying the Title column value to the calculated field if the status is 1.

4. Now go to your Child List and check whether the calculated field is working and filling  itself with the Title column when status is true as shown in the following figure.

5. The Last step is to go into your Parent List and create a column with lookup type and refer the Child List along with the calculated column.

6. That's it...Test your Parent List..Lookup should now only show the values with status 'True' or 'Active'.

Introducing Sharepoint 2013 Apps

SharePoint 2013 provides a new concept of developing or extending the websites. It is refereed as 'Apps'. SharePoint Apps consist of self contained functionality to extend the capabilities of websites in the share point. Users can simply go to Office store by redirecting to (http://office.microsoft.com/en-us/store-FX102759646.aspx) to purchase an app and install them on their websites. To build an app, refer dev.office.com.

Building an App via Cloud App Model

The cloud app model is a loosely coupled model which provides developers an opportunity to create 'Apps for SharePoint' by selecting the technologies and programming language of their choice.

Developers can use Html and Javascript for developing the presentation layer and Php, Asp.Net along with db such as MySql or Sql Azure etc; for defining business layer. So the business logic would be running either on Windows Azure or on your hosted server outside the Sharepoint premises but still running and accessible within the SharePoint website.

Before deciding what language a developer is going to use and how to host an app in Sharepoint, lets discuss the hosting options that Sharepoint offers;

1. Sharepoint hosted apps: These apps donot have any server side code and use Javascript client object model to access the objects of Sharepoint. The code is a combination of HTML and Javascript.

2. Cloud hosted apps: These apps allow developers to write server side code. These apps are further divided into two categories;

• Auto Hosted App: The Auto hosted app are only supported for Sharepoint online(Office 365). The business logic(server side code) is hosted on Windows Azure. When a customer installs 'Windows Azure Auto App' from market place, a new website is created on Azure. The app can also contain a Sql database that will run on Azure on deployment. The website is then loaded in the SpFrame(Iframe) in the Sharepoint. The basic advantage in the Azure hosted app is that developers doesnot have to take care of the components that are going to deploy seperately. Sharepoint itself deploy the components in the Azure[1].
• Provider Hosted App: For provider-hosted apps, you or your IT department hosts the app on a dedicated server or third-party hosting service. These apps run on your server or in the cloud, depending on how you choose to host your app.

References: 

1. http://msdn.microsoft.com/en-us/library/fp179887.aspx

Exchange Web Services (EWS) Managed API

 EWS Managed API is used to create client applications that target Exchange Web Services (EWS). It provides various methods to create and alter the office 365 exchange online settings and mail Exchange mailbox. For further details follow the references provided below

1. http://msdn.microsoft.com/en-us/library/exchange/jj220499(v=exchg.80).aspx

2. http://msdn.microsoft.com/en-us/library/exchange/gg591267(v=exchg.140).aspx

Code Samples:

1. http://code.msdn.microsoft.com/Exchange-2013-101-Code-3c38582c#content

2. http://msdn.microsoft.com/en-us/library/exchange/dd633696(v=exchg.80).aspx

Sign up for an Office 365 Developer Site

1. You may already have access to an Office 365 Developer Site. If not then click on Create Account

2. You’ll have to wait for your Developer Site to finish provisioning. After provisioning is complete, refresh the admin center page in your browser. Then, click the Build Apps link in the upper left corner of the page to open your Developer Site. 

3. Now click on 'Build an App' tile. On the right side you will be asked to add the Napa Office 365 Developement tools. Click AddIt as shown in the figure below.

4. That's it. Now after you have a development environment and an Office 365 Developer Site, you can start creating apps for Office and SharePoint. Have fun

Reference: http://msdn.microsoft.com/en-us/library/fp179924.aspx

Use Windows PowerShell for Exchange Online

A. Install Power Shell 3.0

1. Install the full installation of Microsoft .NET Framework 4.0 (dotNetFx40_Full_setup.exe) from the Microsoft Download Center at http://go.microsoft.com/fwlink/?LinkID=212547.

  Or, install Microsoft .NET Framework 4.5 (dotNetFx45_Full_setup.exe) from the Microsoft Download Center at http://go.microsoft.com/fwlink/?LinkID=242919.

2. Install Windows Management Framework 3.0 from the Microsoft Download Center at http://go.microsoft.com/fwlink/?LinkID=240290.

B. Install Windows Azure Active Directory Module ( Microsoft Online Services Module)

Install Microsoft Online Services Module to connect to your local PowerShell session and create your Microsoft Online Office365 Administration session.

- (32-bit version) http://go.microsoft.com/fwlink/p/?linkid=236298

- (64-bit version) http://go.microsoft.com/fwlink/p/?linkid=236297

C. Configuring Power Shell

Now Open a PowerShell session and import the MS Online Module using command;

Import-Module MsOnline

Windows PowerShell script execution must be enabled on the computer you use to connect to Exchange Online. To enable script execution for signed scripts, run the following command in an elevated Windows PowerShell window.

 Set-ExecutionPolicy RemoteSigned

Connect to Exchange Online using Powershell

1. Open Windows PowerShell.

2. Run the following command.

$UserCredential = Get-Credential

3. In the Windows PowerShell Credential Request dialog box, type the user name and password of an account in your Exchange Online organization, and then click OK.

Run the following command.

4. Run the following command.

$Session = New-PSSession -ConfigurationName Microsoft.Exchange -ConnectionUri https://ps.outlook.com/powershell/ -Credential $UserCredential -Authentication Basic -   AllowRedirection

5. Run the following command.

Import-PSSession $Session

Reference: http://technet.microsoft.com/en-us/library/jj984289(v=exchg.150).aspx