SharePoint Custom List Form with 'Attach File' link working

The 'Attach File' link does not work in custom List Forms. This is a known issue as evidenced in the discussion threads below:

http://sharepoint07.wordpress.com/2008/02/05/customize-the-newformaspx/

http://social.msdn.microsoft.com/forums/en-US/sharepointcustomization/thread/d3ebb776-f80d-46aa-9cb9-38f90652d001/ (this thread also contains some alternate approaches to resolving this issue)

Listed below are the 2 MS Support articles related to this issue:
http://support.microsoft.com/kb/953271

http://support.microsoft.com/kb/960311

In my case, I had to sort of combine the resolution steps provided in the 2 MS Support articles above. You will see this in my "12 Steps" below.

First and foremost, you need to ensure that you have this configuration in your environment:

1. SP2 (with latest cumulative updates) for SharePoint
2. SP1 for SharePoint Designer (SPD) 2007
3. Install KB960311

I got the steps listed below to work only in the above configuration.

If you have SP2 for SharePoint Designer installed, then you need to remove SPD 2007, re-install it. When you re-install SPD 2007, SP1 will be included in it. You don't have to install SP1 for SPD separately. Then you need to install KB960311. Thanks to my astute Manager, Yoshio Kurtz, for this tip regarding SPD configuration. I would not have been able to resolve this issue without Yoshio's help.

If you have SPD 2007 + SP2, and then try to install KB960311, you will get the following error:

The expected version of the product was not found on the system.

KB960311 does NOT work with SPD that has SP2. It works with SPD that has SP1.


"12 Steps "

1. Created a new List in SharePoint.

2. Ensured that the ‘Attach File’ link works.

3. Ensured that I can view the ‘correct’ Web Part properties window for the default ListFormWebPart in SPD.

4. Added a ‘Person or Group’ column to the List in SharePoint.

5. Ensured that the ‘Attach File’ link works.

6. Created the custom New Form (this gets rendered in a DataFormWebPart) in SPD. I chose to create it outside the WebPartZone.

7. Closed and hid the default ListFormWebPart in SPD. Saved changes. Configured the List to use the custom New Form using the ‘Supporting Files’ tab in SPD.

8. Ensured that the ‘Attach File’ link works.

9. Edited the custom New Form in SharePoint using the ‘&ToolPaneView=2’ URL option, and added a Content Editor Web Part (CEWP).

10. Moved the CEWP to the bottom of the page using SPD. The CEWP was also placed outside the WebPartZone.

a. So the order in which the Web Parts are "situated" in the page are:

i. FIRST, Default ListFormWebPart inside the WebPartZone

ii. SECOND, Custom DataFormWebPart outside the WebPartZone

iii. LAST, CEWP outside the WebPartZone

11. Using SharePoint, added JavaScript code, in the CEWP, to hide/show the People Picker control based on the value selected in a drop down list. Check out my post for the JavaScript code.

12. Tested the Form. Custom Fields work, Hide/Show conditions work, and above all ‘Attach File’ works. I also tested it with multiple files and it worked too.

Using JavaScript event handlers in SharePoint List Form Page

I created a custom List Form page based on the default NewForm.aspx page. The custom Form includes a drop down list called Security Level, and a People Picker control (which is a pretty handy OOB SharePoint control). The People Picker control needs to be displayed only when a specific value is selected in the Security Level drop down list. Therefore I needed some sort of event handler that would check for the value selected in the drop down list and hide (or show) the People Picker control. And this event handler would need to be triggered on the "load' event of the custom Form, as well as the "onchange" event of the drop down list field.

Credits:
http://blogs.msdn.com/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx

http://boris.gomiunik.net/2008/04/add-functions-and-events-to-sharepoint-form-fields/

Here is the JavaScript solution that I came up with. I left the alert statements in the code, for debugging purposes. Insert this code in a Content Editor Web Part and ensure that it is hidden. Also, place the Content Editor Web Part at the very bottom of the page.

