Updated 23.09.2009
In this post i will show you how to add heading-support to a SharePoint list view. This is a follow-up on my previous post Headings in SharePoint Forms – jQuery.
It is a precondition for understanding and utilizing this solution that you read the previous article.
As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a subsite named “test” with a subsite named “English” with a document library named “Javascript”):
The scripts used in this solution is “jquery-1.3.2.min.js” and “HeadingsInSharePointListViews.js”. The script “HeadingsInSharePointLists.js” is used to add heading-support to NewForm, DispForm and EditForm as described in the previous article.
The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.
Here is the sourcecode for the file HeadingsInSharePointListViews.js:
/* Show headings from "Single line of text" in list views
* ---------------------------------------------
* Created by Alexander Bautz
* alexander.bautz@gmail.com
* https://spjsblog.com
* LastMod: 23.09.2009
* ---------------------------------------------
* This script is an add-on to the script that converts a singleline text field column to a heading.
* It is a precondition for understanding and utilizing this solution that you read the previous article:
* https://spjsblog.com/2009/09/11/headings-in-sharepoint-forms-jquery/
Call like this in your list view (boxed or preview pane):
<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/HeadingsInSharePointListViews.js"></script>
<script type="text/javascript">
showHeadings(190,true,false,true,'#ebf3ff');
</script>
Parameters explained:
divWidth: The width of the "label" colomn - where the fieldname is found.
paddingTop: Adds a br-tag above the heading to make some air
paddingBottom: Adds a br-tag below the heading to make some air
stretch: Adds "colspan:2" to make the heading stretch to the full width of the list form
bgColor: Background - [optional] background color of the td-tag. You can "copy" the color from
another style to make the background adapt to changing site themes by using this as the
parameter bgColor (no quotes - it's not a string):
$('.ms-quicklaunchheader').css('background-color')
*/
function showHeadingsInView(divWidth,paddingTop,paddingBottom,stretch,bgColor){
// Remove the "heading" from the "viewheader" - not in "bacictable"
if($(".ms-listviewtable.ms-basictable").length==0){
$(".ms-viewheadertr th").each(function(){
var table = $(this).find('table');
if(table.attr('displayname')!=undefined && table.attr('displayname').indexOf('#H#')==0){
table.hide();
}
});
}
// Listviews in "basictable" style
if($(".ms-listviewtable.ms-basictable").length>0){
// Loop trough all columns in the table header to detect headings
$(".ms-viewheadertr th").each(function(colIndex){
var table = $(this).find('table');
if(table.attr('displayname')!=undefined){
var dispname = table.attr('displayname');
if(dispname.indexOf('#H#')==0){
var dispnameClean = dispname.substring(dispname.lastIndexOf('#')+1);
$(this).find('table').replaceWith("<table><tr><td class='ms-vb ms-bold' style='white-space:nowrap'>" + dispnameClean + "</td></tr></table>");
var dispNameColor = '#808080'; // Set color to "grey" as standard
if(dispname.substring(5,12).match(new RegExp(/^#?([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?$/))){ // Find color
dispNameColor = dispname.substring(5,12);
$(this).find('td').css({'color':dispNameColor}); // Set color
}
// Loop trough all rows and mark the correct cell with the heading's color - toned down to 50% opacity
// Heading can not be first column from left
$(".ms-listviewtable.ms-basictable tr").each(function(){
var tdColindex = 1;
$('td:first', this).nextAll().each(function() {
if(tdColindex==colIndex){
$(this).html("<div style='background-color:" + dispNameColor +
";width:25px;height:100%;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5;'></div>")
.css({'text-align':'center'});;
}
tdColindex++;
});
});
}
}
});
}
// Listviews in "Boxed" and "Preview pane" style
if($("td.ms-stylelabel").length>0){ // Boxed style
findThis = 'td.ms-stylelabel';
}else if($("#previewpanetable1").length>0){ // Preview pane style
findThis = 'td.ms-formlabel';
}
$(findThis).each(function(){
if(divWidth!='')$(this).attr('width',divWidth); // Width of label-column"
if($(this).text().match('#H#')){ // It's a heading
var customDiv = $("<div></div>");
var rawHeading = $.trim($(this).text());
hSize = rawHeading.substring(3,5); // Find size
customDiv.css({'fontSize':hSize}); // Set size
if(rawHeading.substring(5,12).match(new RegExp(/^#?([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?$/))){ // Find color
customDiv.css({'color':rawHeading.substring(5,12)}); // Set color
}
if(stretch){ // Removes the "ms-formbody-td" and sets colspan=2 to stretch the heading
$(this).next().hide();
$(this).attr('width','');
$(this).attr({colSpan:'2'});
}
if(typeof(bgColor)!="undefined" && bgColor != ''){
$(this).css({'background-color':bgColor});
}
$(this).html(customDiv.text(rawHeading.substring(rawHeading.lastIndexOf('#')+1))); // Set new heading
if(paddingTop)$(this).prepend('<br>');if(paddingBottom)$(this).append('<br>'); // Padding
}
});
}
Copy the code and save as a text-file. Rename it “HeadingsInSharePointListViews.js”, and upload it to your Javascript library as shown above. Be sure to get the code copied right – with no “word wrap” in your texteditor.
You then add a CEWP below the list view webpart in your list and calls the script like this:
<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/HeadingsInSharePointListViews.js"></script>
<script type="text/javascript">
showHeadingsInView(100,true,false,true,$(".ms-quicklaunchheader").css('background-color'));
</script>
The end result should look like this for “Boxed view”:
Like this for “Preview Pane”:
And like this for “Basic Table”
Have fun – and please ask if something is unclear!
Alexander
