Introduction:
In this blog you will see how to get all the lists using KnockoutJS and CSOM in SharePoint 2013. Please refer my article to implement KnockoutJS in a SharePoint page.
Script:
  1. <script src="https://c986.sharepoint.com/SiteAssets/jquery-1.8.3.min.js"></script>
  2. <script src="https://c986.sharepoint.com/SiteAssets/knockout-3.1.0.js"></script>
  3. <script src="https://c986.sharepoint.com/SiteAssets/ko.sp-1.0.min.js"></script>
  4. <script>
  6. ExecuteOrDelayUntilScriptLoaded(MainFunction, "sp.js");
  7. var completeList = null;
  8. var listCollection=null;
  10. // Class used for saving the property values.
  11. function List(id, name) {
  12. var self = this;
  13. self.ID = id;
  14. self.Name = name;
  15. }
  17. // View Model - JavaScript that defines the data and behavior of your UI
  18. function ListViewModel() {
  19. var self = this;
  20. // observableArray equivalent of a regular array,
  21. self.Lists = ko.observableArray([]);
  22. self.AddLists = function (id,name) {
  23. self.Lists.push(new List(id,name));
  24. }
  25. }
  27. function MainFunction() {
  28. completeList = new ListViewModel();
  30. // Retrieve the SharePoint Site Content Types
  31. retrieveLists();
  33. // Activates knockout.js
  34. ko.applyBindings(completeList);
  35. }
  37. function retrieveLists() {
  38. var clientContext = new SP.ClientContext.get_current();
  39. var web = clientContext.get_web();
  40. this.listCollection = web.get_lists();
  41. clientContext.load(listCollection);
  42. clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
  43. }
  45. function onQuerySucceeded(sender, args) {
  46. var listsEnumerator = listCollection.getEnumerator();
  47. while (listsEnumerator.moveNext()) {
  48. var list = listsEnumerator.get_current();
  49. completeList.AddLists(list.get_id(), list.get_title());
  50. }
  51. }
  53. function onQueryFailed(sender, args) {
  54. alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
  55. }
  56. </script>
  57. <!-- view - HTML markup that defines the appearance of your UI -->
  58. <div id="divList">
  59. <h2>
  60. SharePoint Lists</h2>
  61. <br />
  62. <table id="tblList" border="1">
  63. <thead>
  64. <tr>
  65. <th align="center">
  66. ID
  67. </th>
  68. <th align="center">
  69. Name
  70. </th>
  71. </tr>
  72. </thead>
  73. <!-- Iterating through every list item using foreach of KO -->
  74. <tbody data-bind="foreach: Lists">
  75. <tr>
  76. <td data-bind="text: ID">
  77. </td>
  78. <td data-bind="text: Name">
  79. </td>
  80. </tr>
  81. </tbody>
  82. </table>
  83. </div>
Output:
Summary:
Thus in this blog you saw how to get all the lists using KnockoutJS and CSOM in SharePoint 2013.

Comments

Join the conversation! Your thoughts help the community grow.