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:

  1. Navigate to the page where you would like to use it (e.g. http://yoursite//Lists/Tasks/AllItems.aspx for the Task list).
  2. Click Site Actions, Edit Page (top right).
  3. Click Add a Web Part.
  4. Select the Content Editor Web Part in the Miscellaneous section and click Add.
  5. 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).
  6. Click open the tool pane in the web part.
  7. Click Source Editor ... in the properties task pane.
  8. Copy and paste the modified script in the Text Entry dialog and click Save.
  9. 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]

11 Comments

  • I got this to work on a Task List, but I have a Custom List where I'm trying to implement this, (Column Name "Approval Status") and it's not showing up at all - I'm not even seeing the debug traces.

  • Instead of the space in "Approval Status" you'll have to use _x0020_ .

    You can use a .replace() to make it show properly on the control.

  • It’s not working in MOSS 2007 SP2 in Spanish. When I change the “priority” or the “status” of a task the new value is displayed in the “attachment” column and it’s not saved, if I refreshed the page the changes are gone. I try changing the columns names to English and now it’s working properly.

    But I need the columns name in Spanish. Maybe the columns displayed their names in Spanish but internally they are declared in English

    How can I fix this? Help, please.

  • Ramon, I'll adjust the script so you can have intern column names and display values. Stay tuned and thanks for the feedback.

  • I'm not sure of the syntax needed to account for the space in my column name.

    Should the line read:

    columns :new Array("Approvalx0200Status"),

    or

    columns :new Array("Approval%20Status"),

    Nether has worked.

  • Jan,

    never mind... I totally forgot to update the function name (AddListMenuItems) to the correct one!

    KR,

  • Hi. Nice as usual!

    It works, sort of. The Change text doesn't appear in the column I'm updating but rather before the first field and with no formating on the text.

  • I am testing this on a Custom List. I have a column named "Status" with 3 choices (Requested, Activated and Declined). I changed the necessary lines as below

    var ajaxListConfig = {
    columns :new Array("Status"), // columns to ajaxify
    values :new Array(
    new Array("Requested", "Activated", "Declined"), // values for Status
    ),
    debug :0, // set to 1 to see log messages
    animationSpeed :"fast" // possible values: "slow", "normal", "fast" or a number (milliseconds)
    };

    However it is working on Tasks list. Am I doing something wrong?

  • Hi,

    I've been testing your solution for a while. do you test it on lists with a lot of items. I'm getting this error from IE all the time:

    "A script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer may become unresponsive."

    Any ideas?

    Thanks for your inspiring solutions :)

  • Hi Jan

    Thanks for the interesting stuff. It worked great on the normal task list. But when the task list items are grouped there were some problems in updating the correct cell. I have changed the getItemTD function as below to make it work with grouped lists

    function getItemTD(column, tableid, itemid) {
    // This function retrieves the TD (table cell) that contains the data for the
    // specified item and column.

    // first check if the requested TD is in the cache
    if(ajaxListConfig.cachedItemColumn != column || ajaxListConfig.cachedTableID != tableid ||
    ajaxListConfig.cachedItemID != itemid || ajaxListConfig.cachedTD == null) {
    // not in in the cache, let's get it
    ajaxListLog("- Building new TD");

    ajaxListConfig.cachedTableID = tableid;
    ajaxListConfig.cachedItemID = itemid;
    ajaxListConfig.cachedItemColumn = column;

    // escape the table id ({ and } should become \{ and \}
    tableid = tableid.replace(/{/g, "\\{").replace(/}/g, "\\}");

    // select them TR for the item
    $itemrow = $("#" + tableid + " table[id='" + itemid + "']").parent().parent();

    // select the header row
    // $headerrow = $(">tr:eq(0)", $itemrow.parent().parent());
    $headerrow = $(".ms-viewheadertr")


    // select the table in the header row for the specified column
    $idtable = $("th>div>table[Name='" + column + "']", $headerrow);

    // calculate the index of the column, based on the idtable
    var columnIndex =$(">th",$headerrow).index($idtable.parent().parent())+1;

    // based on the index, let's get the TD
    ajaxListConfig.cachedTD = $(">td:eq(" + columnIndex + ")", $itemrow);

    }
    else
    ajaxListLog("- TD retreived from cache");

    return ajaxListConfig.cachedTD;
    }

    Regards
    Sriram.V

  • Really interesting article (20506).

Comments have been disabled for this content.