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.

Content Type Inheritance and Initialization

Content Type Inheritance and Initialization