Custom Images for SharePoint profile page view

Sometimes you need to tightly control profile pictures in MOSS / SharePoint 2007. An easy way to do this if your pictures have the right naming convention is as follow.

Looking at the URL of the profile we can see that the data is clearly sent “/Person.aspx?accountname=DOMAIN%5JohnDoe” In this case we are looking at the domain user JDoe aka John Doe on the domain DOMAIN.
Edit person.aspx and at about line 39 comment out “
And replace it with the following JavaScript…

< type="text/javascript">
var str1=”< propertyname="FirstName" runat="server" preview="FirstName" values="<P N='PropertyName' T='FirstName' /><P N='ControlStyle'><P N='Font' ID='1' /></P><P N='Font' R='1' /><P N='ID' ID='2' T='ctl02' /><P N='Page' ID='3' /><P N='TemplateControl' R='3' /><P N='AppRelativeTemplateSourceDirectory' R='-1' />">“;
var str2=”< propertyname="LastName" runat="server" preview="LastName" values="<P N='PropertyName' T='LastName' /><P N='ControlStyle'><P N='Font' ID='1' /></P><P N='Font' R='1' /><P N='ID' ID='2' T='ctl03' /><P N='Page' ID='3' /><P N='TemplateControl' R='3' /><P N='AppRelativeTemplateSourceDirectory' R='-1' />">“;
str1 = str1.replace(“<>“, “”);
str1 = str1.replace(“< /span>“, “”);
str2 = str2.replace(“<>“, “”);
str2 = str2.replace(“< /span>“, “”);
document.write(“< src="'http://people/FirmDirectory/FacebookPictures/" alt="'" width="'72'"> <>“);
< /script>

(In this case our images have the following naming convention FirstLast.gif.)

As usual HTML tags have been changed in the following way:
“<" is now "< ".

SharePoint 2007: How to show and link to an attachment in a list

Get to the field in the view and put this in. Should work without a hitch… The usual change from “<" to "< " has been made. < name="SharePoint:AttachmentsField">
< name="runat">server< /xsl:attribute>
< name="ListId">
< /xsl:attribute>
< name="FieldName">Attachments< /xsl:attribute>
< name="ControlMode">Display< /xsl:attribute>
< name="Visible">true< /xsl:attribute>
< name="ItemId">
< select="@ID">
< /xsl:attribute>
< /xsl:element>

Display RSS with JavaScript in SharePoint

Displaying RSS feeds is a nice thing to be able to do. One way to do this is with JavaScript in a Content Editor Webpart. Code example below… As usual “<" has been replaced with "< ". < id="feed-control">
< style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading…< /span>
< /div>

< !-- Google Ajax Api -->
< src="" type="text/javascript">< /script>

< !-- Dynamic Feed Control and Stylesheet -->
< src="" type="text/javascript">< /script>
< type="text/css">
@import url(“”);
< /style>

