Subheading in NewForm.aspx and EditForm.aspx [SharePoint List]

by Hojo Clement • April 9, 2010 • MOSS 2007 • 9 Comments

By default SharePoint doesn’t give us the option for adding group heading while adding or editing an item to a SharePoint List. In this tutorial we will see how we can group similar columns and give a subheading and make our new form more interesting. We will use Javascript for this and we are going to do it without using the SharePoint editor. Below is what we are going to achieve.

Create a column with the name of heading you want
Edit the Newform.aspx and Editform.aspx page and insert a content editor web part in the below of the list web part.
Note: you can append the following query string &pageview=shared&toolpaneview=2 to the URL (http://mysite/ Lists/job/NewForm.aspx?pageview=shared&toolpaneview=2) to open in edit mode.

Copy and paste the below code in the content editor web part using source editor.

<script type="text/javascript">// <![CDATA[
var tables;
var i;
var str;
// identify the parent table.
tables = document.getElementById('ctl00_m_g_a3ac2436_2405_4e04_8afd_fa6f84b65d1b_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_TextField').parentNode.parentNode.parentNode.parentNode.parentNodefor(i=0;i
<tables.rows.length;i++)
{
str = tables.rows[i].cells[0].innerHTML;
str = str.substring(34,43);
switch(str){
case 'Permanent':
tables.rows[i].cells[1].style.backgroundColor = '#cccccc';
tables.rows[i].cells[0].style.backgroundColor = '#cccccc';
tables.rows[i].cells[0].innerHTML = '<b>Permanent Address</b>';
tables.rows[i].cells[1].innerHTML = '';
break;
case 'Temprary ':
tables.rows[i].cells[1].style.backgroundColor = '#cccccc';
tables.rows[i].cells[0].style.backgroundColor = '#cccccc';
tables.rows[i].cells[0].innerHTML = '<b>Current Address</b>';
tables.rows[i].cells[1].innerHTML = '';
break;
}
}
// ]]
</script>

Note: In the above code ctl00_m_g_a3ac2436_2405_4e04_8afd_fa6f84b65d1b_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_TextField is the ID one of the column in that list, for identifying parent table. (You can get it by viewing the Source code of the page).

And in the image you can see two columns with same title (City). In the next post we can see the work around of creating two columns with same name.

9 Responses to Subheading in NewForm.aspx and EditForm.aspx [SharePoint List]

Bruce

May 4, 2010 at 9:44 am

anyone get this to work?

Shoban

May 4, 2010 at 10:44 am

Bruce,
Yes it works for us. What is the issue with your code?

Bruce

May 6, 2010 at 7:24 am

// <![CDATA[
var tables;
var i;
var str;
// identify the parent table.
tables = document.getElementById('ctl00_m_g_a3ac2436_2405_4e04_8afd_fa6f84b65d1b_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_TextField').parentNode.parentNode.parentNode.parentNode.parentNodefor(i=0;i
<tables.rows.length;i++)
{
str = tables.rows[i].cells[0].innerHTML;
str = str.substring(34,43);
switch(str){
case 'Permanent':
tables.rows[i].cells[1].style.backgroundColor = '#cccccc';
tables.rows[i].cells[0].style.backgroundColor = '#cccccc';
tables.rows[i].cells[0].innerHTML = 'Permanent Address‘;
tables.rows[i].cells[1].innerHTML = ”;
break;
case ‘Temprary ‘:
tables.rows[i].cells[1].style.backgroundColor = ‘#cccccc’;
tables.rows[i].cells[0].style.backgroundColor = ‘#cccccc’;
tables.rows[i].cells[0].innerHTML = ‘Current Address‘;
tables.rows[i].cells[1].innerHTML = ”;
break;
}
}
// ]]

Shoban

May 6, 2010 at 2:38 pm

What happens?

Ayshwarya

July 2, 2010 at 9:21 am

I tried this – it works fine. Thanks!!!

Vincent Stackhouse

July 26, 2010 at 10:19 pm

It still doesn’t work.

Even after swapping out the variable names, and the ID, as well as changing the substring code
FROM str = str.substring(34,43);
TO str = trim(str.substring(34);

SamA

July 29, 2010 at 5:48 pm

It’s not working for me.

I think the issue is trying to identify the parent table ID. Is that the one right before where I’m trying to insert the subheading or is the one from the very top?

Tnx…

DJ

March 16, 2011 at 8:29 am

Hi sir, can you please elaborate on the code? I cannot get it to work
Here’s my set up,

I have 3 textfield column & I want to add SubHeading before these 3 columns,
Name, Address and Gender

How do I get this done using the above code?
Thanks and appreciate your feedback.

Rajdeep

June 17, 2011 at 11:41 am

There is something little easier than this without any background color and all. Add a column and hide the textbox of the column from the form. Like below,

$(“input[title='Production Details']“).parent().parent().hide();

If it doesn’t work at your first attempt try troubleshoot by adding/removing .parent()

Happy Scripting