Using Microformats with your SharePoint Data

Jon Hi everyone, Jon Campbell here again with another technique on how to take your data presentation to the next level. This time around I am going to focus on using Microformats to display your data.

I won’t go into a lengthy history of what microformats are or how they are used (interested readers should check out or the book), but the basic gist is that microformats are the middle ground between computer readable data (like a vCard) and human readable data. Instead of "Jack Smith" just being two words on the page that a search engine needs to assume is a name, as a page author we can say that it is in fact a name. By doing so a browser or other program could list all the people mentioned on a page, allow you to export them as a contact to Outlook, or provide special functionality for mapping an address. This harmony is achieved by using "semantic HTML" to represent the data in a way that is both computer readable and can be styled easily via CSS.

Besides, when Ray Ozzie and Bill Gates both agree on something adopted by notable Web 2.0 sites like Yahoo Technorati, and Eventful then it must be something pretty important.

For this post I will focus on how to use the hCard to format your data in a semantic way. To start off with, you will need a Contacts list on your SharePoint site, which I will refer to as Contacts. Create a new .aspx page in SharePoint Designer, then insert a view of the Contacts list by dragging the list from the Folder List onto your new page. Next, open the Data View menu and select Data View Properties…. On the layout tab there are a variety of HTML view styles to choose from, including a few that look a bit like a business card already. Select the fourth option, "Repeating form with border." It should look something like the picture shown.


If you were to then look at the code for each of the entries, it would be a fairly simple two-column table structure. To turn the entry into an hCard format we need to replace it with the equivalent semantic representation. Instead of using a table, we will use <div> and <span> tags around various elements, assigning them appropriate class names to indicate what they contain.

Here is an example of the semantic markup for an hCard (generated with the hCard creator):

<div id="hcard-Sally-Jones" class="vcard">

  <span class="fn">Sally Jones</span>

  <div class="org">Contoso</div>

  <a class="email" href=""></a>

  <div class="adr">

    <div class="street-address">1234 Evergreen Terrace</div>

    <span class="locality">Ogdenville</span>, <span class="region">NH</span>,

    <span class="postal-code">11235</span> <span class="country-name">USA</span>


  <div class="tel">+1 360 555 1212</div>


To start at the most basic level, all we need to do is start replacing the table that SharePoint Designer created for the entry with the representation above, swapping out the fake data for the appropriate XSL calls. The resulting XSLT looks like this:

<div id="hcard-{@FirstName}-{@Title}" class="vcard">

  <span class="fn"><xsl:value-of select="@FirstName" />

      <xsl:text xmlns:ddwrt="" ddwrt:whitespace-preserve="yes" xml:space="preserve"> </xsl:text>

      <xsl:value-of select="@Title" /></span>

  <div class="org"><xsl:value-of select="@Company" /></div>

  <a class="email" href=""><xsl:value-of select="@Email" /></a>

  <div class="adr">

    <div class="street-address"><xsl:value-of select="@WorkAddress" /></div>

    <span class="locality"><xsl:value-of select="@WorkCity" /></span>, <span class="region"><xsl:value-of select="@WorkState" /></span>,

    <span class="postal-code"><xsl:value-of select="@WorkZip" /></span>

      <xsl:text xmlns:ddwrt="" ddwrt:whitespace-preserve="yes" xml:space="preserve"> </xsl:text>

      <span class="country-name"><xsl:value-of select="@WorkCountry" /></span>


  <div class="tel"><xsl:value-of select="@WorkPhone" /></div>



Pretty easy, huh? The markup given is not the limit of what you can represent via the hCard format. Check the hCard cheat sheet for more information on the various ways to represent your data. You can also go a step further by incorporating the LiveClipboard examples that Ray Ozzie posted. If your SharePoint site (or CMS site for that matter) is externally facing, you can now have search engines like Technorati index more intelligently. Programs and browser addins like the Operator Add-In for FireFox can parse them as well. You can also embrace other microformats like the hCalendar for calendar data.


