Wednesday, September 30, 2009 9:22 PM Jan Tielens

Make SharePoint 2007 Act Like SharePoint 2010, Updated

In my previous post I introduced a small script to extend the Edit Control Block (ECB) of list items and documents. The added menu items in the ECB allow users to update certain metadata fields for that item or document. The cool thing is that everything is happening in the background with the help of jQuery, even the actual updating of the data. The result: no postbacks or full page loads, pure AJAX goodness just like showcased in the SharePoint 2010 sneak peek videos. Today I’m releasing a new and improved version of the script, based on your feedback. Here are the changes:

Column names can have a display name and an internal name

In the previous version of the script you’d had to specify the names of the columns you’d like to ajaxify based on the internal name (which escapes spaces etc). In the new version of the script you can specify the display name as well. For example this is a possible configuration for a Task list:

columns: ["Status", "Priority", "% Complete#PercentComplete", "Description#Body"]

For the Status and Priority columns, no internal names are specified since they are the same as the display names. But notice that the next two columns have a # sign in them. The part preceding the # sign is the display name, the part after the # sign is the internal name from SharePoint.

Column values can have a display name and an internal name.

This works exactly as the column names, so if there is a # sign, the first part will be the display value, the second part will be the internal value. For example this is the array of values for the % Complete column of a task list:

["100%#1.00000000000000", "75%#0.750000000000000", "50%#0.500000000000000", "25%#0.250000000000000", "0%#0"]

Internally percentages are stored as values between 0 and 1. But we’d like show them as real percentages to the user of course: e.g. 100% will be displayed, while 1.00000000000 will be stored in SharePoint.

Multiple lists and document libraries can be configured in the same script.

Now you can also use the script if there is more than one list view web part on a page: in the lists option of the ajaxListConfig variable, multiple lists can be defined based on their name.

var ajaxListConfig = {
    lists:
        [
            {   name: "Tasks",
                columns: [ ... ],
                values: [ ... ] },
            {   name: "Issues",
                columns: [ ... ],
                values: [ ... ] },
        ],
    debug: 0, // set to 1 to see log messages
    animationSpeed: "fast" // possible values: "slow", "normal", "fast" or a number (milliseconds)
};

User entered values are now supported.

In the previous version, the user could only use the predefined values for a column (which makes lots of sense for Choice columns). In the new version, if the values option of a list configuration is equal to null (instead of an array of values), dialog is displayed in which the user can fill out a new value. For example in the Task list below, the Update Description menu item is displayed, but there is submenu to display the possible values.

 

When the user clicks on the Update Description menu item, a dialog is displayed to allow the user to modify the value. Once again there are no postbacks. To display the dialog I’m using the Imprompty jQuery extension (included in my script). Notice that there is no Rich Text editing (yet), so HTML tags will be stripped out. Also there is no support for editing Person fields etc.

 

Finally ...

... some small bug fixes and performance enhancements are done. To use the script, configure it to your needs (when you download it, it’s configured for a default Task and Issue list), then 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.
You can download the script over here. Let me know if you have any issues and/or any feature requests!
Filed under:

Comments

# re: Make SharePoint 2007 Act Like SharePoint 2010, Updated

Thursday, October 1, 2009 6:18 AM by Jaap Vossers

This is some great stuff Jan!

Thanks for sharing this and the ECB customisation articles. I have found them very useful!

# re: Make SharePoint 2007 Act Like SharePoint 2010, Updated

Wednesday, October 7, 2009 11:32 AM by Detlef

Great stuff since I track the activities of many folks with Tasks.  I do have 1 question.  I've created a calculated field as a combination of % Completed and Status with a graphical representation of it as well using colors.  How do I force an update of the calculated field in the List View when I update either the % Completed or Status fields?

# re: Make SharePoint 2007 Act Like SharePoint 2010, Updated

Friday, October 9, 2009 7:23 PM by Sham

Jan, this is fantastic. The complaints I most often get from users is that they have to go through so many clicks to update just one field; this solution solves that issue.

Can I show the context menu only for specific task items, for example if the task title is Update this task, then I want to be able to see Update Field Item, for all other tasks, I would like to see the rest of the options, like Update Status, Update Priority, etc

Thanks for a great posting!

# re: Make SharePoint 2007 Act Like SharePoint 2010, Updated

Tuesday, October 13, 2009 11:29 AM by peleejosh

I can't get this working for grouped lists.  Any tips?

# re: Make SharePoint 2007 Act Like SharePoint 2010, Updated

Tuesday, October 13, 2009 2:50 PM by eSam

Hi Jan,

Good stuff indeed. It appears to me though, after initial testing on my sharepoint site, that the workflows do not kick in when items are updated this way. Is that truly the case in your observation? I apologise if I missed your addressing of this issue - if it does exist.

If not, any ideas as to how this can be fixed?

Thanks

# re: Make SharePoint 2007 Act Like SharePoint 2010, Updated

Wednesday, October 14, 2009 8:44 AM by peleejosh

My workflows do kick in, but the data from the workflow isn't updated until the page is refreshed.