Sunday, January 17, 2010

Hide Default Close button from List Form Web Part and add custom button to go back.

Default "Close" button returns to the "Allitems.aspx" page of the perticular list. If you want to navigate to the different page,then you have to add the following javascript which is used to hide the default button also add the custom button to navigate to the back page.

Step 1: Hide the default Close button
for( var j=0 ; j<2 ;j++) //Since we are having two buttons on the form.
{
var btnClose = GetElementByType("input", "button")

//var btnClose = newitm.parentNode.parentNode.outerHTML;
if(btnClose != null)
{

btnClose.outerHTML = ""; //Hide the parent tag of the button i.e. outerHtml.
}
}
function GetElementByType(tagName, type)
{
var a = document.getElementsByTagName(tagName);

for (var i=0; i < a.length; i++)
{
if (a[i].type)
{
if (a[i].type== type)
{
return a[i];
}
}
}
return null;
}

Step 2: Add custom button and navigate it to the back page.

Add the following values in to div inside ContentPlaceHolder tag .
where,

INPUT TYPE="button"
VALUE="Go Back"
onClick="history.back()"

Hide toolbar from List Form Web Part

If you have added list from web part in display mode and you want to protect that item from edit,delete and so on..You have to remove the toolbar then. There are two options to do this,
1. Open your custom page containing Web Part in SharePoint designer and convert the code in to XSLT format. Then select the toolbar from design mode and remove it.
2. If you can not convert it to the XSLT format, use the following javascript. Write it inside the ContentPlceHolder tag.


var newitm = GetElementByText("a", "New Item") // find out "New Item" link first i.e 'a' tag.

var toolbar = newitm.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.outerHTML; // find out the "table" tag as its parent node and its outerHTML.
if(toolbar != null)
{
newitm.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.outerHTML = ""; //Assign that table to NULL so that it will be invisible to the user.
}

function GetElementByText(tagName, title)
{
var a = document.getElementsByTagName(tagName);

for (var i=0; i < a.length; i++)
{
if (a[i].title)
{
if (a[i].title == title )
{
return a[i];
}
}
}
return null;
}


Remember this is just a work around. Not a secured and perfect solution to use.