In the last post we created all the elements needed for this next piece, if you have that working then great.

First a couple of things

Get the latest SPServices version be sure to match the versions correctly especially where jQuery 1.7 and SPServices versions are concerned, changes in jQuery caused some problems in peoples libraries.  Put that library in the place you like to store them (_layouts, portal root, site collection, doc lib which ever I stuck it in my SPFolder in the site collection)

Add a new field to your Image Library, a checkbox and call it active.

Paste this code (after you modify the include statements to point at the places you stored them).

I haven’t put any error trapping in this code or loading pictures or messages to say activate at least one image you idiot but you can and I would if this was going on a real site. You could extend this code to get descriptions from the image library and if there was one add it to the slider text.

<link rel="stylesheet" href="/sites/SliderDemo/jQueryExtras/coin-slider-styles.css">
<script src="/sites/SliderDemo/jQueryExtras/coin-slider.min.js"></script>
<script src="/sites/SliderDemo/jQueryExtras/jquery.SPServices-0.7.0.min.js"></script>

<div id="gamesHolder" style="width:468px; height:280px; overflow-y:hidden">
    <div id="games">
    </div>
</div>

<script>jQuery(function($) {

    $().SPServices(
       {
         operation: "GetListItems",
         async: true,
         listName: "ImageLibrary",
         CAMLQuery : "<Query><Where><Eq><FieldRef Name='active' /><Value Type='Boolean'>1</Value></Eq></Where></Query>",
         CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='ows_FileRef' /></ViewFields>",
         completefunc: function(data)
           {
                var theMiddle="";
                $(data.responseXML).find("z\\:row, row").each(function(){
                    var getimage= "/" + $(this).attr("ows_FileRef").substring( $(this).attr("ows_FileRef").indexOf("#") +1 );

                    theMiddle +='<a href="' + getimage + '" target="_blank"><img src="' + getimage + '" alt="' + $(this).attr("Title") + '" /></a>';

                });

                $(theMiddle).appendTo('#games');
                $('#games').coinslider({ hoverPause: false, height:246, width:618});

            }
       }
    ); 

});
</script>

First some pre-reqs.

Download jQuery (latest) and Coin Slider jQuery plugin.

Place the jQuery library in a

Choose one.

• SPFolder
• _layouts
• Document Library
• Any old web you have access to

You need to choose a location, I prefer master pages and putting things in _Layout, but if you dont have access to the server then you could utilise SharePoint Designer to create a folder in a site collection, again here I prefer the top top top  level Site Collection so that anywhere I use this the same js files come from the same place and get cached.

Place the CoinSlider CSS and JS files either in the same location (not master page though) or perhaps in the local site collection you are about to create this content in.

In my Code example I have already a jQuery in my masterpage, so I dont load it again.  I put the other files in an SPFolder in the site collection call jQueryExtras, you can reference them  from where you put them.

Next you need an Image Library, just create one somewhere, ideally unique for the content you are to display, as later on I might get to publish the next article that loads the images using SPServices, but then I might not.

In this image library place the images you want to slide, these should ideally be “landscape” style better still CinemaScope style. Those long thin pictures just work better in sliders. All these images MUST be the same size.

I used images from another sliders content (the nivo slider which I struggled to get to work, it was just easier than trying to find content) you could use images from your own stock or the demo just remember to change the image sizes in the right places (css/js).

Now that you have your JS and CSS includes in your locations and your image library populated with images we can create a CEWP, so on the page you want this go create one and hit the EDIT Source Editor

Paste this lot in, it is important that you set the height and width in the javascript to match your images, if you don’t expect lots of formatting issues. I tried this on MOSS and in IE7+ it wornt work in IE6, which is a pain for me as I have to find another slider now.

 <link rel="stylesheet" href="/sites/SliderDemo/jQueryExtras/coin-slider-styles.css">
<script src="/sites/SliderDemo/jQueryExtras/coin-slider.min.js"></script>

