The edit user profile screen is where users go to edit their details in the profile database.
In this tip I will show you how to get a nice looking screen with sections and headers, just like this:
If you ever looked at the administration page of the profile database properties, you must have noticed the "sections" - you can group properties by sections, so for example all contact information properties such as "mobile phone" and "phone number" and "Home address" are under one the "Contact Information" heading , while additional information such as "skills" are under the "Additional information"
Example of section grouping of user profile properties
What puzzled me is that this doesnt effect the "edit details" screen. I found that if you edit the EditProfile.aspx page (located at "Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\editprofile.aspx") you can set the edit the "ProfileEditor" control to have "ShowSections=true". This makes the edit profile page display the properties grouped by sections.
I actually liked the following combination of properties for look & feel:
ShowEditToolbar="true"
ShowMappedIcon="true"
ShowPublicIcon="false"
ShowSections ="true"
ShowWarningIcon="false"
MoveEditablePropertiesToTop = "false"
ShowOnlyVisibleOnViewer="true"
ShowTitle = "false"
UseProfileStyles = "true"
What messed things up for me is a Microsoft bug with this control having to do with the column span of the section header. The sections are rendered with column span of 3, when the rows below them have column span of 4. This makes for a very ugly appearance, when the section header is "cut off" at the end.
To fix that, I wrote a small script that I embedded in the file, just after the <table> closing tag. The script finds all the "div" elements that have the "ms-WPTitle" class, and then changes the columnspan of the parent "TD" element to 4.
Important - For the script to work, you also have to add an ID to the table that holds the edit profile control. I used in the script id="tblMain".
Important - The script has to be below the table, but within the asp:content block. dont try to place it at the very bottom of the page, or it will crash.
Important - Like always, I suggest you backup the original file before editing it.
I hope someone else will find it useful!
<script language="javascript">
function SetWPTitleToColspan4()
{
cssClassName = "ms-WPTitle";
var divs = tblMain.all.tags("DIV");
var currentDiv;
for(currentDiv=0;currentDiv<divs.length;currentDiv++)
{
var div = divs[currentDiv];
if(div.className.indexOf(cssClassName)==0)
div.parentElement.colSpan = 4;
}
}
SetWPTitleToColspan4();
</script>
