Creating a linkable image in a view of XML data

John Good day everyone, this is John Jansen again with another quick tip for working with data in SharePoint Designer. I have seen this question asked quite a bit lately both on internal aliases and external newsgroups, so I thought I would make a post for it and see what others thought.

The scenario is this. You have two pages with data views on them:

  1. ListOfProducts.aspx - has a view of all the items in your data source
  2. DetailOfProducts.aspx - has a view of an individual product's details and is filtered based on a QueryString variable named ProductID

You want to click a thumbnail image in the view on ListOfProducts.aspx, and have it take you to the DetailOfProducts.aspx page that shows the specific details of that product.

This tip will work for both list fields that are of type 'Picture' or fields in SQL or XML that contain the URL to the image. However, this tip will not work for fields with a binary format from SQL that contains the actual image data. For the purposes of this tip, it is assumed that you know how to create pages 1 and 2 above, and that your data source contains a field called 'Image'.

After inserting your view, if the 'Image' field is not in the view, click on the Data View menu and choose Edit Columns. Then simply add the 'Image' field to your view. After it is inside your view, it will most likely not yet display an image. If it does, continue to the second set of steps below. If it is not an image, simply follow these 3 steps:

  1. Right click the 'Image' data value in the view
  2. From the context menu, select Format Item as
  3. From the flyout menu, select Picture

IMPORTANT: You will see a warning that if you don't trust the data source, do not continue. This is important. If the data source can be owned by an untrusted server, you should not continue. This is a RARE circumstance.

Assuming the path to the URL is correct, you should now see an image in your data view. Continue to modify the view as follows:

  1. Select the image in Design view
  2. Click the Insert menu
  3. Click Hyperlink...
  4. Browse to DetailOfProducts.aspx
  5. With the cursor flashing immediately following DetailofProducts.aspx in the Address: text box, type "?ProductID=" (without the quotes) and then click the Fx button
  6. Choose ProductID from the XPath Picker Dialog
  7. Click OK to close the XPath Picker
  8. Click OK to close the Hyperlink dialog

Save all your pages and preview ListOfProducts.aspx, then click on the image. You should be redirected to the DetailOfProducts.aspx page, filtered to show the details of the product you clicked.

Good luck!

-John