Comments (15)

  1. Siguiendo con la recopilación periódica de recursos sobre WSS 3.0 &amp; MOSS, esta semana en el número

  2. Cara Faye says:

    Hi Jon

    Thanks for the info. Hoping you can help me with this query – I’m trying to customize the look of a Rich Image field control, but am not very technical – can you tell me if this is related at all, and where I would find the code?

    Kind regards,


  3. Lipo Network says:

    I have been trying to adjust my itemstyle so that it displays:

    First name  Last name

    instead of

    Last name, First name

    I error out when I try "<xsl:value-of select="@FirstName" />"

    My code wants Author…

    How do i parse this please

    ps – font too small in this textbox

  4. Jon Campbell says:

    Lipo Network: The tricky part is that the last name is stored in the "Title" field, while the first name is the "FirstName" field. To output a basic Smith, Joe markup this should work:

    <xsl:value-of select="@Title" /><xsl:text xmlns:ddwrt="; ddwrt:whitespace-preserve="yes" xml:space="preserve">,&nbsp;</xsl:text><xsl:value-of select="@FirstName" />

    If you don’t care too much about the space then you can use the simpler version:

    <xsl:value-of select="@Title" />,<xsl:value-of select="@FirstName" />

  5. Jeff Tincher says:

    Well who’da thunk that TITLE was really LASTNAME????  I’ve spent 3 days wondering why LastName was never displaying in my Custom Search Center.  I even placed a call to MS Support who had to escalate things twice.  I wish i found this article before placing the call!!!

    This will work now!  thanks Jon C for saying "the tricky part is that last name is stored in the "title" field"  

  6. tracy says:

    How can I do if I I want to display 3 records in a line, for example:

    First name  Last name             First name  Last name        First name  Last name

    email                                      email                                email

    address                                 address                             address


  7. spdblog says:

    Hi Tracy,

    You should start with the 2 Column Repeating Form with border style instead of just the Repeating Form with Border. Doing so will get you two columns. To change that to three, you have to modify the code slightly.

    Go into code view and find "mod" you should find a statement that says "position() mod 2 = 0". Change that to say "position() mod 3 = 0". Then you’ll find one that says ‘position() mod 2 != 0". Change that 2 to a 3 as well.

    That should do it for you.


  8. bob e says:

    Friends I need to parse the author field in SharePoint and present it in a different way.  The default is last name, first name – I need first name space last name.  Will microformats help me here? The xslt is <xsl:value-of select="@Author" />, not first sand last name as you specify above.  

  9. NickDJ says:

    Ditto on Bob e’s question!!I need to parse the author field and want to present/design it differently!? I have same prob with the xslt!! What Can i do?

  10. Jon Campbell says:

    bob and Nick – This one is a little more difficult since the author field comes out as one big chunk. You will need to use an XPath expression to format the @Author (aka -"Created By") field. To do so I selected the author field, switched to code view, then put the cursor before the @ symbol and hit control space to bring up the autocomplete, then selected "XPath Expression builder".

    Here is what you will see in the preview:

    <nobr><span><A HREF="/_layouts/userdisp.aspx?ID=1">Your Name</A><img border="0" height="1" width="3" src="/_layouts/images/blank.gif"/><a href=’javascript:’ onclick=’IMNImageOnClick();return false;’ class=’ms-imnlink’><img name=’imnmark’ title=” border=’0′ height=’12’ width=’12’ src=’/_layouts/images/blank.gif’ alt=’No presence information’’ id=’imn_1998,type=sip’/></a></span></nobr>;

    Here is the expression that should do the trick:

    substring-after(substring-after(substring-before(@Author, ‘</A>’), ‘HREF’), ‘&gt;’)

    The expression first chops off the ending of the hyperlink that surrounds the name, then chops off everything before the HREF part of the hyperlink, then chops off the ending of the hyperlink just before the text of the name. As a result, you should end up with "Your Name" in the preview window. Hit OK and you should be good to go.

  11. Chris says:


    I wish to display the author or "Created by" as a field in the display form.

    This is my code:


         <td valign="top" class="ms-formlabel" style="width: 496px">

               <H3 class="ms-standardheader"><nobr>Posted By</nobr></H3>


          <td width="400px" valign="top" class="style1">

              <xsl:value-of select="??????????????????" />



    Do I insert the substring code where the quesiton marks are as I keep getting an error,The ‘<‘ character can not be used in an attribute value!

    Any ideas??



  12. Jon Campbell says:

    Chris – I believe you are wanting to use "@Author" – ie:

    <xsl:value-of select="@Author" />

  13. Milton Lopez says:

    I understand the Title field has special characteristics in SharePoint lists, and I do not wnat to create a problem by modifying it. But when users look at contact data, it makes no sense for the field to be called Title. What can be done to chage column headers from Title to Last Name in Contact lists? How would this affect connecting the list to Outlook, Access and Excel? Why did Microsoft do such a thing in the first place? Sigh …

  14. Just extracted Author Full Name from my Blog list:

    <div class="replyAuthor"><strong>

    <xsl:value-of select="substring-after(substring-after(substring-before(@Author, ‘&lt;/A&gt;’),’ID=’), ‘&gt;’)" /></strong>


Skip to main content