Friday, September 11, 2009 7:19 PM
Jan Tielens
Make SharePoint 2007 Act Like SharePoint 2010 (sort of ...)
[This script has been updated over here] 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? Just download this script file [This script has been updated over here] 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:
-
-
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).
[This script has been updated over here]
Filed under: SharePoint