<div id="gamesHolder">
    <div id="games">
       <a href="http://www.binaryjam.com/" target="_blank">
          <img alt="Wall-E" src="/sites/SliderDemo/SliderImages/walle.jpg">
          <span><b>Wall-E</b><br>A Film about a robot. </span>
       </a>
       <a href="http://www.binaryjam.com/" target="_blank">
          <img alt="Finding Nemo" src="/sites/SliderDemo/SliderImages/nemo.jpg">
       </a>
       <a href="http://www.binaryjam.com/" target="_blank">
           <img alt="Toy Story" src="/sites/SliderDemo/SliderImages/toystory.jpg"> </a>
       <a href="http://www.binaryjam.com/" target="_blank">
           <img alt="Up" src="/sites/SliderDemo/SliderImages/up.jpg"> </a>
    </div>
</div>
<script>jQuery(function($) {
	$('#games').coinslider({ hoverPause: false, height:246, width:618});
});
</script>

<!-- -->

<!- Force Stupid blog code window to be bigger -->

<!-- -->

Have fun

I’ve been getting the same error over and over again, but keep getting an error when trying to do anything.

Guid should contain 32 digits with 4 dashes (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx).

I had dutifully copied the example code from the MSDN site and got a web reference to the Lists Web Service of course

and commented out the URL code in the example because that points at their site, not mine, which is pointed to by my web reference.

/*Set the Url property of the service for the path to a subsite.*/ listService.Url = http://MyServer/sites/MySiteCollection/_vti_bin/Lists.asmx;

WRONG!!!!!

If you are getting this error then it is because you commented out the URL.

When you add a web reference you are adding a WSDL file which is then compiled.  The WSDL is not specific to your site location,

if you open up the WSDL XML the section right at the bottom is pointing to elsewhere, the root of the WebApplciation not the RootWeb / Site you are interested in.

<wsdl:service name="Lists">     <wsdl:port name="ListsSoap" binding="tns:ListsSoap">       <soap:address location="http://my.binaryjam.com/_vti_bin/lists.asmx" />     </wsdl:port>     <wsdl:port name="ListsSoap12" binding="tns:ListsSoap12">       <soap12:address location="http://my.binaryjam.com/_vti_bin/lists.asmx" />     </wsdl:port>
</wsdl:service>

You need that line in the code that sets the listService.Url value, without it you are going to go mad trying to track down this bug, cos I didn’t find the answer online, I had to use fiddler.  Of course this article will now exist.

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.

<script>

//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(‘<input id=”findThatTxt” type=”hidden”>Click <a href=”#” id=”advancedBrowse”>here</a> for advanced browse</span><br/>’);
        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(‘<IMG id=”previewImg” src=”‘ + previewImg+ ‘” />’);                          
                }
                else
                {
                    $(‘#previewImg’).show();
                    $(‘#previewImg’).attr(“src”,  previewImg);
                }
            }
            else
            {
                $(pictureFormFieldSelector).val(“”);
                if($(‘#previewImg’).length>0)
                    $(‘#previewImg’).hide();
            }
            return false;
        });
    }
});

</script>

There are many things that Designer can do and I’ve seen many an article on DVWP but what I didn’t know, until I saw @sympmarc do it, was customising a List form in designer, something I’ve done in Studio before with rendering templates etc but never seen it done on-the-fly as it were.

Where to start ?

Well designer of course, but what do I mean by that, what’s the best approach to do this ? Is there one. Yes, I think so and I got clues as to what I think this should be at SharePoint Saturday.

First we need somewhere to play so create yourself a test site and a list, create a few fields, it doesn’t matter what as this first post is just about how to go about editing a form.

Now open the Site in Designer, if you’ve never done this then a dialog will open and you have to select your site from the list you can see, or navigate to it somehow, but easiest is to just cut and paste the Site Collection URL into the box and click open, do not put a filename, so that default.aspx you pasted in there, just scrub that out. Great.

Now in Designer you should have your site collection open and in the Folder window, if you cannot see it hit Alt-F1, you can see the structure of your site.

Expand the Lists folder and the list itself and you should see something like this.

Here you can see two of my lists one stupidly named based on an announcements list, but key to what we are about to do you can see the specific pages of the forms associated with this list underneath the list itself.

This is what we are going to change.  First we are going to make a slight change to the NewForm.aspx.  BUT for safety sake we are not going to edit the original, you might make a mess, we are going to make a copy of it to make our changes and then make sure the list points at this version, then we can always switch it back.

