SharePoint 2013 - Web Part Development

In this post, I am going to demonstrate how to develop a SharePoint 2013 Web Part and then deploy it on local SharePoint site. For production deployment see this post.
Lets get started!

1. Launch Visual Studio 2013 with Administrator privileges.
2. Select SharePoint Solutions -> SharePoint 2013 - Visual Web Part and provide name of the project along with the location.
   
3. Provide the url of local SharePoint site for debugging then select Deploy as a sandboxed solution option and hit finish.
   
4. You will see the basic structure of the Visual web part created along with one User Control (ASCX) to handle GUI elements and one Feature to handle packaging (WSP).
   
5. Open the user control (VisualWebPart1.ascx) and add following ASP.NET Grid.
   

   <asp:GridView ID="gvProducts" runat="server" />
   

   
6. Open the code behind of the user control (VisualWebPart1.ascx.cs) and add the following code:
   
   Add Reference to SharePoint API
   

   using Microsoft.SharePoint;

    Add CreateChildControls() function
   

   protected override void CreateChildControls()
   {
       SPSite objSite = SPContext.Current.Site;
       using (SPWeb objWeb = objSite.OpenWeb())
       {
           SPQuery objQuery = new SPQuery();
           objQuery.ViewFields = "<FieldRef Name='ID' /><FieldRef Name='Title' /><FieldRef Name='Author' />";
           objQuery.ViewFieldsOnly = true;
   
           SPList objList = objWeb.Lists["ListA"];
           SPListItemCollection oCollection = objList.GetItems(objQuery);
   
           gvProducts.DataSource = oCollection.GetDataTable();
           gvProducts.DataBind();
   
       }
   }

   Your code should look like this:
   
7. Select Build -> Deploy Solution.
8. Open IE and go to the site specified in the step 3. Edit the home page and select Insert -> Web Part. You should see this web part under Custom category, select and add the webpart.
   
9. It should display like this
   

For Packaging and deployment check out the next post.

SharePoint 2013 - App Development

In this post, I will explain how to read list data from a SharePoint 2013 App using Javascript Object Model (JSOM). So sit tight as it's about to get bumpy in here!!!

1. Launch Visual Studio 2013 and Create a SharePoint 2013 App project.
2. Data is in an Announcement list that will be accessed by this App. My Announcement list has two columns: Title(Text) and Status(Yes/No).
3. Add a button and a table in Default.aspx in Pages in Solution Explorer
   

   <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
       <div>
           <p id="message">
               Click the button...
           </p>
       </div>
       <input type="button" value="Get Announcements" onclick="GetAnnouncements()" />
       <table id="tblItems" border="1" width="500"></table>
   </asp:Content>
   

4. Now open App.js under Scripts and add the following code

