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

[cldb2016]

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

[LWSChad]

Just drop the ELSE

 

WHEN [@calcfield:5]<= 0 THEN '[@app:URL_11_0]'

 

edit...

 

or maybe you just need a THEN in the ELSE

 

ELSE THEN '[@app:URL_11_0]'

 

 

I don't know for sure, but it'd be worth a try

[Jan]

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

[cldb2016]

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

[LWSChad]

 

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]'

[Elena]

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>

[NailDyanC]

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.

[ParkLoey]

Hey guys! I recently found out that Ned from Caspio had a livestream about using Unicode emojis on Caspio! Here's the link:

 

 

I can recommend subscribing to their channel because these livestreams are great and pretty informative!

- LOEY

[PotatoMato]

Hi! Just to update this post. Star rating is available on Caspio's app extensions. You may check this link: https://www.caspio.com/services/app-extensions/ and go to UI controls.

 

-Potato