IMPORTANT: Insert the JavaScript OR operator (i.e. double pipe) after the identifier == "" portion in the if() statement in the getTagFromIdentifierAndTitle() function below. For some odd reason the OR operator gets removed whenever I publish the post.

<script type="text/javascript">

//This code runs on the onload event of the custom Form
_spBodyOnLoadFunctionNames.push("getSecurityLevelValue");

function hidePeoplePicker() {
//alert("HIDE");
var control = getTagFromIdentifierAndTitle('textarea','UserField_downlevelTextBox','People Picker');

control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";

}

function showPeoplePicker() {
//alert("SHOW");
var control = getTagFromIdentifierAndTitle('textarea','UserField_downlevelTextBox','People Picker');

control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="";

}

function getTagFromIdentifierAndTitle(tagName, identifier, title)
{

//alert("tagName = " + tagName);
var len = identifier.length;
//alert("Len = " + len);

var tags = document.getElementsByTagName(tagName);
//alert("tags length = " + tags.length);

for (var i=0; i < tags.length; i++)
{

var tempString = tags[i].id;

//alert("tempString = " + tempString);

//NOTE: Insert the OR operator after the identifier == "" portion in the code below
//For some odd reason the OR operator gets removed when I post the blog
if (tags[i].title == title && (identifier == "" tempString.indexOf(identifier) == tempString.length - len))

{

return tags[i];

}

}

return null;

}

function getField(fieldType,fieldTitle) {

var docTags = document.getElementsByTagName(fieldType);

//alert("Length = " + docTags.length);

for (var i=0; i < docTags.length; i++) {

if (docTags[i].title == fieldTitle) {

//alert("Value in getField = " + docTags[i].value);

return docTags[i];

}

}

}

function getSecurityLevelValue() {

//alert("In getSecurityLevelValue");
selectedId = getField('select','Security Level').options[getField('select','Security Level').selectedIndex].value;

//alert("Value in hide =" + selectedId);

if(selectedId != 'Specific User')

{

//alert("NOT Specific User");
hidePeoplePicker();

}

else

{

//alert("Specific User");
showPeoplePicker();

}

}

//This code runs on the onchange event of the drop down list field
getField('select','Security Level').onchange = function() {getSecurityLevelValue()};

</script>

Hide People Picker control in SharePoint List Forms

I am working on a project that requires the SharePoint OOB "People Picker" control to be hidden in a List Form Page. In my case, this control was in the "NewForm.aspx" page. But you can use the same code for hiding this control in the "EditForm.aspx" page as well.

I used the following online resources to figure out the JavaScript code to hide the "People Picker" control:

http://blogs.msdn.com/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx

http://www.cleverworkarounds.com/2008/02/07/more-sharepoint-branding-customisation-using-javascript-part-1/

Here is the JavaScript code. Insert this code in the "Source Editor..." window in a Content Editor Web Part.

IMPORTANT: Insert the JavaScript OR operator () after the identifier == "" portion in the
if() statement in the getTagFromIdentifierAndTitle() function below. For some odd reason the OR operator gets removed whenever I publish the post.

<script language="javascript" type="text/javascript">

_spBodyOnLoadFunctionNames.push("hideFields");

function hideFields() {

var control = getTagFromIdentifierAndTitle("Textarea","UserField_downlevelTextBox","People Picker");

control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";

}

function getTagFromIdentifierAndTitle(tagName, identifier, title)
{

var len = identifier.length;

var tags = document.getElementsByTagName(tagName);

for (var i=0; i < tags.length; i++)

{

var tempString = tags[i].id;

if (tags[i].title == title && (identifier == "" tempString.indexOf(identifier) == tempString.length - len))

{

return tags[i];

}

}

return null;

}

</script>

NOTE: The "People Picker" control was embedded 12 levels "deep" from the <tr> tag in my NewForm.aspx, and hence I had to use the code in the hideFields() function with 12 "parent" references. I used the awesome Firebug tool to view this hierarchy and to also find out the elusive tagName, identifier, and title info for the People Picker control. The Firebug tool is a FireFox browser addon, and is incredibly helpful when you need to look at raw HTML and JavaScript code that renders SharePoint pages.