Jump to content

Rating System...1-5 Stars Display Perfectly, But Graphic For Zero Stars Will Not Display


Recommended Posts

I have a datapage that allows users to view the ratings other users by entering the users user name. User ratings range from 0 stars to 5 stars. This page receives parameter telling it how many stars the users has. So if the user has a rating of 1.5 stars the page will display an image showing 1.5 stars by referencing the fourth line of the code below [@app:URL_1_5].  However if the user enters a username that has never received a rating or if the input does not fall within the range below (0-5) it should call a graphic that shows 5 grayed out stars which represents 0. (see line 12 which is supposed to call grayed out 5 star image). I'm not sure what I'm doing wrong and I am in need of a little assistance. All of this takes place in a calculated field. -Thanks

 

CASE 

 

WHEN [@calcfield:5]> 0 AND [@calcfield:5] <= .5 THEN '[@app:URL_0_5]'

 

WHEN [@calcfield:5]> .5 AND [@calcfield:5] <= 1.0 THEN '[@app:URL_1_0]'

 

WHEN [@calcfield:5]> 1.0 AND [@calcfield:5] <= 1.5 THEN '[@app:URL_1_5]'

 

WHEN [@calcfield:5]> 1.5 AND [@calcfield:5] <= 2.0 THEN '[@app:URL_2_0]'

 

WHEN [@calcfield:5]> 2.0 AND [@calcfield:5] <= 2.5 THEN '[@app:URL_2_5]'

 

WHEN [@calcfield:5]> 2.5 AND [@calcfield:5] <= 3.0 THEN '[@app:URL_3_0]'

 

WHEN [@calcfield:5]> 3.0 AND [@calcfield:5] <= 3.5 THEN '[@app:URL_3_5]'

 

WHEN [@calcfield:5]> 3.5 AND [@calcfield:5] <= 4.0 THEN '[@app:URL_4_0]'

 

WHEN [@calcfield:5]> 4.0 AND [@calcfield:5] <= 4.5 THEN '[@app:URL_4_5]'

 

WHEN [@calcfield:5]> 4.5 AND [@calcfield:5] <= 5.0 THEN '[@app:URL_5_0]'

 

ELSE '[@app:URL_11_0]'

 

END

Link to comment
Share on other sites

Hello cldb2016,

 

As far as I know, any HTML code doesn't work in Calculated fields, so it's impossible to display an image in a Calculated field.

But you can use a JavaScript.

You can add an HTML Block, click the Source button or disable the HTML Editor and enter the following code:

<SCRIPT LANGUAGE="JavaScript">
var score = '[@calcfield:5]';
score = parseFloat(score);

if ((score>0)&&(score<=.5)) document.write('<img src="[@app:URL_0_5/]">');
if ((score>0.5)&&(score<=1.0)) document.write('<img src="[@app:URL_1_0/]">');
if ((score>1.0)&&(score<=1.5)) document.write('<img src="[@app:URL_1_5/]">');
if ((score>1.5)&&(score<=2.0)) document.write('<img src="[@app:URL_2_0/]">');
if ((score>2.0)&&(score<=2.5)) document.write('<img src="[@app:URL_2_5/]">');
if ((score>2.5)&&(score<=3.0)) document.write('<img src="[@app:URL_3_0/]">');
if ((score>3.0)&&(score<=3.5)) document.write('<img src="[@app:URL_3_5/]">');
if ((score>3.5)&&(score<=4.0)) document.write('<img src="[@app:URL_4_0/]">');
if ((score>4.0)&&(score<=4.5)) document.write('<img src="[@app:URL_4_5/]">');
if ((score>4.5)&&(score<=5.0)) document.write('<img src="[@app:URL_5_0/]">');
if ((score>5.0)||(score<=0)) document.write('<img src="[@app:URL_11_0/]">');
</SCRIPT>

I hope, it works :)

Link to comment
Share on other sites

  • 3 weeks later...

Hi,

 

I tried inserting the code above and it did not work. The first thing I did was to remove the calculated field containing the old code above. Then I created a new HTML block and I clicked on source and inserted the code you provided. I then input a user that had not been rated yet and clicked enter and received the same results. The image for zero stars (URL_11_0) did not display. I tried to do this different ways and I disabled the HTML editor, but no luck. Do you have any other suggestions? Thanks

