Introduction:
In this blog you will see how to get all thelist views 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 completeViewList = null;
  8. var viewCollection=null;
  10. // Class used for saving the property values.
  11. function ViewList(name) {
  12. var self = this;
  13. self.Name = name;
  14. }
  16. // View Model - JavaScript that defines the data and behavior of your UI
  17. function ViewModel() {
  18. var self = this;
  19. // observableArray equivalent of a regular array,
  20. self.Views = ko.observableArray([]);
  21. self.AddViews = function (name) {
  22. self.Views.push(new ViewList(name));
  23. }
  24. }
  26. function MainFunction() {
  27. completeViewList = new ViewModel();
  29. // Retrieve the SharePoint list views
  30. retrieveListViews();
  32. // Activates knockout.js
  33. ko.applyBindings(completeViewList);
  34. }
  36. function retrieveListViews() {
  37. var clientContext = new SP.ClientContext.get_current();
  38. var list = clientContext.get_web().get_lists().getByTitle("Employee Details");
  39. this.viewCollection = list.get_views();
  40. clientContext.load(viewCollection);
  41. clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
  42. }
  44. function onQuerySucceeded(sender, args) {
  45. var viewEnumerator = viewCollection.getEnumerator();
  46. while (viewEnumerator.moveNext()) {
  47. var content = viewEnumerator.get_current();
  48. completeViewList.AddViews(content.get_title());
  49. }
  50. }
  52. function onQueryFailed(sender, args) {
  53. alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
  54. }
  55. </script>
  56. <!-- view - HTML markup that defines the appearance of your UI -->
  57. <div id="divViewList">
  58. <h2>
  59. List Views</h2>
  60. <br />
  61. <table id="tblViewList" border="1">
  62. <thead>
  63. <tr>
  64. <th>
  65. Name
  66. </th>
  67. </tr>
  68. </thead>
  69. <!-- Iterating through every list view using foreach of KO -->
  70. <tbody data-bind="foreach: Views">
  71. <tr>
  72. <td data-bind="text: Name">
  73. </td>
  74. </tr>
  75. </tbody>
  76. </table>
  77. </div>
Output:
Summary:
Thus in this blog you saw how to get all the list views using KnockoutJS and CSOM in SharePoint 2013