CEDANIEL.COM

This post applies to Microsoft Office SharePoint Server 2007, WSS 3.0, and JavaScript

Scenario: You are tasked to build a custom List for your project that will need a Custom .aspx page to display the data by a user. You will build the Custom .aspx page using SharePoint Designer to create a Custom List Form that is set to use the “Display item form” option. This option creates a WebPart that utilizes the default Rendering Templates found in SharePoint’s 12 Hive. When viewing the custom .aspx page the WebPart displays a “Close” button above and below the form. Your design requires that you remove these close buttons from the view. For whatever reason, you are also not given access to the SharePoint server’s 12 Hive to build a custom defaulttemplates.ascx file which could be used to fix your button situation. So.. how do you fix this problem.

Solution: In most cases, you will find the solution to this problem by creating a custom defaulttemplates.ascx page in the 12 Hive as mentioned above. All rendering templates for the lists are defined in the defaulttemplates.ascx file located in the 12 Hive: C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\CONTROLTEMPLATES. There are many blogs referencing this technique. However, I had to solve this problem and did not find anything about it which described how it could be accomplished using JavaScript. I’m sure there is a blog out there somewhere telling you how to do this, but I couldn’t find it.

Here is my answer:

First, you need to create the custom .aspx page in SharePoint Designer:

• Using SharePoint Designer – File –> New –> ASPX
• NEXT – Insert –> SharePoint Controls –> Custom List Form.
• In the “List or document Library Form dialog”
• Choose from the drop-down which list you would like to display your data from. Make sure “Item” is listed (If you choose a List) in the “Content type to use for form” section.
• Choose “Display item form (used to view list items). Uncheck the “Show standard toolbar” checkbox.
• This inserts a DataFormWebPart with the default “Close” button above and below the WebPart.
• Now Save the custom ASPX page so that you can view it in a browser. You will need to get some information as the Webpart is displayed in the browser.

While the new ASPX page is displayed in the browser, use the “View Source” option supplied by your to view the code rendered to the browser. Do a “Find” for the word “Close” to locate the “Close” button in the source. The default SharePoint Display Form will create two close buttons that have two different IDs. Copy the ID of both buttons to a text editor to be used later.

Now go back to SharePoint Designer and edit the newly created ASPX page again. Change SharePoint Designer to “Code” view so that you can edit the code generated behind the page.

Locate the following tags at the end of the WebPart:

</WebPart>
</WebPartPages:ListFormWebPart>
</ZoneTemplate></WebPartPages:WebPartZone>

Now paste the following code after the above tags and before the </asp:Content> tag:

<!– Custom JavaScript to hide the Close Button –>

<script language=”javascript” type=”text/javascript”>
document.getElementById(’ctl00_m_g_70071543_6580_408e_9e3e_d1891effd863_ctl00_toolBarTbl_RightRptControls_ctl01_ctl00_diidIOGoBack’).style.display = ‘none’;
document.getElementById(’ctl00_m_g_70071543_6580_408e_9e3e_d1891effd863_ctl00_toolBarTbltop_RightRptControls_ctl02_ctl00_diidIOGoBack’).style.display = ‘none’;
</script>

In the above JavaScript, you will need to substitute your Button IDs with the getElementByID definitions. You will have 2.

Now Save your .aspx page in SharePoint Designer. Navigate back to the custom .aspx page in your Browser and Refresh the page. You should now see the “Close” buttons Disappear!

You should be able to use the above technique with other form elements (”Save” or “Cancel”) if needed.