Working With Views In SharePoint Using JavaScript Object Model

SharePoint Views are yet another implementation by which, we can organize the data within a list/library. A list can contain millions of items and we might be really concerned about only a minor subset of that data. In order to work with the subset of the main data, we create a view, which satisfies out the requirement by conditionally retrieving the data, based on certain columns within the list.



We can create the views and delete them out of the box. Let’s see, how we can do the same programmatically, using JavaScript Object Model.

Internal Implementation

Scope of the article is,

• Create a new list view.
• Delete an existing view.
• List all the views.

All of these operations will be done, using JavaScript object model.

Create a List View

• Add the reference to jQuery file.
  

  <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script language="javascript" type="text/javascript">

• Within Document ready function, call SP.SOD.executeFunc, so as to load the on demand script SP.js . Call the main starting point function say: ‘createListView’,
  

  SP.SOD.executeFunc('sp.js', 'SP.ClientContext', createListView);

• Instantiate the client context, Web and list instance.
  

  //Get client context,web and list object
  var clientContext = new SP.ClientContext();
  var oWebsite = clientContext.get_web();
  var oList = oWebsite.get_lists().getByTitle('Products');

• Create the view by instantiating ‘ViewCreationInformation’ object.
  

  //Create view using ViewCreationInformation object
  var creationInfo = new SP.ViewCreationInformation();
  creationInfo.set_title("CustomProductView");
  creationInfo.set_setAsDefaultView("true");
  creationInfo.set_rowLimit("10");
  creationInfo.set_personalView("false");
  creationInfo.set_viewFields(viewFields);

• Set CAML query, so that the view shows only the required subset of the items in the list.
  

  var camlQuery = new SP.CamlQuery();
  var query = "<Where><IsNotNull><FieldRef Name='Product_x0020_Name' /></IsNotNull></Where>";
  camlQuery.set_viewXml(query);
  creationInfo.set_query(camlQuery);
  oListViews=oList.get_views().add(creationInfo);

• Load the client context and execute the batch. 
  

  clientContext.load(oListViews);
  clientContext.executeQueryAsync(QuerySuccess, QueryFailure);

Output



Full Code: The full code of the view creation is shown below:

<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', createListView);
    });
    var oListViews;

    function createListView() {
        //Get client context,web and list object
        var clientContext = new SP.ClientContext();
        var oWebsite = clientContext.get_web();
        var oList = oWebsite.get_lists().getByTitle('Products');
        //Set the view fields
        var viewFields = new Array('Total_x0020_Sales', 'Sales_x0020_Target', 'Product_x0020_Name');
        var viewType = new SP.ViewType();
        //Create view using ViewCreationInformation object
        var creationInfo = new SP.ViewCreationInformation();
        creationInfo.set_title("CustomProductView");
        creationInfo.set_setAsDefaultView("true");
        creationInfo.set_rowLimit("10");
        creationInfo.set_personalView("false");
        creationInfo.set_viewFields(viewFields);
        //Set CAML query so that the view shows only a subset of items
        var camlQuery = new SP.CamlQuery();
        var query = "<Where><IsNotNull><FieldRef Name='Product_x0020_Name' /></IsNotNull></Where>";
        camlQuery.set_viewXml(query);
        creationInfo.set_query(camlQuery);
        oListViews = oList.get_views().add(creationInfo);
        //Load the client context and execute the batch
        clientContext.load(oListViews);
        clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
    }

    function QuerySuccess() {
        console.log("Views created successfully!");
    }

    function QueryFailure(sender, args) {
        console.log('Request failed' + args.get_message());
    }
</script>

Delete List View

Similar to the view creation, we can implement deletion, using JSOM, as described below:

 

• Add the reference to jQuery file.
  

  <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script language="javascript" type="text/javascript">

• Within Document ready function, call SP.SOD.executeFunc, so as to load the on demand script SP.js. Call the main starting point function say: ‘deleteListView’.
  

  SP.SOD.executeFunc('sp.js', 'SP.ClientContext',deleteListView);

• Instantiate the client context, web and list instance.
  

  //Get client context,web and list object
  var clientContext = new SP.ClientContext();
  var oWebsite = clientContext.get_web();
  var oList = oWebsite.get_lists().getByTitle('Products');

• Get the view object to delete. 
  

  var oView = oList.get_views().getByTitle('CustomProductView');
  view.deleteObject();

• Load the client context and execute the batch.
  

  clientContext.executeQueryAsync(QuerySuccess, QueryFailure);

Output

Console Output is given below:



Full Code: The full code for the view deletion is shown below:

<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', deleteListView);
    });

    function deleteListView() {
        //Get the client context,web and list object
        var clientContext = new SP.ClientContext();
        var oWeb = clientContext.get_web();
        var oList = oWeb.get_lists().getByTitle('Products');
        //Get the view object to delete
        var oView = oList.get_views().getByTitle('CustomProductView');
        oView.deleteObject();
        //Execute the batch
        clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
    }

    function QuerySuccess() {
        console.log('Specified View has been deleted.');
    }

    function QueryFailure(sender, args) {
        console.log('Request failed' + args.get_message());
    }
</script>

Get All Views

Just like the view creation and deletion, we can also get the list of all the views,  present within the list, using the script, given below. ‘oList.get_views()’ gets a collection of all the views, which are present within the list, which can be iterated upon by creating an enumerator collection, as shown in the code, given below:

<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getListViews);
    });
    var oListViews;

    function getListViews() {
        //Get the client context,web and list object
        var clientContext = new SP.ClientContext();
        var oWeb = clientContext.get_web();
        var oList = oWeb.get_lists().getByTitle('Products');
        //Get the list view and load it to client context and execute the batch
        oListViews = oList.get_views();
        clientContext.load(oListViews);
        clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
    }

    function QuerySuccess() {
        //Get the enumerator collection of list view and loop through it
        var enumerator = oListViews.getEnumerator();
        console.log("The available list views are: ");
        while (enumerator.moveNext()) {
            console.log(enumerator.get_current().get_title() + '\n');
        }
    }

    function QueryFailure() {
        console.log('Request failed' + args.get_message());
    }
</script>

Let’s see, how we can implement it in SharePoint. Save the scripts, given above, to a text file and upload it to Site Assets library.

SharePoint Implementation

 

• Go to the edit settings of SharePoint page and click Web part from Insert tab.
  
  
  
  
• Add Content Editor Web part.
  
  
  
  
• Click Edit Web art from Content Edit Web part. Assign the URL of the script text file and click Apply.
  
  
  

Output



Summary

Thus, we have seen, how to list out all the views, create a new view and delete an existing view, using JavaScript Object Model. This has been tried and tested in both SharePoint 2016 and Office 365.