Share via

Creating a linkable image in a view of XML data

  • Article

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

Comments

  • Anonymous
    April 19, 2007
    PingBack from http://stevepietrekweblog.wordpress.com/2007/04/19/links-4192007/

  • Anonymous
    August 13, 2007
    You make the statement "However, this tip will not work for fields with a binary format from SQL that contains the actual image data". So, how do you work with fields in a database that do contain binary format image data? What's the trick to rendering that?

  • Anonymous
    November 07, 2007
    I think I have the same question as Mike - as I am trying to render the LargeThumbnail, or the Thumbnail in a Data View from a Slide Library. Thank you,

  • Anonymous
    November 30, 2007
    The comment has been removed

  • Anonymous
    May 27, 2008
    Thanks a ton - this has helped  me implement different EditForm views for certain people, based on personal views/audiences!

  • Anonymous
    October 15, 2008
    Really great information, has given me an idea for a blog of my friends.

  • Anonymous
    January 07, 2013
    I am trying to figure out, how would I use sharepoint designer 2007 to build a system application mapping application? if that makes sense... I want to be able to click an image and it tell me all the compenants and features of that item I clicked along with the work flow.. (meaning what action comes before and after) is this possible?