Thursday, June 16, 2011

Diagram/Picture Viewer Page in SharePoint

Create a Diagram/Picture Viewer Page in SharePoint

Setup Data Source

1.       Select the Picture library you’d like to reference
2.       Insert the selected library as a Data Source Control

3.       Setup two (2) Data Views
a.       Setup the first Data View using the ‘Title’ field (or whichever field you’d like to use)

b.      Setup the second Data View using the ‘Preview’ field
4.       You’ll have to do very minor coding here (if you can even call it that). Find the following line:
<td class="ms-vb">
                <xsl:value-of select="@Preview"/>

5.       Add the following image tag (in red):
<td class="ms-vb">
                <xsl:value-of select="@Preview"/><img alt="thumbnail" src="{@FileRef}" />

6.       At this point you may feel free to delete the <xsl:value-of select="@Preview"/>

7.       This is how your page should look (with a little added formatting to left justify the headings):

When you click the name hyperlink, the diagram will change:

No comments: