Is it possible to add a separator line or section in OOB SharePoint List forms?

2012-05-03

Question

_{Thursday, May 3, 2012 4:56 AM}

Is it possible to add a separator line or section in OOB SharePoint List forms? I think we have to go for SharePoint Designer or custom solution. Any suggestions would be appreciated.

Amalaraja Fernando,
SharePoint Architect
This post is provided "AS IS" with no warrenties and confers no rights.

All replies (3)

_{Thursday, May 3, 2012 7:40 AM ✅Answered | 1 vote}

Hi Amalaraj,

I think you can achieve this with OOTB and Jquery.here is an example http://sharepointjavascript.wordpress.com/2010/03/01/headings-for-sharepoint-forms-another-method/

use a html line markup instead of header text.

hope this helps.

Please click "Propose As Answer" if a post solves your problem or "Vote As Helpful" if a post has been useful to you.

_{Friday, May 4, 2012 7:06 AM ✅Answered}

1) Download the below Jquery files

Jquery.SPServices-0.6.2.min

http://cdiscportal.digitalinfuzion.com/CT/Scripts/jquery.SPServices-0.6.2.min.js

jquery-1.7.2.min

http://code.jquery.com/jquery-1.7.2.js

2) Upload the JQuery files to the document library which can be later used for reference in the content editor webpart

3) Add the content editor webpart to the NewForm.aspx, Editform.aspx

4) Copy the below script to the source editor of the content Editor web part. In the below script you need to provide the start column name (Field internal name) and end column name (field internal name)

<script type="text/javascript" language="javascript" src="../../jQuery Libraries/jquery-1.6.2.min.js"></script><script type="text/javascript" language="javascript" src="../../jQuery Libraries/jquery.SPServices-0.6.2.min.js"></script>
<script type="text/javascript" language="javascript">

// This function from SPServices gets all of the Query String parameters
var queryStringVals = $().SPServices.SPGetQueryString();

// We can pass in a section name on the Query String to expand by default
var expandSection = queryStringVals.section;


$(document).ready(function() {


// Set up each of the sections -

// see the setupSection function below for an explanation of the parameters
setupSection("Section1", "This is Section One", "Start Column", "End Column");

	// If no section on the Query String, expand the first section
if(expandSection === undefined) {

$("tr[section-name='Section1']").css("display", "block");
$("tr#Section1").addClass("demo-collapse");

}

});

function setupSection(sectionShortName, sectionLongName, startColumn, endColumn) {
/* Set up a form section

Parameters:
sectionShortName: This short name is used for element IDs and such. It cannot contain spaces or special characters.

sectionLongName: This name is what is shown in the section header and can contain any text.
startColumn: The first column in the section.

endColumn: The last column in the section.
The two column names should be the Display Name, e.g., "Product Name", not the InternalName, e.g., "Product_x0020_Name"

*/

// Find the first and last row in the section and add the section header
var sectionStartRow = findFormField(startColumn).closest("tr");

var sectionEndRow = findFormField(endColumn).closest("tr");
$(sectionStartRow)

.before("<tr id='" + sectionShortName + "'>" +

"<td colspan=2>" + sectionLongName + "</td>" +

"</tr>");
var thisSection = $(sectionStartRow).nextUntil(sectionEndRow);


// Give all of the rows in the section an attribute for the section name for easier manipulation later

$(sectionStartRow).attr("section-name", sectionShortName);
$(sectionStartRow).nextUntil(sectionEndRow).attr("section-name", sectionShortName);

$(sectionEndRow).attr("section-name", sectionShortName);
$(sectionEndRow).find("td").addClass("demo-section-last-row-cell");


// Hide all of the rows in the section

$("tr[section-name='" + sectionShortName + "']").css("display", "none");

// Add the click behavior for the section header
$("tr#" + sectionShortName).click(function() {

var thisSectionRows = $("tr[section-name='" + sectionShortName + "']");

if($(this).next("tr[section-name='" + sectionShortName + "']").css("display") == "block") {

$(thisSectionRows).css("display", "none");
$(this).removeClass("demo-collapse");

} else {
$(thisSectionRows).css("display", "block");

$(this).addClass("demo-collapse");
}

});

// Expand the section if there are any validation errors
$("tr[section-name='" + sectionShortName + "'] .ms-formbody .ms-formvalidation").each(function() {

if($(this).html().length > 0) {
$("tr[section-name='" + sectionShortName + "']").css("display", "block");

$("tr#" + sectionShortName).addClass("demo-collapse");
// No need to look at any more rows

return false;
}

});

// Expand the section if it's been passed on the Query String
if(sectionShortName == expandSection) {

$("tr[section-name='" + sectionShortName + "']").css("display", "block");
$("tr#" + sectionShortName).addClass("demo-collapse");

}

}

// This function (borrowed from SPServices) finds a column's formBody in the page
function findFormField(columnName) {

var thisFormBody;
// There's no easy way to find one of these columns; we'll look for the comment with the columnName

var searchText = RegExp("FieldName=\"" + columnName.replace(/[-[\]{}()*+?.,\\^$\|#\s]/g, "\\$&") + "\"", "gi");
// Loop through all of the ms-formbody table cells

$("td.ms-formbody").each(function() {
// Check for the right comment

if(searchText.test($(this).html())) {
thisFormBody = $(this);

// Found it, so we're done
return false;

}

});

return thisFormBody;
} // End of function findFormField

</script>

5. Add the below code to the source editor of the content editor

<style>

.demo-hidden {
display:none;

}
.demo-main {

height:250px;

}
.demo-no-item-selected {

font-size:12px;
}

.demo-section-link {

padding-

font-size:10px;
}

.demo-section-header {
background-image:url('/_layouts/images/plus.gif');

background-repeat:no-repeat;
background-"font-size:12pt;font-family:'Times New Roman','serif';"> center;

padding:3px 3px 3px 22px;
background-color:#6699cc;

font-weight:bold;
color:#ffffff;

}
.demo-section-header-cell {

border-"font-size:12pt;font-family:'Times New Roman','serif';"> #c2c2c2 solid;
}

.demo-section-last-row-cell {
border-bottom:2px black solid;

}
.demo-collapse {

background-image:url('/_layouts/images/minus.gif');
}

Reference link: http://sympmarc.com/2011/08/18/taming-long-sharepoint-list-forms-using-jquery-to-break-them-into-sections/

Amalaraja Fernando,
SharePoint Architect
This post is provided "AS IS" with no warrenties and confers no rights.

_{Thursday, May 3, 2012 6:23 AM}

Hi!

It's not possible OOB but it's relatively easy to achieve in SharePoint Designer.

You could also use InfoPath to customize your forms further but that depends on which SharePoint 2010 edition you're using.

/Nils

Share via

Is it possible to add a separator line or section in OOB SharePoint List forms?

Question

All replies (3)

Additional resources