In SharePoint 2007 there is a well known trick for opening up a list’s forms (New/View/Edit) in design mode – append ?ToolpaneView=2 onto the url – this is often used to add instructions or javascript using a Content Editor Web Part (CEWP) e.g.

• Showing a records ID on the View and Edit forms
• Setting a default duration for new SharePoint calendar events

However when I first tried to use my tried and tested shortcut in SharePoint 2010 I came a little unstuck as now the New/View/Edit forms appear in a fake popup window and modifying the URL doesn’t work.

There are two ways to do this in SharePoint 2010 – and once you know where to find them they should actually make life that little bit easier.

The first is to open up the form in a new window and then add ToolpaneView=2 onto the end of the URL, so

Right click on Add new Item or the lists Title field and select Open in New Tab or hold down CTRL while left clicking.

Alternatively you can do this using the new-fangled ribbon toolbar – select under List Tools the List tab, then on the right hand side of the ribbon you should see an icon for Form Web Parts which gives a menu of the different forms associated with the list that you can edit.

ID’s are a convenient, often short, way to uniquely refer to something. Unless you’re the Tax man who seems to believe he can’t get through his day without giving me, thats just one person, 7 unique id’s – presumably one for each extremity that we would like a piece off…

I digress… ID’s – SharePoint uses an ID for each item in a list and sometimes its handy to know them “Ere Bob – have you done task 1234 yet?”

You can easily add them to the list view (Modify this View then find the ID column, click display)

But what about if you want to see this on the View and Edit forms? (You can’t see it on the New form as it doesn’t get an ID assigned until you’ve created it)

You can’t do this in the UI. You can create a custom View/Edit form using SharePoint designer but its quite complex, is a pain when we add new fields and its fraught with potential problems.

So instead we’re going to look into every ones favourite SharePoint UI hacking tools – the Content Editor Web Part (CEWP) and javascript/jQuery.

Not so fast though young Jedi – before embarking on any of these hacks you should understand the pros and cons and this excellent article is a good place to start – jQuery : The SharePoint band aid.

Right now you’re back (you did read it right?) and understand what you’re getting into.

Open up the View page for any of your list items and add ToolPaneView=2 onto the end of the URL to open up the page in edit mode.

Note – if you already have a query string (&ID=xzx…) on the end of the url then you need to use &ToolPaneView=2 and if you don’t its ?ToolPaneView=2 e.g.

http://yoursite/Lists/Tasks/DispForm.aspx?ID=1

=> http://yoursite/Lists/Tasks/DispForm.aspx?ID=1&ToolPaneView=2

http://yoursite/Lists/Tasks/DispForm.aspx

=> http://yoursite/Lists/Tasks/DispForm.aspx?ToolPaneView=2

Next add a Content Editor Web Part (CEWP) to the page and put the following code into it using the Edit Source button.

Content Editor Web Part (CEWP)

Add the javascript at the bottom of this article and after you click OK you will see that ID has been added at the top of the form. Do the same on the Edit form.

<script type="text/javascript"
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">

$(function() {
  // Get the ID from the query string
  var id = getQueryString()["ID"];

  // Find the form's main table
  var table = $('table.ms-formtable');

  // Add a row with the ID in
  table.prepend("<tr><td class='ms-formlabel'><h3 class='ms-standardheader'>ID</h3></td>" +
	            "<td class='ms-formbody'>" + id + "&nbsp;</td></tr>");
})

function getQueryString() {
  var assoc = new Array();
  var queryString = unescape(location.search.substring(1));
  var keyValues = queryString.split('&');
  for (var i in keyValues) {
    var key = keyValues[i].split('=');
    assoc[key[0]] = key[1];
    }
  return assoc;
}
</script>

Notes

• This has been tested in WSS3 (SharePoint 2007) and SharePoint 2010 Foundation – I would expect it to also work in MOSS/SharePoint 2010 Server.
• The method  for adding a CEWP to the page in SharePoint 2010 is slightly different.
• When looking for references I found that Christophe beat me to it by about, ohh a year and a half and his version can be found here.

He doesn’t use jQuery so there is a little more code to write. If you’re just doing this or can’t use jQuery on your site (e.g. no network access) then you may be better off with his version. If you want to do other thigns on the form you may be better with the jQuery version above.

Tristan asked in another post

“When a calendar event is being created, I want the end date/time to automatically populate to 1.5 hours after the start date/time.  Seems simple, but haven’t found a formula for this yet”

