Solved

XSL:IF statement needs to show jpg picture when condition meets criteria

Posted on 2008-10-07
8
976 Views
Last Modified: 2013-11-18
I have a SQL 2005 database that I am showing on a Sharepoint 2007 web page using the data view. I have a status column that holds a single character G, Y, R, or C. When the column has a G I have it set to show the field as a greem background. Y = Yellow and R=Red.

However, when the column has a 'C' in it I need to display a jpg picture that is loaded on the web site. I have the URL and can access the picture no problem.
I have attached the code that I am using for the conditional statements, all of them work except the picture. The picture does not show up, it still shows the 'C'.

Thanks for you help.
<xsl:attribute name="style">
 
<xsl:if test="normalize-space(@Status) = 'G'">color: #00FF00; background-color: #00FF00; width: 20px; height: 20px;</xsl:if>
 
<xsl:if test="normalize-space(@Status) = 'Y'">color: #FFFF00; background-color: #FFFF00; width: 20px; height: 20px;</xsl:if>
 
<xsl:if test="normalize-space(@Status) = 'R'">color: #FF0000; background-color: #FF0000; width:20px; height: 20px;</xsl:if>
 
<xsl:if test="normalize-space(@Status) = 'C'">img src="http://URL_TO_PICTURE/complete.jpg"</xsl:if>
 
</xsl:attribute>

Open in new window

0
Comment
Question by:gsfc
  • 4
  • 3
8 Comments
 
LVL 11

Expert Comment

by:kmartin7
ID: 22659978
Try:
<xsl:if test="normalize-space(@Status) = 'C'">background-image:url(http://URL_TO_PICTURE/complete.jpg)</xsl:if>

It is better to wrap with xsl:text tags:

<xsl:if test="normalize-space(@Status) = 'C'"><xsl:text>background-image:url(http://URL_TO_PICTURE/complete.jpg)</xsl:text></xsl:if>
0
 
LVL 18

Accepted Solution

by:
zc2 earned 500 total points
ID: 22660010
You can try to put the image on the background as well.

<xsl:if test="normalize-space(@Status) = 'C'">background:  url(http://URL_TO_PICTURE/complete.jpg); background-repeat: no-repeat;  background-position: center;</xsl:if>
0
 

Author Comment

by:gsfc
ID: 22670021
I have tried all three of these above...
the first one does nothing - just a 'C'  with no color
the second one does nothing - just a 'C'  with no color
the third one shows the image in Sharepoint designer but does not show on the page itself. But even in designer it only shows a piece of the image. the image I am trying to use is a small green star and in designer it shows the green center of the star but not the whole image.

So the third one is the closest....soooo close...:)
0
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
LVL 18

Expert Comment

by:zc2
ID: 22670912
Are you sure, the URL to the image is correct?
Could you please show it here?
You may try also take the result html and publish a new question in a HTML/CSS zone.
0
 

Author Comment

by:gsfc
ID: 22671018
I got it to view correctly in designer by resizing the image, setting a width and height, and setting the 'C' to white so it does not show up (see code below). However,  it still does not show in the web page...only in Sharepoint designer.
So now the web page shows nothing in that cell. Meaning it is taking the 'C' as white but not displaying the jpg image.

Thanks again for your help.
Chris.
<xsl:if test="normalize-space(@Status) = 'C'">background:  url(http://gsfcnet3/_layouts/images/misc/wigs/complete.jpg); width: 50px; height: 50px; background-repeat: no-repeat;  background-position: center; background-attachment: fixed; color: #008000;</xsl:if>
					

Open in new window

0
 
LVL 18

Expert Comment

by:zc2
ID: 22671054
Do you see the image if you put http://gsfcnet3/_layouts/images/misc/wigs/complete.jpg to the browser's address bar?
0
 

Author Comment

by:gsfc
ID: 22671633
Yes, as a matter of fact if I remove the repeat line in the code I can see multiple stars. So right now I have it set to repeat-x and have three stars going across the cell. If I change it to no-repeat than it shows up as a single star in designer but does not show on the data view.
0
 
LVL 18

Expert Comment

by:zc2
ID: 22671813
What is the browser you use?
Did you try to view it using different browsers?
If you use FireFox, try to use its FireBug plugin to
investigate the styles of the element.
btw, what is the html element you adding the style to?
a TD?
Could you zip and provide the full or at least most significant
part of the resulting HTML code to analyse ?
0

Featured Post

Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question