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.

The following post applies to WSS 3.0 or MOSS 2007:

Scenario: When you click the “New” button on a List to add a new item to the list, you want to hide some of the fields displayed to the user. This is useful when you have fields that you only want accessible to the user who has “Add” privileges (to add a new item). I found this in a post from a blog about a year ago. Very useful.

Solution: This can be performed in SharePoint Designer 2007. I recommend that you make a copy of your NewForm.aspx page and re-name it as a backup in case you mess this up. Then you can always save over it and try again.

Scroll down the NewForm.aspx page and look for the end of the </table> tag at the end of the </WebPart>.

#### INSERT javascript after these lines ###################
</WebPart>
</WebPartPages:ListFormWebPart>
</ZoneTemplate></WebPartPages:WebPartZone>
<IMG SRC=”/_layouts/images/blank.gif” width=590 height=1 alt=”">
</td>
</tr>
</table>
################################################

##### HERE IS YOUR JAVASCRIPT CODE TO ADD #############

<script language=”javascript” type=”text/javascript”>
_spBodyOnLoadFunctionNames.push(”hideRows”);
function hideRows()
{
var pageTables = document.getElementsByTagName(’table’);
var cName = null;
var formTables = null;
for(var i=0; i < pageTables.length; i++){
cName = pageTables[i].className;
if (cName == “ms-formtable”){
formTables = pageTables[i];
}
}
var rows = formTables.rows;
rows[rows.length-2].style.display = “none”;
rows[rows.length-3].style.display = “none”;

}
</script>

Save this and you will see a row disappear from the NewForm.aspx page.

Note: You will need to have JavaScript enable on the browser and make sure that the fields you are hiding are not “Required”. To hide more fields, just add another line in the sequence of the last line: rows[rows.length-3].style.display = “none”;