Tuesday, April 7, 2009

SharePoint Custom Field - jQuery Script in a List Form

I have just released on CodePlex the installable WSP solution files and the source code for this custom SharePoint field that enables jQuery to be added to list forms. It comes with two WSP files, one that deploys jQuery and one that does not (for farms that already have jQuery installed somewhere)

Useful for making minor rendering changes to controls and text in the new item, edit item or display item forms in a SharePoint list. The field has a custom editor which accepts the script to render on selected forms. Here's a screenshot of the field editor



As an example of its usage, I needed to enlarge the select lists in a multi-value lookup field in a particular list. To achieve that, I added an instance of this new type of field to the list, and configured the field with the following JavaScript:


var $multiselectLookup = $("td>button:contains('Add >')", $("table.ms-long")).parent('td');
$multiselectLookup
.siblings(':first')
.children('div')
.css('width','250px')
.children('select')
.css('width','300px');
$multiselectLookup
.siblings(':last')
.children('div')
.css('width','250px')
.children('select')
.css('width','300px');

4 comments:

Oskar said...

This is EXACTLY what I had on my todo list for the next time things got quiet. I'm glad you beat me to it!

Rohan said...

You can add content query web part on new and edit form pages which lets you add javascript. I think this is useful but FiedlType being global deployment, I am not sure how fruitful isi t for end users, unless we provide list of scripts they can use.

http://spyralout.com

Oskar said...

@Rohan: I see this more as a dev tool than as an enduser component. As a developer I would use this for jquery injection without having to edit the forms, to enable better client side validation, etc.

Additionally this approach can be extended to render javascript into the header, rows and footer of list views, which would make things VERY interesting.

dan rogy said...

My current project requires ability to display choice column value via color or image associated with a choice

But Sharepoint standard packaged misses that control

I am looking for available solutions on market

I came across

http://sharepointfields.com

Does anybody has experiece using it?