Monday, October 19, 2009

How To: How to redirect to custom Edit Page in MOSS 2007 ?


Usually, the Edit page of the "Sharepoint List" will be like three columns. First column will be a lable of the field, second column will be the seperator, third column will be the field control like Text box, calender control or people picker, etc... 

Sample Edit Form




Sometimes, you are in a situation to modify the look and feel of "Edit" page of list/document library  like the below image.



This can not be done in MOSS by editing the EditForm.aspx page. Instead, we can create a Blank Webpart page (ex: EditAsset.aspx) and we have to insert our customized Web Part. OK. We have created a page to modify the Content of the List/Document Library. But, How to redirect the users to this page, whenever they are trying to edit the list?

Well. This can be done in 2 ways. 
1. We have to add custom menu item in context menu of the list/document library, wherever we are displaying the content. (This is very difficult. because we have to add javascript in each and every page, if we are going to display the list)

2. Redirecting to our Custom Edit Page from EditForm.aspx page

Second approach is easy one to follow. So, I will tell you how to redirect from EditForm.aspx page.

1. Open SharePoint Designer 2007
2. Open the Website
3. Go to the Document Library/List.
4. Go to "Forms" folder inside the document library.
5. Open "EditForm.aspx"
6. Insert one "Content Editor Web Part"
7. Write the below code inside the Content Editor Web part.

Code:


<![CDATA[<script language="javascript">

var query = window.location.search.substring(1);
var vars = query.split("&");

var2 =vars[0].split("=");

location.href = '/Pages/EditAsset.aspx?EditID=' + var2[1];
</script>]]>


So, The page will be redirected to our custom edit page. 

In the above code, i have splitted the querystring from EditForm.aspx and sending the value to My "EditAsset.aspx" as a querystring parameter. 

See my below image, that will explain how to add the code in the sharepoint designer.



(Click on the image to enlarge)

Thats it...

No comments:

Post a Comment