So to do this, counter-intuitively open the NewForm.aspx by dbl clicking it now immediately “Save As” and type in the name AdvancedNewForm.aspx (or whatever you think suits your needs).  You could of course edit any of the forms like this.

Doing this (should) do two things, first it will make a copy of the new form under the list, but importantly it should have set the default form for an item to be our new version. 

You need to check this has happened, so right click the List in the folders windows and select properties. Now click the tab Supporting Files, the new item form should be pointing at your AdvancedNewForm.aspx.  If it is not then you can select it.

You do this by

N.B.Important step easily missed

   1. Select the Content type specific forms option for ITEM from the combo box

   2. For your new item form select the browse button and navigate to your selected form.

If you do not do step 1 then it will look like it worked but then refuse to change the item and you will go mad trying to figure out what is going on, cos designer will not tell you you’ve done it wrong.

Our new page should be open in the main window of designer by default it should be a split window for those happy with code and design surfaces, if you need to change this view at the bottom of the window is an option to change this, it’s easily missed so I point it out here.

Now in the code look for

    <asp:content runat="server" contentplaceholderid="PlaceHolderMain">

After this we are just going to put some text to customise our form, “Hello Word”, enter this text and save the form.  Go back to your site in a browser and click new on your list and you should see the custom form now and not the original. Not the most exciting example but this describes the process of doing that customisation.

You will be doing far more complicated customisations than this eventually, but it’s important to note how to start doing this.

For those devs amongst you this will go against the grain as directly editing source code on a live system with no Source Code Control. 

For every one there are some other practices you can learn from here where I made some mistakes and have paid for it in losing my changes.

Firstly when developing a complex solution for your form, DONT do it on live, take a copy of what you want to change a develop it on another site, on a dev machine, wherever just not on the live one, unless of course its not actually in use at the time you are doing it.

Secondly, if you have Visual Studio and TFS or other editor and source code control, take a copy of the changes and save them into a file under your TFS project and do checkins or create multiple copies called version 1,2,3 etc.  DONT just have your only copy in SharePoint.  I lost a lot of work when I mistakenly deleted a dev site collection of mine.

Just because this is an easy approach to developing don’t treat it as such. For each demo or customisation create a new properly named site collection that matches your TFS project, don’t call your site collection test you might delete it.

That’s it for this post.  A Simple guide on editing those custom forms in designer with a few tips to make sure you don’t mess up.

Despite having had SharePoint in the company since 2003, user adoption isn’t great, sure there is a Portal and lots of team sites, and Farms popping up all over the place (its a big, big company) when I finally get to meet real end users there is not a lot of love for the product.

Recently I’ve been getting requests for applications, copies of applications (all written in asp.net not SharePoint) which almost do the same job as the original but not enough to just clone it, but also the requirements are almost OOTB a SharePoint list.

Users seem to hate SharePoint, well hate is a little strong, but dislike the interface and functionality so much that they would genuinely consider forking out for a whole new app with all the requisite dev/hosting/support costs associated with it.

To save money for everyone I was tasked with making some tweaks to Lists to make the user experience better, but If I crack open Visual Studio then along comes a project with all the people and dev costs you would normally get, for not a lot of benefit on small amount of changes.

A change of approach was needed, I knew it, boss knew it, it was time to rip the film off the designer box and start hacking away.

Since then I’ve done a couple of demos projects and a couple of real world modifications to OOTB sites to make the users experience much more fluid a little less web page “refreshy”, more dynamic.

So in the following posts I’m going to describe how as a poweruser or dev tasked with saving money on projects and getting the most out of the platform you have, can start to make a few tweaks, hopefully you can use the code yourselves, yes! I said code! I am a developer after all, I’m not just adding a couple of images, I’m javascripting, jQuerying.  You can’t have dynamic without code anymore and an animated gif on it’s own isn’t enough.

Follow-up articles

Embracing the dark side – Part 2

Embracing the dark side – Part 3

the first task was run that Pre-Upgrade check, and along with the thousands of problems it threw up were a couple of interesting ones.

Firstly, Missing SiteTemplates.  Really How and more importantly WHERE, because it doesnt tell you, all I got was this

• name = Unknown, language = 1053, template id = 1, count = 2, status = Missing

I don’t even have language 1053 installed.

Secondly “The following event receiver assembly(s) are referenced by the content, but they are not installed on the web server”. Again how does that happen ? and WHERE.

Thirdly “The following feature(s) are referenced by the content, but they are not installed on the web server”, there is a bit of a theme here, can you guess what it is, yes WHERE!

So the answer was quick see if anyone has done something like this and lets create an mashup of those scripts.  So I take no credit other than the skeleton of this script. (For the originals see links at bottom of page).

So this is the kind of script I threw together, it’s not necessarily finished, but I thought that it would be handy to at least post it and perhaps someone might find it handy.

This only spits information out and not that well, I could spend longer formatting it, I probably will at some point.  You will have to edit it according to your own requirements, you will know what they are when you run the upgrade. Also this doesn’t do everything it’s a start though.

[void][System.Reflection.Assembly]::LoadWithPartialName("Microsoft.SharePoint")
###############################################################
#Get Base Objects
###############################################################
function GetBaseObjects
{
    trap {"The WebApplication URL is invalid"}
    $script:wa=[Microsoft.SharePoint.Administration.SPWebApplication]::Lookup($SiteUrl);
} 

###############################################################
#Main Processing Loop
############################################################### 

function ProcessWebApplication
{ 

    cls
    Write-Host "Starting Scan"
    $i=0;
    foreach ($site in $wa.Sites)
    {
        $siteCount=$wa.Sites.Count
           Write-Progress -id 1 -activity "Scanning SPSites" -status "Percent scanned: " -PercentComplete (($i / $siteCount)  * 100)
        $i++
        #Check for Missing Features
        foreach ($feature in $site.features) {
            if ($feature.definition -eq $null)
            {
                write-host ("Missing site feature:" + $feature.DefinitionId  + ", " + $feature.parent )
            }
        }
        foreach ($web in $site.AllWebs)
        {
            $ok=$true;
            $webCount=$site.AllWebs.Count
            #Check for this lang code as I have an
	    #    unidentified Template in this lang code
	    #Checking for lang rather than name as not sure whether
            #    unidentified is stored as that or null or whatever
            if ($web.Language -eq "1053")
            {
                if($ok)
                {
                    Write-Host("SPWeb:" + $web.Url )
                    $ok=$false;
                }
                Write-Host("Langauge is set to 1053 possible missing template")
            }
            $lists = $web.Lists | where {$_.EventReceivers.Count -gt 0}
            foreach ($list in $lists)
            {
                $evts = $list.EventReceivers
                if ($evts.Count -gt 0)
                {
                    foreach ($evt in $evts)
                    {
                        $found=$false
                        if ($evt.Assembly -like "BinaryJam.SharePoint.EvRcExample1*") { $found=$true }
                        if ($evt.Assembly -like "BinaryJam.SharePoint.EvRcExample2*") { $found=$true }
                        if ($evt.Assembly -like "BinaryJam.SharePoint.EvRcExample3*") { $found=$true }
                        if ($found)
                        {
                            if($ok)
                            {
                                Write-Host("SPWeb:" + $web.Url )
                                $ok=$false;
                            }
                            Write-Host("    " + $list.RootFolder.ServerRelativeUrl + ", " + $evt.Id +
                                       ", " + $evt.Class  + ", " + $evt.Type) 

                        } 

                    }
                }
            } 

            $web.Dispose()
        }
        $site.Dispose()
    }
    "Completed Scan"
    $web=$null
    $site=$null
} 

###############################################################
#Clean up your room
###############################################################
function CleanUp
{
    trap{continue}
    $script:wa=$null
} 

###############################################################
# Validate args
###############################################################
function ValidateArgs($arg)
{
    if ($arg.Length -ne 1 -or $arg[0] -eq "-?" )
    {
        Write-Host "Usage: .\FindingMissingStuff.ps1 <spsiteurl>";
        return $false;
    }
    $script:SiteUrl = $arg[0];
    return $true
} 

###############################################################
# Main
###############################################################
cls
if (ValidateArgs $args)
{
    GetBaseObjects
    ProcessWebApplication
    CleanUp
}

These are the two sites I gleaned the salient information from and I just embedded it within my own powershell structure I use for most my stuff.

http://blogs.blackmarble.co.uk/blogs/rhepworth/archive/2010/11/19/powershell-to-find-missing-features-in-sharepoint-2010.aspx

http://blog.falchionconsulting.com/index.php/2009/03/deleting-orphaned-event-receivers-using-powershell

I have been doing some messing about with jQuery in SharePoint and I want to understand what is going on when there are multiple declarations of different versions on a page.

The way it seems to work is last one referenced wins.  This is because the execution of the jQuery code sets window.jQuery = the current jQuery object.

I was wondering well what happens to the docReady function pointer stack, as that is surely contained within the version of jQuery that was executed.

Well truth is it’s complicated.  The code you see below will execute 161 and 144 code and the events will occur in each ones own code block (closures), but then the values you get out of jQuery are that of the last one executed despite it being a closure, because the clousre version of $ you call in your first doc ready returns the window.jQuery object,

not your closure so this code will always spit out 1.4.41.4.4 despite executing code

from both code blocks.

What does this mean, I haven’t got a clue, but I encourage you to debug this in firebug and see what code executes where, and if someone can explain to me why I see two function pointers in my 1.4.4 readyList code, that would be nice.

In conclusion I suppose I would say one version of jQuery would be nice on a page, if MS could kindly put something into sharepoint to manage it so we are all doing the same thing I’d appreciate that, and if the jQuery team could "just finish already"

Being good people using TFS for source code and task management you want an entry for each item to check.

Using the built in XML handling facilities from PowerShell this is an easy task.

First run SPDisposeCheck with the output set to XML You will get something like this

You can Easily read XML files in PowerShell with a simple statement

$xmldata = 1(Get-Content c:\test\out.xml)

Accessing the Elements is then just object notation

$xmldata.ArrayOfProblem.Problem

Will return an array of problem items that can be accessed in a foreach $problem and with $problem.ID

So the full code to do this is

 cls
[void][System.Reflection.Assembly]::LoadWithPartialName(“Microsoft.TeamFoundation.Client”)
[void][System.Reflection.Assembly]::LoadWithPartialName(“Microsoft.TeamFoundation.WorkItemTracking.Client”)

[psobject] $tfs = [Microsoft.TeamFoundation.Client.TeamFoundationServerFactory]::GetServer(“http://binaryjam.com:8080/tfs/defaultcollection”)
$WorkItemStore=$tfs.TfsTeamProjectCollection.GetService([Microsoft.TeamFoundation.WorkItemTracking.Client.WorkItemStore])

$project=$WorkItemStore.Projects["MyProject"]

$type=$project.WorkItemTypes["Task"]

$xmldata = 1

(Get-Content c:\test\out.xml) foreach ($problem in $xmldata.ArrayOfProblem.Problem){ $item = new-object Microsoft.TeamFoundation.WorkItemTracking.Client.WorkItem $type $item.Title = “This is an automated entry based on the output from an SPDisposeCheck” $item.AreaPath = “MyProject” $item.IterationPath = “MyProject\Iteration 2? $item.Description = “ID : ” + $problem.ID + ” Module : ” + $problem.Module + ” Method : ” + $problem.Method + ” Assignment : ” + $problem.Assignment + ” Line : ” + $problem.Line + ” Notes : ” + $problem.Notes + ” more : http://blogs.msdn.com/rogerla/archive/2008/02/12/sharepoint-2007-and-wss-3-0-dispose-patterns-by-example.aspx#” + $problem.ID $item.save() } 

You will want to test this on a TEST tfs project (something I recommend every team have else how are you going to figure out how it works)

The pain in the backside bit is now I’ve you have got to enter all the tasks into TFS which in itself is going to take ages.

Enter the wonderful world of Powershell !  This is the kind of repetitive task that PowerShell is good at it can loop thru things and use the .NET object model, Easy!

So here is a code snippet that rips thru aspx pages and creates the TFS entries.

It will use the Current Logged in User for the access and the "assigned To"

so if you need to change that, well I’ll let you figure that out.

You will need to need to change the TFS Url the ProjectName and possibly the WorkItemType (if you dont want tasks)