Introduction
Before you start reading you need to be familiar using the Client Objet Model with JavaScript. If not, please refer to the posts by Patric Much:
-- Reading list items
-- Adding a list item
-- Editing and deleting a list item
-- Checking a user's lists permission
If you would like to know how to create a view with the Client Object Model, please refer to my last post on COM:
Client Object Model – Creating list views
Overview
This post will describe how to change an existing list view. The code will show how to load the existing view and how to change its query. Additionally the sample will show how to overwrite the current query with a new one.
Preparing the list with the content web part
As in the last sample we will use a simple custom list with the default title column and some test items.
Add a content webpart to the list view and open the HTML view to insert the code.
Code Sample
Add a hyperlink to the HTML to call your JavaScript:
<a href="javascript:loadViewAndChangeIfExists()">Change View</a><script type="text/javascript">
As you can see, it will call a JavaScript function named "loadViewAndChangeIfExists".
In the next step we will append the code. What exactly the code does is described as comments:
<script type="text/javascript">
//declare a variable for the exisitng view
var existingview;
function loadViewAndChangeIfExists()
{
//get the current client context
clientContext = new SP.ClientContext.get_current();
//if the client context exists - proceed
if (clientContext != undefined && clientContext != null) {
//get the current web
var web = clientContext.get_web();
//get all lists
var listCollection = web.get_lists();
//get te current list by name - alternative use getById(guid)
var list = listCollection.getByTitle("COM");
//get all current views of the list
var viewcollection = list.get_views();
//get the view that you will change
this.existingview = viewcollection.getByTitle("MYVIEW");
//load your existing view and execute async
clientContext.load(existingview);
//the asynchronous execution will try to load the existing view
//if the view does not exist - it will call onQueryFailed - else it will call changeView
clientContext.executeQueryAsync(Function.createDelegate(this, this.changeView), Function.createDelegate(this, this.onQueryFailed));
}
}
function changeView() {
//the varible existingview is now loaded with your view
//get the current CAML query
var existingquery = existingview.get_viewQuery();
//do somnething with the exisitng query here
//...
//reset the query (as sample)
existingquery = "<Where><In><FieldRef Name=\"ID\" /><Values>";
//add a CAML filter with the current selected items
var selectedItems = SP.ListOperation.Selection.getSelectedItems();
var i;
for (i in selectedItems) {
existingquery += "<Value Type=\"Counter\">" + selectedItems[i].id + "</Value>"; //add
}
//close the CAML XML
existingquery += "</Values></In></Where>";
//assocciate the existing view with the changed query
existingview.set_viewQuery(existingquery);
//update the view!!!
existingview.update();
//execute the statements async - onQuerySucceeded for success - onQueryFailed for errors
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQueryFailed(sender, args) {
//show error message ()stacktrace
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
function onQuerySucceeded() {
//show successful message
alert('View successfully changed!');
}
</script>
Save and close the content of the content editor webpart and stop editing the page. Your listview should now look something like this:
Testing the functionality
To test the functionality, select a few list items and click on "Change View".
If nothing went wrong, you should now receive the message "View successfully changed!".
Switch to the "List" tab and check if your view really exists. It should contain all items you have selected before you pressed the link "Change View":
Result Realized!
 |
Created by Matthias Glatz |