Make SharePoint 2007 Act Like SharePoint 2010 (sort of …)
Guest Author: Jan Tielens
I’m pretty sure every SharePoint enthusiast has seen those great Sneak Peek videos Microsoft released some time ago. And I’m sure that lots of the new features shown were very exciting for lots of you. Since SharePoint 2010 is still quite far away in the future, let’s try to bring some of the 2010 stuff to SharePoint 2007!
In the overview video, Tom Rizzo showed some new user interface functionality, pretty much all of it was heavily using asynchronous Javascript code to dynamically do updates, change layouts etc. All of this of course to prevent those nasty full page reloads. One of the features that caught my eye was the inline editing of list items or documents: without reloading the page, or opening a new page, it’s possible in SharePoint 2010 to edit meta data. Pretty cool! And I want to have it in my SharePoint sites, today.
In my previous post I showed how you can add extra functionality to the Edit Control Block (ECB), let’s take that technique and make it more flexible and customizable. Here is the result I’m looking for:
Notice that everything you see is happening completely at the client side, without any code deployed to the server, without any full page postbacks. So how do you get this working in your SharePoint sites? You can download the script from Jan’s original article and open it. On top of the script you’ll find the ajaxListConfig variable which you can change to customize the script:
var ajaxListConfig = {
columns :new Array("Status", "Priority"), // columns to ajaxify
values :new Array(
new Array("Not Started", "In Progress", "Completed",
"Deferred", "Waiting on someone else"), // values for Status
new Array("(1) High", "(2) Normal", "(3) Low") // values for Priority
),
debug :0, // set to 1 to see log messages
animationSpeed :"slow" // possible values: "slow", "normal", "fast" or a number (milliseconds)
};
When you download the script, it’s configured for a default Task list. If you want to enable it on other list types or Document Libraries, or you’re running SharePoint in another language than English the following options need to be changed:
- columns: in the array you need to type the names of the columns you want to ajax-enable
- values: for every column defined in the columns option, you need to provide an array of values
Optionally you can set the debug option to 1, so a log window is being displayed in case something goes wrong. The animationSpeed option allows you to set the speed of the fancy fade in and out effects for the updated values. When all options are set, follow these steps:
- Navigate to the page where you would like to use it (e.g. http://yoursite//Lists/Tasks/AllItems.aspx for the Task list).
- Click Site Actions, Edit Page (top right).
- Click Add a Web Part.
- Select the Content Editor Web Part in the Miscellaneous section and click Add.
- Optionally drag the Content Editor Web Part to the bottom of the screen (otherwise a small space will be displayed on top of the page).
- Click open the tool pane in the web part.
- Click Source Editor … in the properties task pane.
- Copy and paste the modified script in the Text Entry dialog and click Save.
- Click Exit Edit Mode (top right) and verify the result.
Remember when the script doesn’t work as expected, set the debug option to 1 and you’ll see the log messages appearing at the bottom right of the screen. Btw, thanks my Twitter buddies who tested the script! (feel free to follow @jantielens).
Download the script from Jan’s Original article.
Guest Author: Jan Tielens
Jan Tielens is .NET Architect and Trainer at U2U (http://www.u2u.be). He focuses on Information Worker technologies including SharePoint and Office.
Jan is Microsoft Most Valuable Professional (MVP) for Office SharePoint Server and he is well known in the SharePoint community as the author of the SmartPart. You can read his weblog at http://weblogs.asp.net/jan and follow him via twitter at http://twitter.com/jantielens.
- Make SharePoint 2007 Act Like SharePoint 2010 (sort of ...)
- Make SharePoint 2007 Act Like SharePoint 2010, Updated
This is most interesting; thanks for sharing it.
I’m hesitant about changing the core bits of Sharepoint… in that it may break something down the road. But this seems like it’s working playing with on our Dev server.
Mind you, the item editing without page reloads can already be done (since SPS 2003 / WSS 2) using the “Edit in datasheet” mode, no? Granted, that runs as an ActiveX office control, so this method is certainly cleaner.
OK, interesting. I’ve tried it and am wondering about the two lines of code (one commented out, the other not) in Custom_AddListMenuItems:
var currentValue = getColumnValueViaWS(column, ctx.listName, currentItemID, wsurl);
//var currentValue = getColumnValueViaHTML(column, ctx.listName, currentItemID, tableid);
If I leave the code as is, I do not get the EBC at all. I added a call to the log at the end of Custom_AddListMenuItems to indicate it was completed (just prior to the return statement) and it does not show up in the log.
If I swap two statements (uncomment the second one), I get the menu back, with the new items, but selecting from the submenu updates the wrong column – always “updating” the first.
Config: MOSS 2007, a simple “event” list with 3 content types, using a simple view limted to one content type, no other webparts added.
var ajaxListConfig = {
columns :new Array(”Absence Status”, “Absence Type”), // columns to ajaxify
values :new Array(
new Array(”Pending Approval”, “Approved”, “Rejected”), // values for Absence Status
new Array(”Appointment”, “Sick”, “Vacation”) // values for Absence Type
),
debug :1, // set to 1 to see log messages
animationSpeed :”fast” // possible values: “slow”, “normal”, “fast” or a number (milliseconds)
};
An update:
In getColumnValueViaWS, this line of code is failing, value of column is correct:
itemStatus = $itemElement.attr(”ows_” + column);
Almost forgot: using IE6, which I know handles the XMLHttpRequest differently – but this is at work and cannot upgrade to IE7/8 yet. Is this source of the problem?
Another update:
If you try to do this with a list column name that has a space in it, it fails in Ajax in jquery.min.js here:
var E=!o.support.hrefNormalized&&H&&F?J.getAttribute(G,2):J.getAttribute(G)
With the error: msxml3.dll: This name may not contain the ‘ ‘ character: