Customizing OOTB SharePoint forms

A few days ago a client wanted me to change the OOTB upload and edit forms. For the edit form you have several techniques. For the upload however, it becomes more difficult. So I started to look for solutions. An other thing the client wanted was to deletion of the items of the upload menu: 'Upload Document' and 'Upload multiple documents'.
These cannot be turned off using features and altering files like upload.aspx in the layouts folder will leave you with an unsupported installation.
What I actually wanted to do is manipulate these files without actually touching them. To achieve all this I used a combination of JQuery and an Http Module.

Hiding the 'Upload Document' and 'Upload Multiple Documents' menu items:
First of all, keep in mind that this solution will have it's effect on all libraries using the upload menu.
I created a copy of the default master page where I inserted some JQuery. First of all you need to insert a reference to the JQuery javascript file which is placed somewhere on a server.

I inserted a javascript reference to "/_layouts/custom/jquery-1.3.2.js" in the 'head' tag of my master page.
Then I also inserted a reference to my custom upload javascript file which will take care of the upload menu so I inserted a reference to "/_layouts/custom/customupload.js" in the 'head' tag aswell.
These two javascript files can be easily deployed with a feature for easy installation.

These are the contents of my customupload.js:

$(document).ready(function() {

$('.ms-splitbuttontext').find("a[id$='UploadMenu']").each(function(){

$uploadMenu = $(this).parent().parent();

$uploadMenu.html($uploadMenu.html().replace("Upload.aspx", "custom/CustomUpload.aspx"));

});

$('.ms-splitbutton').find("td[id$='UploadMenu_ti']").each(function(){

$(this).hide();

});

$('.ms-toolbar').find("menu[id$='RptControls']").each(function(){

$(this).find("[id$='Upload']").each(function(){

$(this).parent().parent().remove();

});

});

});

JQuery will first wait until the DOM is loaded and will then execute the javascript. The first part will first point the OOTB upload.aspx to my custom upload file where I have full control over its logic and branding.
The second part will hide the little arrow and will remove the two menu items.

Creating a custom upload.aspx
Now that the OOTB upload isn't used anymore, I made a copy of the OOTB upload.aspx and started that as a base for my custom upload form. I don't think it's really relevant to go into detail here but the things you can do are endless. First of all, by copying the OOTB upload.aspx you keep the normal SharePoint logic which works very well. Secondly, you can again start using JQuery/CSS to completely rebrand this page and hide parts you don't want the user to see. I for example have hidden the cancel button as well as the 'version comments' section.

Branding the edit forms
I know there are other ways to do this but using this method requires no actual editing of the files themselves and will apply the logic on many different places along the site collection.

First of all I created a Http Module. This module will look at every http request and when necessary will do some logic. Here's the code:

class HttpModule : IHttpModule
{

public String ModuleName
{
get { return "Http Module"; }
}

// In the Init function, register for HttpApplication
// events by adding your handlers.
public void Init(HttpApplication application)
{

application.BeginRequest += (new EventHandler(this.Application_BeginRequest));
application.EndRequest += (new EventHandler(this.Application_EndRequest));

}

// Your BeginRequest event handler.
private void Application_BeginRequest(Object source, EventArgs e)
{

HttpApplication application = (HttpApplication)source;
HttpContext context = application.Context;

// If we are loading a edit form, inject custom edit form javascript
if (context.Request.Url.ToString().ToLower().Contains("/forms/editform.aspx"))
{

context.Response.Write("");
context.Response.Write("");

}

}

// Your EndRequest event handler.
private void Application_EndRequest(Object source, EventArgs e){}

public void Dispose(){}

}

So what this is doing, is looking at each visited URL, and if it sees the user is visiting the edit form of a document library (forms/edit.aspx), it will inject to javascript references: one again to the JQuery and one to the customedit.js which will rebrand each edit form without actually touching it.

I will not go deeper into the JQuery in this article but if it becomes a regular request I will be more than happy to explain this part as well.

As you can see this techique gives you a lot of advantages: easily applying your logic where you want, you don't have to touch OOTB files, changing the branding over time is very easy (certainly when using features to redeploy adjusted javascript), ... .