Solved

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

Posted on 2008-10-07
8
972 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 18

Expert Comment

by:zc2
Comment Utility
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:gsfc
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

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 …
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

762 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now