If you have ever tried to make a Custom Edit form using SharePoint Designer you will come to find out that two things will happen. One you will not see the Attachments in the list and secondly you will not be able to attach a file. This post is not intended to tell you how to make a custom edit form but rather fix the Attachment issues. If you don’t know how to customize list forms you may consider visiting here
The solution involves using jQuery (http://www.jQuery.com). Before I get into how I resolved it let me share what the problem is and if you have a better solution other than jQuery; well good for you.
When you hide the web part on the list form, the children become hidden too. If you look at the source of the page you will see all the elements of the web part are still in th4e document, they are just not visible. So when you click on the “Attach File” button it is making the table with the list data to not be visible, sets the table with the upload dialog to be visible and sets the focus on the file input. Because the parent span element is hidden the children never become visible.
Steps:
- Look for a line that is something like “<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">” and right below it make a reference to the jQuery Library “<script src="_layouts/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>”. In my case it is on the SharePoint server in the layouts/jquery folder.
- On the next line make a container for your Upload Dialog. “<div id="divAttachDialogCont"></div>”
- On the Next Line make a container for your Attachment(s) View. “<div id="divAttachDisplayCont"></div>” Note: You are going to want to put this in the list table later and when you do the id will get update with a generate id at the end of it, that is ok we account for that.
- If you did not mess with page to much you should have a table tag in the xsl that equals <table border="0" width="100%"> we need to change it to read <table border="0" width="100%" id="tblCustomEditListForm" style="display:block">
- No go back to the top and under the line where you made the ref to the jQuery put this in (see below for the formated code). <script type="text/javascript"> $(document).ready(function() { $("#partAttachment").appendTo("#divAttachDialogCont"); $("#idAttachmentsTable").appendTo($("div[id^=divAttachDisplayCont]")); $("div#divAttachDialogCont input").focus(function() {$("#tblCustomEditListForm").css("display",$("#part1").css("display")); });$("div#divAttachDialogCont input").blur(function() {$("#tblCustomEditListForm").css("display",$("#part1").css("display")); });})</script>
What did we just do? Well we moved the elements out of the hidden parent and to an element that was not hidden. We added an events to all the input items in the table for the Upload Dialogs because this where the old list table is being set to be visible or not and we set our new table to equal the same value.
Hopefully helps, if it does not work, verify the source of the page an insure the ids are the same but I find that they seem consistant. OH and as promissed:
<script src="_layouts/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#partAttachment").appendTo("#divAttachDialogCont");
$("#idAttachmentsTable").appendTo($("div[id^=divAttachDisplayCont]"));
$("div#divAttachDialogCont input").focus(function() {
$("#tblCustomEditListForm").css("display",$("#part1").css("display"));
});
$("div#divAttachDialogCont input").blur(function() {
$("#tblCustomEditListForm").css("display",$("#part1").css("display"));
});
})
</script>
<div id="divAttachDialogCont"></div>
<div id="divAttachDisplayCont"></div>
...... some other code here for the web part then your new xsl template will take over make sure you add the Id and the style to your table as bolded below.
<xsl:template name="dvt_1">
<xsl:variable name="dvt_StyleName">ListForm</xsl:variable>
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
<table border="0" width="100%" id="tblCustomEditListForm" style="display:block">
<xsl:call-template name="dvt_1.body">
<xsl:with-param name="Rows" select="$Rows"/>
</xsl:call-template>
</table>
</xsl:template>