Binary Jam

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

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.

       http://fahadzia.com/blog/2009/11/using-sharepoint-image-picker-to-select-images/

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;                                                 
            CurrentWebBaseUrl=baseUrl;                                                 
            OverrideDialogFeatures=”;                                                 
            OverrideDialogTitle=”;                                                 
            OverrideDialogDesc=”;                                                 
            OverrideDialogImageUrl=”;                                                 
            AssetUrlClientID=’findThatTxt’;                                                 
            AssetTextClientID=”;                                                 
            UseImageAssetPicker=true;                                                 
            DefaultToLastUsedLocation=false;                                                 
            DisplayLookInSection=true;                                                 
            ReturnCallback = null;
        }}
        $(“#advancedBrowse”).click(function() {
            APD_LaunchAssetPickerUseConfigCurrentUrl(“myAssetPickerObj”);
            if ( $(‘#findThatTxt’).val()!=”” )
            {

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

                $(pictureFormFieldSelector).val(previewImg);
                if($(‘#previewImg’).length==0)
                {
                    $(pictureFormFieldSelector).parent().append(‘‘);                          
                }
                else
                {
                    $(‘#previewImg’).show();
                    $(‘#previewImg’).attr(“src”,  previewImg);
                }
            }
            else
            {
                $(pictureFormFieldSelector).val(“”);
                if($(‘#previewImg’).length>0)
                    $(‘#previewImg’).hide();
            }
            return false;
        });
    }
});

Marc Anderson was good enough to comment on my last post, a demo of creating a jQuery extension to the SharePoint search box to suggest Common Terms.

Marc’s comment was related to a compatability problem with safari and chrome when using the “z\:row” syntax as a selector, also to remind me of the SPServices library which makes calling sharepoints web services a little easier.

So just for him (well everyone really) here is the same example re-worked to use the SPServices library (stored locally in a Doc Library for this code).

Continue reading “jQuery autocomplete for SharePoint Search Box II” →

  I got chance to knock up another part, sorry no source code this time, but you might like the idea.

Using the idea from Amazon, ebuyer and MS of the SiteMap at the top of the page I thought I could do the same with my DynamicPanel.  So I created a Webcontrol (not a webpart!) that Spat out a PopperLink (see Ajax and Sharepoint) using the CreateLink method that called yet another httpHandler.

The handler iterates thru the Areas (like this)

Guid homeGUID = AreaManager.GetSystemAreaGuid(PortalContext.Current, SystemArea.Home);

Area homeArea = AreaManager.GetArea(PortalContext.Current, homeGUID);

foreach(Area area in homeArea.Areas)
{
if(!area.System)
textWriter.WriteLine (“<TD valign=’top’><TABLE><TR><TD valign=’top’><b><A href='” + area.WebUrl +”‘>” + area.Title + “</a><b></TD></TR>” + RecurseArea(area) + “</TABLE></TD>”);
}

private string RecurseArea(Area area)
{
string s=””
foreach(Area areaChild in area.Areas)
{
if(!areaChild.System)
s+= (“<TR><TD valign=’top’><A href='” + areaChild.WebUrl +”‘>” + areaChild.Title + “</a></TD></TR>”);
}

return s;
}

Simple Stuff (obviously I have surrounding tables too).

This produces a clickable partial page of links.  The HttpHandler is called by the popper and on clicking the Site Map link (see later) it Ajax calls the handler and puts the resultant html in the popup window.

Then using the techniques here Applying a Custom Banner I placed the asp.net control on the page in the new custom banner.

Hey presto Fancy Ajax dynamically populated Sharepoint 2003 Site Map.

Technorati tags: sharepoint, development, control, ajax, sitemap