< type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: ‘Feed Items’,
url: ‘’
var options = {
stacked : true,
horizontal : false,
title : “Preview”

new GFdynamicFeedControl(feeds, ‘feed-control’, options);
// Load the feeds API and set the onload callback.
google.load(‘feeds’, ‘1’);
< /script>

SiteMap in a custom SharePoint master page

Only a start but if you are having problems this may help… (As usual “<" has beeen replaced with "< ")
< sitemapprovider="SPContentMapProvider" id="ContentMap" skiplinktext="" cssclass="ms-sitemapdirectional" runat="server">
< id="PlaceHolderTitleBreadcrumb" runat="server" visible="False">
< class="breadcrumb">
< asp:SiteMapPath ID="siteMapPath" Runat="server"
< cssclass="breadcrumbCurrent">
< cssclass="ms-sitemapdirectional">
< /asp:SiteMapPath>
< /div>
< /asp:ContentPlaceHolder>

How to: turn the left navigation in SharePoint into an accordion style one

Add this code to your master page. Add the Google JS to a local address if you don’t want to keep making remote calls. I’ve edited the code so that it will render on the page by changing:

  • “<" - "< "
  • “>” – ” >”

< type="text/javascript" src="">< /script >
< type="text/javascript">
// Load jQuery
google.load(“jquery”, “1.2.6”);
< /script >
< type="text/javascript">
//initialize menus
var menuRows = $(“[id$=’QuickLaunchMenu’] > tbody > tr”);
var menuHd = menuRows.filter(“[id!=”]:has(+tr[id=”])”);
//set img path for when submenu is hidden
var closedImg = “/_layouts/images/Menu1.gif”;
//set img path for when submenu is visible
var openedImg = “/_layouts/images/ptclose.gif”;
var cssInit = {
“background-image”: “url(‘”+closedImg+”‘)”,
“background-repeat”: “no-repeat”,
“background-position”: “100% 50%”
var cssClosed = {“background-image”: “url(‘”+closedImg+”‘)”}
var cssOpen = {“background-image”: “url(‘”+openedImg+”‘)”}
//hide submenus
//apply initial inline style to menu headers
menuHd.find(“td:last”).css(cssInit); () {
var styleElm = $(this).find(“td:last”)
var nextTR = $(this).next(“tr[id=”]”);
if (‘:visible’)) {
} else {;
< /script >

Quick Fix: To add a link to the Global Links section in MOSS follow these steps:

Sometimes you just need that “quick” fix for a problem with SharePoint. In this case, yes, you could just hard code it into the master page or you could create your own custom control but editing the MyLinks.ascx file has its benefits too.

  1. Go to: C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions12TEMPLATECONTROLTEMPLATES
  2. Make a copy of “MyLinks.ascx” always a good idea…
  3. Open “MyLinks.ascx” and add the link(s) required e.g. “< href="">My Blog”< / a>
  4. Save and do an IISRESET
  5. The new link should appear

Charting Data: Keeping it simple.

I see a lot on charting data in SharePoint, and out.

In my opinion it boils down to three things

  1. what have you got
  2. how did you get it
  3. how are you going to show it

The first two are data related and require some questions.

  • Is it flat data that can “just be charted”?
  • If not, what needs to be done?
  • Is it interactive?
  • If it is, in what way?
  • etc

The third can get complicated as it can delve into what one can only call, the aesthetics of the situation. Some people love pie charts with garish colours. Others simply cannot understand radar charts. One product that works very nicely, has lots of options, and has a nice cost at $0 under the GPL, is Visifire.

Visifire is a set of open source data visualization controls – powered by Microsoft® Silverlight™ & WPF. It is a multi-targeting control which can be used in both WPF & Silverlight applications. Using the same API, charts in both Silverlight & WPF environments can be created within minutes. Visifire can also be embedded in any webpage as a standalone Silverlight App. Visifire is independent of server side technology. It can be used with

  • ASP.Net
  • PHP
  • JSP
  • ColdFusion
  • Ruby on Rails
  • Simple HTML
  • Etc.
This control can be easily used to chart data in a list.

Let me show you how…

  • Upload the Visifire files to your SharePoint document library. Specifically, copy the VisiFire.xap and .js files into the document library that will hold your web part page.
  • Add a Data View web part for the list containing the data you wish to graph to the web part page using SharePoint Designer.
  • In the Code View, replace the line in the section with the following


  1. Columns in this example are @Budget and @Actual, update these if your list is different
  2. I have replaced “<" with "< " so that the code will get presented correctly in the browser

< type="text/javascript" src="Visifire.js" mce_src="Visifire.js">< /script>
< escaping="yes">< ![CDATA[ < type="text/javascript">
var xmlString =
‘ < vc="clr-namespace:Visifire.Charts;assembly=Visifire.Charts" theme="Theme2">‘
+ ‘ < text="Revenue">‘
+ ‘ < title="Month">‘
+ ‘ < title="$ Thousands">‘
+ ‘ < name="Budget" renderas="Column" axisytype="Primary">‘
]]>< /xsl:text>
< select="/dsQueryResponse/Rows/Row">
< escaping="yes">< ![CDATA[ + ' < axislabel="">< /xsl:text>
< select="./@Title">
< escaping="yes">< ![CDATA[" YValue="]]>< /xsl:text>
< select="@Budget">
< escaping="yes">< ![CDATA["/>‘]]>< /xsl:text>
< /xsl:for-each>
< escaping="yes">
< ![CDATA[ + ' < /vc:DataSeries>‘
+ ‘ < name="Actual" renderas="Line" color="Red" axisytype="Primary">‘
]]>< /xsl:text>
< select="/dsQueryResponse/Rows/Row">
< escaping="yes">< ![CDATA[ + ' < axislabel="">< /xsl:text>
< select="./@Title">
< escaping="yes">< ![CDATA[" YValue="]]>< /xsl:text>
< select="@Actual">
< escaping="yes">< ![CDATA["/>‘]]>< /xsl:text>
< /xsl:for-each>
< escaping="yes">
< ![CDATA[ + ' < /vc:DataSeries>‘
+ ‘ < /vc:Chart>‘;
< /script>
]]>< /xsl:text>
< !-- Create the div to hold the chart and then run -->
< !-- the JavaScript code to actually show the chart. -->
< id="myChart" style="width:500px;height:300px;">
< language="javascript" type="text/javascript">
var vChart2 = new Visifire(“Visifire.xap”);
< /script> < /div>

Nifty: Microsoft Business Data Catalog Definition Editor for Microsoft Office SharePoint Server 2007

Ah Microsoft, you giveth and you taketh.

The Microsoft Business Data Catalog Definition Editor for Microsoft Office SharePoint Server 2007 aka MSBDCDEFMOSS2007 (all me…) is a nifty yet hobbled tool fresh(ish) from Microsoft. In brief its features include:

  • Underlying XML is abstracted by the design surface and properties window
  • Drag and drop web methods, tables, or views to create line of business (LOB) connections.
  • Entities and methods are created automatically from database metadata and WSDLs.
  • Additional method instances can be added to further enhance the database or web service connection.
  • Method instances can be tested from within the tool, enabling incremental development of LOB connections

That said… Here’s the catch. (For now I hope…)
The tool is unusable with SQL Server 2005/2008 schemas… So, you cannot use it against AdventureWorks, BUT you can use it against AdventureWorksDW. If you dare to try, you will be rewarded with a “Could not process Table ‘….’. Also, make sure you have SELECT Rights on the Table/VIEW”.

Helpful links

Reflecting images with Javascript under 5k

If you need to add a reflection to an image or series of images on a site with minimal overhead a handy solution is Reflection. To add a reflection you just add a class=”reflect” to the image and the reflection will automatically fade into the background colour.

Reflection.js allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers – Internet Explorer 5.5+, Mozilla Firefox 1.5+, Safari, Google Chrome and Opera 9+. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 5KB.”

Get it here: