Continuing from the previous post, Customising a List form, we are now at the point when we can start to do something useful with these techniques as let’s face it adding hello world to a form doesn’t really add value.

So in this post I am going to add a customisation to make the input forms new or edit a little more useful and therefore encouraging user adoption.

Have you ever used the URL field ?  Perhaps formatted as a picture ? It looks like this on the form

Normal Picture Link

The absolute height of usability that one. Is it better in 2010, my other dev box is off at the minute. Thing is we can make this better.  In my scenario the user needs to select an image from an existing Image Library.

By providing the users with an extra “button” we can add some javascript to give them the ability to browse the image library right there in the add new item page (or edit) and select the image, no messing about cut and pasting urls, which for some users is just a little too much for them to deal with. Instead they See a picture like this to pick an image from



Below you can see the added hyperlink, the picture field populated and a preview image.

The more observant will notice this version picks thumbnails automatically.


The code to do this relies on jQuery being included in a master page, if you do not do this by default in your SharePoint implementation, then

  1. Consider doing so
  2. If not, you can always add a script tag referencing it in directly in the page

The example code below relies on you determining certain things and setting the code constants to the values you have determined, e.g. the Image List Name and Guid, the jQuery field selector for the picture block, this is something that can only be done by rendering the form and figuring out the ID of that first text box of the field.

In my example the jQuery selector is

 </p> <p>var pictureFormFieldSelector='input[id$="UrlFieldUrl"]';</p> <p>

Which locates an input box with the ID ending in “UrlFieldUrl”. The Real name, in my case, happens to be “ctl00$m$g_df4349ae_3a85_4882_93ef_c7c49eb75719$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$ctl00$ctl00$UrlFieldUrl”.

I use that tag to automatically add the HTML for the “Click Here” link and determine the layout of the page for adding the preview Image.

The code for the Dialog Picker is Standard SharePoint, the Asset Picker, and I took the idea from a blog post , in this chaps blog he is using it on a toolpart.


So here is the code I use to implement this in a page.


//NoConflict is enabled in my environment
//Pass to documentLoad this function 
jQuery(function ($) {

    //Constants that refer to the Image List
    //an attempt to generalise this code, fingers crossed
    var baseUrl=L_Menu_BaseUrl;
    var imageListName=”MyImageList”;
    var imageListGuid=”{F406F2AA-5518-4E46-86F5-9CDDC5CF8F38}”;
    //This is the jQuery selector to identify the specific Picture Block we are to target
    var pictureFormFieldSelector=’input[id$=”UrlFieldUrl”]’;
    //Grab the Form Element Block,
    var $formBlock=$(‘#onetIDListForm’);
    if ($formBlock.length>0)

        $(pictureFormFieldSelector).parent().prepend(‘Click here for advanced browse
        with(new AssetPickerConfig(‘myAssetPickerObj’))                                            
            DefaultAssetImageLocation=’~SiteCollection/’ + imageListName;                                                 
            ReturnCallback = null;
        $(“#advancedBrowse”).click(function() {
            if ( $(‘#findThatTxt’).val()!=”” )

       var imageLocation = $(‘#findThatTxt’).val();
       var urlStart = document.location.protocol + “//” +;
       var finalImg = urlStart + imageLocation;
       var editPoint = imageLocation.lastIndexOf(“/”);
       var previewImg = urlStart + imageLocation.substring(0, editPoint) + “/_t/” + imageLocation.substring(editPoint + 1).replace(/./g, “_”) + “.jpg”;

                    $(‘#previewImg’).attr(“src”,  previewImg);
            return false;