5. 'use strict';
   var context;
   var web;
   var hostWeb;
   var user;
   
   var hostweburl;
   var appweburl;
   var appContextSite;
   var list;
   var collList;
   var appContextSite;
   
   function getUrl() {
       hostweburl = getQueryStringParameter("SPHostUrl");
       appweburl = getQueryStringParameter("SPAppWebUrl");
       hostweburl = decodeURIComponent(hostweburl);
       appweburl = decodeURIComponent(appweburl);
       $("#hostWebURL").text("Host Web URL: " + hostweburl);
       $("#appWebURL").text("App Web URL: " + appweburl);
   }
   
   function getQueryStringParameter(paramToRetrieve) {
       var params =
           document.URL.split("?")[1].split("&");
       var strParams = "";
       for (var i = 0; i < params.length; i = i + 1) {
           var singleParam = params[i].split("=");
           if (singleParam[0] == paramToRetrieve)
               return singleParam[1];
       }
   }
   
   // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
   $(document).ready(function () {
       context = SP.ClientContext.get_current();
       web = context.get_web();
       getUrl();
   });
   
   
   function GetAnnouncements() {
       //alert('hello');
       appContextSite = new SP.AppContextSite(context, hostweburl);
   
       var oList = appContextSite.get_web().get_lists().getByTitle('Announcements');
       var camlQuery = new SP.CamlQuery();
       camlQuery.set_viewXml(
           '<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' +
           '<Value Type=\'Number\'>1</Value></Geq></Where></Query>' +
           '</View>'
       );
       this.collListItem = oList.getItems(camlQuery);
   
       context.load(collListItem);
       context.executeQueryAsync(
           Function.createDelegate(this, onQuerySucceeded),
           Function.createDelegate(this, onQueryFailed)
       );
   
   }
   
   function onQuerySucceeded() {
       var listItemEnumerator = collListItem.getEnumerator();
   
       var str = '';
       while (listItemEnumerator.moveNext()) {
           var oListItem = listItemEnumerator.get_current();
   
           var imageStatus = '';
           if (oListItem.get_item('Status') == 'Yes')
           {
               imageStatus = '<img src=../Images/Yes.jpg />'
           }
           else
           {
               imageStatus = '<img src=../Images/No.png />'
           }
   
           str = str + "<tr><td>" + oListItem.get_item('Title') + "</td><td>" + imageStatus + "</td></tr>";
   
       }
   
       $('#tblItems').append(str);
   }
   
   function onQueryFailed(sender, args) {
       $('#message').text('Request failed. ' + args.get_message() +
           '<br/>' + args.get_stackTrace());
       }
   
   

6. Open AppManifest.xml and under Permissions tab, set List under Scope and FullControl under Permission section. This will tell user that this App needs access on Host Site's lists.
   
7. Hit the Play button and if the forces are with you then your app should look like this after successful deployment.
   

Here are Common Programming Tasks using Javascript Object Model. Now you are ready to create your million dollar App =).

SharePoint 2013 - Hello World App

Hello World!!! Lets create a SharePoint 2013 App.
Following are the quick steps to create a SharePoint Hosted App using Visual Studio 2013:

1. Launch Visual Studio 2013.
2. Select File -> New Project
3. Select App for SharePoint 2013 and provide name and location of the project
   
4. Provide url of the developer site (Site collection created by using Developer Site template) and select SharePoint Hosted App in hosting option then select Finish.
   
5. Hit Start from the tool bar, it will compile and deploy the app to your developer site.
   

Sharing SharePoint Online Site with External Users

Scenario:
I have subscription of SharePoint Online and have created few private sites in it. I wanted to share one of the private site collection with the external users and keep on getting the following error message:

Sorry, you are not allowed to share this with external users.

However when I try to share existing sites (default sites) with external users, it gets shared without any problem.

Solution:
For the new site collections you have to enable following option:

1. Go to the SharePoint admin center and  select the Site Collection.
2. Select Sharing from the tool bar. 
3. Change the sharing settings to Allow
   
   

SharePoint 2013 - Audit Log

Scenario:
I had a business requirement to track user activities inside a SharePoint site and guess what? SharePoint have OTB functionality to track who is doing what in the whole site collection. For example: User A is editing documents, User B is downloading some documents and User C is just viewing the content without touching them. This functionality is called Audit Log Reporting.

Configure Audit Log Settings:

1. Go to Site Settings and under Site Collection Administration section, select Site collection audit settings.
   
2. Select the events that you want to capture.
   

View Audit Log Reports:

1. Go to Site Collection Administration section and select Audit log reports.
2. Select the report that you want to view. Make sure you have selected the corresponding event in the above steps.
   
3. You will be asked to select a document library where the report will be generated as an Excel document.

Note: In SharePoint 2007, you might not see the option of Audit log reports on Site Settings page. You have to go to the Site collection features and enable the Reporting feature to make the link visible.

Keep Calm & Learn SharePoint

The picture says it all.

CS50 - Final Project

Today I got my result for famous CS50 course that I am taking at Harvard University (Extension School) and boy! I must say, it was not an easy course :o). Here is my final project presentation.