SharePoint data with KnockoutJS (Hosted-App)

Please follow the below steps:

  1. Create a list in the main site (host web) as below:

    Create a list

  2. Open Visual Studio -> Create a new SharePoint App Project.

    SharePoint-Hosted

  3. Select the host for the app as “SharePoint-Hosted”.

  4. Once the project is created, you will find the below structure.

    testApp

  5. In the default.aspx add reference to knockout.js file [the file has been downloaded and added to the project under Scripts folder].
    1. <scripttype="text/javascript"src="../Scripts/knockout-2.2.1.js"></script>  
    Add the below code as well in the default.aspx,
    1. <tableborder="1" cellspacing="0" cellpadding="10">  
    2.     <theadstyle='background-color:gray;color:white'>  
    3.         <tr>  
    4.             <td>Name</td>  
    5.             <td>Roll No</td>  
    6.         </tr>  
    7.     </thead>  
    8.     <tbodydata-bind="foreach: assignments">  
    9.         <tr>  
    10.             <tddata-bind="text: personName">  
    11.             </td>  
    12.             <tddata-bind="text: rollNo">  
    13.             </td>  
    14.         </tr>  
    15.     </tbody>  
    16. </table>  
  6. Add the below code to the App.js file.
    1. 'use strict';  
    2. var appWebContext;  
    3. var hostweburl;  
    4. $(document).ready(function ()  
    5. {  
    6.     ViewGrid();  
    7. });  
    8.   
    9. function ViewGrid()  
    10. {  
    11.     ko.applyBindings(new TestListViewModel());  
    12. }  
    13.   
    14. function TestListViewModel()  
    15. {  
    16.     var self = this;  
    17.     appWebContext = new SP.ClientContext.get_current();  
    18.     hostweburl = decodeURIComponent($.getUrlVar("SPHostUrl"));  
    19.     var hostwebContext = new SP.AppContextSite(appWebContext, hostweburl);  
    20.     self.assignments = ko.observableArray();  
    21.     self._loadList = function ()  
    22.     {  
    23.         var clientContext = SP.ClientContext.get_current();  
    24.         var list = hostwebContext.get_web().get_lists().getByTitle('TestList');  
    25.         var query = new SP.CamlQuery();  
    26.         query.set_viewXml("<View>" + " <Query>" + " <OrderBy>" + " <FieldRef Name='Modified' Ascending='True' />" + " </OrderBy>" + " </Query>" + " <ViewFields>" + " <FieldRef Name='Modified' />" + " <FieldRef Name='Name' />" + " <FieldRef Name='RollNo' />" + " </ViewFields>" + "</View>");  
    27.         self._pendingItems = list.getItems(query);  
    28.         clientContext.load(self._pendingItems);  
    29.         clientContext.executeQueryAsync(Function.createDelegate(self, self._onLoadListSucceeded), Function.createDelegate(self, self._onLoadListFailed));  
    30.     }  
    31.     self._onLoadListSucceeded = function (sender, args)  
    32.     {  
    33.         var listEnumerator = self._pendingItems.getEnumerator();  
    34.         while (listEnumerator.moveNext())  
    35.         {  
    36.             var item = listEnumerator.get_current().get_fieldValues();  
    37.             self.assignments.push(  
    38.             {  
    39.                 rollNo: item.RollNo.toString(),  
    40.                 personName: item.Name.toString(),  
    41.             });  
    42.         }  
    43.     }  
    44.     self._onLoadListFailed = function (sender, args)  
    45.     {  
    46.         alert('Unable to load file list: ' + args.get_message() + '\n' + args.get_stackTrace());  
    47.     }  
    48.     self._loadList();  
    49. }  
    50. // jQuery plugin for fetching querystring parameters  
    51. jQuery.extend(  
    52. {  
    53.     getUrlVars: function ()  
    54.     {  
    55.         var vars = [],  
    56.             hash;  
    57.         var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');  
    58.         for (var i = 0; i < hashes.length; i++)  
    59.         {  
    60.             hash = hashes[i].split('=');  
    61.             vars.push(hash[0]);  
    62.             vars[hash[0]] = hash[1];  
    63.         }  
    64.         return vars;  
    65.     },  
    66.     getUrlVar: function (name)  
    67.     {  
    68.         return jQuery.getUrlVars()[name];  
    69.     }  
    70. });  
  7. Go to AppManifest.xml -> Permissions tab. We need to give permission to the app to access the host web. Select “SiteCollection”-> Permission Level ”Manage” (I have given manage, since I am planning to edit the data as well, which I will do late.) Read permission can also be given.

  8. Deploy the solution, trust the app.

  9. The Host-web list data will show up as below.

    Run
Ebook Download
View all
Learn
View all