Partager via

HowTo: Display a different image inside a data view web part based on data in the XML

  • Article

I have a Data View Web Part that displays the status of several different servers I maintain. Basically, I am using a SharePoint list. The List has a Title field which contains the name of each server and a multiple choice field that lets me set the status to "UP," "DOWN," or "CAUTION."

For each of these three statuses, I have a little gif image of a green arrow, red arrow and yellow circle respectively. What I want to do is create a data view that has the name of the server and displays the arrow based on the what the status is. 

Here's how to do that.

  1. Open the wss site in FrontPage 2003
  2. Click Data..Insert Data View
  3. Right click the SharePoint list that contains my data
  4. Click "Show Data"
  5. Select the Title field
  6. Click "Insert Data View"
  7. Since I only selected one field, I get a bulleted list. So I change this: by clicking on Data..Style > General tab and changing to Tabular view..OK
  8. Place the Cursor next to one of the server names and add a new column to my view: Table > Insert > Rows and Columns
  9. Place the Cursor inside a cell in this new column and insert my image
  10. Insert > Picture from file
  11. I type in the URL to the green.gif
  12. Next to this image, I insert the red.gif and yellow.gif as well so each row of data now shows all three images
  13. Select the green.gif image
  14. Click on Data..Conditional Formatting
  15. Click Create
  16. Click Show Content...
  17. I create a filter that says "Status == UP"..OK (now the green arrow only shows in rows where status is UP)
  18. Repeat steps 13 through 17 for the other two gifs, setting the filter appropriately
  19. Save the page

Comments