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 microformats.org 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="mailto:sjones@contoso.com">sjones@contoso.com</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>
<div class="tel">+1 360 555 1212</div>
</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="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" 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="mailto:sjones@contoso.com"><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="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" ddwrt:whitespace-preserve="yes" xml:space="preserve"> </xsl:text>
<span class="country-name"><xsl:value-of select="@WorkCountry" /></span>
</div>
<div class="tel"><xsl:value-of select="@WorkPhone" /></div>
</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.
Thanks,
Jon