Link to comment
Share on other sites

 

I have a datapage that allows users to view the ratings other users by entering the users user name. User ratings range from 0 stars to 5 stars. This page receives parameter telling it how many stars the users has. So if the user has a rating of 1.5 stars the page will display an image showing 1.5 stars by referencing the fourth line of the code below [@app:URL_1_5].  However if the user enters a username that has never received a rating or if the input does not fall within the range below (0-5) it should call a graphic that shows 5 grayed out stars which represents 0. (see line 12 which is supposed to call grayed out 5 star image). I'm not sure what I'm doing wrong and I am in need of a little assistance. All of this takes place in a calculated field. -Thanks
 
CASE 
 
WHEN [@calcfield:5]> 0 AND [@calcfield:5] <= .5 THEN '[@app:URL_0_5]'
 
WHEN [@calcfield:5]> .5 AND [@calcfield:5] <= 1.0 THEN '[@app:URL_1_0]'
 
WHEN [@calcfield:5]> 1.0 AND [@calcfield:5] <= 1.5 THEN '[@app:URL_1_5]'
 
WHEN [@calcfield:5]> 1.5 AND [@calcfield:5] <= 2.0 THEN '[@app:URL_2_0]'
 
WHEN [@calcfield:5]> 2.0 AND [@calcfield:5] <= 2.5 THEN '[@app:URL_2_5]'
 
WHEN [@calcfield:5]> 2.5 AND [@calcfield:5] <= 3.0 THEN '[@app:URL_3_0]'
 
WHEN [@calcfield:5]> 3.0 AND [@calcfield:5] <= 3.5 THEN '[@app:URL_3_5]'
 
WHEN [@calcfield:5]> 3.5 AND [@calcfield:5] <= 4.0 THEN '[@app:URL_4_0]'
 
WHEN [@calcfield:5]> 4.0 AND [@calcfield:5] <= 4.5 THEN '[@app:URL_4_5]'
 
WHEN [@calcfield:5]> 4.5 AND [@calcfield:5] <= 5.0 THEN '[@app:URL_5_0]'
 
ELSE '[@app:URL_11_0]'
 
END

 

 

Change
 
ELSE '[@app:URL_11_0]'
 
to 
 
WHEN [@calcfield:5]= 0 THEN '[@app:URL_5_0]'
Link to comment
Share on other sites

What Jan suggested worked for my purpose. I have a similar graphic requirements based on conditions. My field is not a calculated field, but it is taking in values from a calculated field. 

 
I created an html block, then I referred to the actual field to point to the variables to be counted, instead of a calculated field (See "var score =").
 
Also, instead of pointing to app parameters within Caspio, I went ahead and sourced the images directly from my site. (see "https" references in the code).
 
This made stuff a whole lot easier for me.
 
My code is below. Note, I changed my url address, so you have to enter your own - to point to your image files.
 
<SCRIPT LANGUAGE="JavaScript">
var score = '[@field:Status]';
score = parseFloat(score);

if ((score>0)&&(score<=1)) document.write ('<img width=“15px" src="https://your_own_url/images/a_yellow_flag.png" />');

if ((score>1)&&(score<=2)) document.write ('<img width=“15px" src="https://your_own_url/images
 /a_blue_flag.png" />');

if ((score>2)&&(score<=3)) document.write ('<img width=“15px" src="https://your_own_url/images/
 a_green_flagsmiley.png" />');

if ((score>0)&&(score<=0))document.write ('<img width=“15px" src="https://your_own_url/images/
 a_red_flag.png" />');


</SCRIPT>

Link to comment
Share on other sites

  • 5 years later...

Just to add some additional information. In Caspio Release 25, you may now use unicodes. Caspio now supports Unicode symbols so you can display emoji characters and other symbols directly in your apps. They can be used in Tables, Views, DataPages, Email/SMS Notifications, Localizations, Formulas, Triggered Actions and Application Tasks. The supported symbols are listed at https://unicode.org/emoji/charts/full-emoji-list.html.

image.png.380c0ca114032d9650630a54fbdd2a28.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...