HowTo: Display a different image inside a data view web part based on data in the XML
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.
- Open the wss site in FrontPage 2003
- Click Data..Insert Data View
- Right click the SharePoint list that contains my data
- Click "Show Data"
- Select the Title field
- Click "Insert Data View"
- 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
- Place the Cursor next to one of the server names and add a new column to my view: Table > Insert > Rows and Columns
- Place the Cursor inside a cell in this new column and insert my image
- Insert > Picture from file
- I type in the URL to the green.gif
- Next to this image, I insert the red.gif and yellow.gif as well so each row of data now shows all three images
- Select the green.gif image
- Click on Data..Conditional Formatting
- Click Create
- Click Show Content...
- I create a filter that says "Status == UP"..OK (now the green arrow only shows in rows where status is UP)
- Repeat steps 13 through 17 for the other two gifs, setting the filter appropriately
- Save the page