Sounds like a pretty reasonable suggestion and the Calendar lists NewForm.asx already sets the Start time to the current time – shouldn’t be too hard, right?…

Using the Default Value setting

You can use formula like (1/24th of a day or 1 hour to the rest of us  is 0.04167!)

=[Created]+0.04167

But we can’t use the Created/Modified field in the formula for a new record because it doesn’t exist yet.

OK, so what if  we try and use this in the Default Value column as

=Today+0.04167

This will always be ‘Today at 1AM’ rather than ‘Today in exactly 1 hour’ as Today uses 12:00 AM as the time offset. Unfortunately there is no [Now] function in SharePoint.

Its a moot point though as we can’t edit the default value of the Start and End times in a Calendar list anyway.

FAIL! Onto Attempt #2…

Editing NewForm.aspx

When adding a new record to the Calendar SharePoint uses NewForm.aspx so what about modifying that?

We could use SharePoint Designer to customize NewForm.aspx but its quite complex, lots of people don’t like using it and its fraught with potential problems. Sure it gives us much more power but for our purposes its overkill so we are going to get a little hacky. As it turns out its not the cheerleader who’s going to save the World -  its jQuery!

• Click “New” in your Calendar to open up NewForm.asxp

• Add &ToolPaneView=2 onto the end of the URL to use a neat workaround to open up the list form in edit mode.

• Add a Content Editor Web Part to the page

• Click Open the toolpane or Edit > Modify Share Web Part

• Click Source Editor and paste in the following JavaScript :-

(Tip – if you want to put instructions on your form this is an ideal way to do it – select Rich Text Editor)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">

  // Set the hours to add - can be over 24
  var hoursToAdd = 1;
  // Mins must be 0 or div by 5, e.g. 0, 5, 10, 15 ...
  var minutesToAdd = 30;

  // JavaScript assumes dates in US format (MM/DD/YYYY)
  // Set to true to use dates in format DD/MM/YYYY
  var bUseDDMMYYYYformat = false;

  $(function() {

	// Find the start and end time/minutes dropdowns by first finding the
	// labels then using the for attribute to find the id's
	// NOTE - You will have to change this if your form uses non-standard
    // labels and/or non-english language packs
	var cboStartHours = $("#" + $("label:contains('Start Time Hours')").attr("for"));
	var cboEndHours = $("#" + $("label:contains('End Time Hours')").attr("for"));
	var cboEndMinutes = $("#" + $("label:contains('End Time Minutes')").attr("for"));

	// Set Hour
	var endHour = cboStartHours.attr("selectedIndex") + hoursToAdd;
	cboEndHours.attr("selectedIndex",endHour % 24);

	// If we have gone over the end of a day then change date
	if ((endHour / 24)>=1)
	{
		var txtEndDate = $("input[title='End Time']");
		var dtEndDate = dtParseDate(txtEndDate.val());
		if (!isNaN(dtEndDate))
		{
			dtEndDate.setDate( dtEndDate.getDate() + (endHour / 24));
			txtEndDate.val(formatDate(dtEndDate));
		}
	}

	// Setting minutes is easy!
	cboEndMinutes.val(minutesToAdd);	

});

// Some utility functions for parsing and formatting - could use a library
// such as www.datejs.com instead of this
function dtParseDate(sDate)
{
	if (bUseDDMMYYYYformat)
	{
		var A = sDate.split(/[\\\/]/);
		A = [A[1],A[0],A[2]];
		return new Date(A.join('/'));
	}
	else
		return new Date(sDate);
}

function formatDate(dtDate)
{
	if (bUseDDMMYYYYformat)
		return dtDate.getDate() + "/" + dtDate.getMonth()+1 + "/" + dtDate.getFullYear();
	else
		return dtDate.getMonth()+1 + "/" + dtDate.getDate() + "/" + dtDate.getFullYear();
}

</script>

A few notes

• You set the number of hours and minutes to add at the top of the script
• You can add more than 24 hours and if you go over a day boundary it will set the end date appropriately.
• This will only work with US MM/DD/YYYY style dates or DD/MM/YYYY (be sure to set bUseDDMMYYYYformat) appropriately – if your site regional settings uses something different then you are going to have to look at a JavaScript date function library such as Matt’s or Datejs.
• If you are doing a lot of this type of thing you may want to check out these two CodePlex projects spjQueryField and SPFF
• If you are going to re-use this script in different areas you should consider placing it in a document library and referencing it using the CEWP “Content Link” as Joels post shows
• This has only been tested on WSS3 & MOSS 2007