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