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.
-
- var clientContext = new SP.ClientContext();
- var oWebsite = clientContext.get_web();
- var oList = oWebsite.get_lists().getByTitle('Products');
- Create the view by instantiating ‘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() {
-
- var clientContext = new SP.ClientContext();
- var oWebsite = clientContext.get_web();
- var oList = oWebsite.get_lists().getByTitle('Products');
-
- var viewFields = new Array('Total_x0020_Sales', 'Sales_x0020_Target', 'Product_x0020_Name');
- var viewType = new SP.ViewType();
-
- 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);
-
- 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);
-
- 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.
-
- 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() {
-
- var clientContext = new SP.ClientContext();
- var oWeb = clientContext.get_web();
- var oList = oWeb.get_lists().getByTitle('Products');
-
- var oView = oList.get_views().getByTitle('CustomProductView');
- oView.deleteObject();
-
- 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() {
-
- var clientContext = new SP.ClientContext();
- var oWeb = clientContext.get_web();
- var oList = oWeb.get_lists().getByTitle('Products');
-
- oListViews = oList.get_views();
- clientContext.load(oListViews);
- clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
- }
-
- function QuerySuccess() {
-
- 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.