Add a Document Icon to the CBQ

When you want to change the look of the results in a Content By Query web part you modify the ItemStyle.xsl file in the Style Library of your site. You can find more information here.

I created a custom style to display links to documents. If you are pulling documents directly from a document library, you can make the modifications to the XSL that are documented in this posting.

My custom style is pulling links and titles from a custom list so I needed to get the file extension to generate the icon. Luckily there’s a function in the ddwrt namespace for doing this. It’s documented here.

So now you just need to build the link to the image and link it to the document URL. My variable with the document URL is @DocURL. You should substitute your own doc URL variable. Just add this to your style where you want the icon to appear.
<A TABINDEX=-1 href={@DocURL} target=_blank>
<img border=0 src=/_layouts/images/ic{ddwrt:GetFileExtension(@DocURL)}.gif alt={@DocIcon} style=vertical-align: middle;margin-right:4px />


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: