Rating with Stars to a user in App

Hi Khan and Clayton,

Another option is to calculate the rating in a hidden value from inside the forms and then use icons in the case detail to display the stars.

details here :
https://confluence.dimagi.com/display/commcarepublic/Adding+Icons+in+Case+List+and+Case+Detail+screen

  • If a user completes 8 tasks out of 10,
    the hidden value switch to "4stars" and the mapping target an icon showing 4 stars
  • If a user completes 6 tasks out of 10, it should show *** (3 stars) against his/her name.
    the hidden value switch to "3stars" and the mapping target an icon showing 3 stars
  • If a user completes 4 tasks out of 10, it should show ** (2 stars) against his/her name.
    the hidden value switch to "2stars" and the mapping target an icon showing 2 stars

The bonus with this method is that you can control the aspect of your stars, and you will have the same stars whichever device is used.

Cheers,

-Michel

Thanks Clayton... I am putting this command

if(#form/count_in_percent < 60, ':star:', ':star::star::star:') but this is not working. output only shows :star::star::star::star

Thanks Michel. Actually i want to make an start rating question and trying to use unicode :star: but in app it is not reflecting. it shows only unicode not star. Do u have any work around. I have used emojis also but it is showing only white star with a small size and i want to use a medium size star with pale yellow colour.

Hi,

This appears to be a peculiarity with the software we use for the forum or potentially gmail, which is replacing our raw unicode with markup.

Can you copy the Star character itself from here instead and try again? https://emojipedia.org/white-medium-star/

-Clayton

Thanks Clayton for your support on this. I have used "Star" emoji ⭐ White Medium Star Emoji in app but this doesnt give me fruitful result. it shows small and white Start while i am looking for Pale Yellow star with a big size. You can see the image here

Hi,

How these stars appear is a bit dependent on the phone, as the app just uses the native font rendering.

It might help to go to a page like this: http://xahlee.info/comp/unicode_stars.html on the phone itself and see which of these characters is displayed the most to your liking, and use that for your app.

-Clayton

This is exactly why I said that using icons instead of emoji will enable you to control the aspect of your stars...

Emoji's aspect are based on phone android version / OEM's software... Icons are more stable.

See this thread for examples of trials : Fun question: Any other text icons that work inside commcare apps?

-Michel

Hi Michel,

i tried to using icons but it show very small star. Have u used any icons in this case and got a fruitful result ? what should be size ?

Hi,

Some documentation about icons in commcare : Icons in CommCare - CommCare Public - CommCare Public

I have used icons on several apps. I usually cut them at 50x50 pixels and this is enough.

example :

-Michel

Thanks a ton Michel for your help. Icons with size 50x50 pixels are working. Now i have another query :wink:

Can we show text in colour on the basis of output conditions ? like if a user has not visited to a house for last seven days then his/her name should be shown as RED text

nop. it is not possible to color texts in Commcare. (could be a great feature by the way !)
But you can use another icon if you want ! (red flag, little chrono, etc.) You can add calculation in the mapping as shown in the example in the first link I've shared.

-Michel

Thanks Michel for your continuous support. While using icons, the title is disturbed. in my case, in case list "Pregnant" title is somehow disturbed while using icons in case list. u can see blow image

Yes, it is not possible to adjust the width of the column when using icons... Usually, there is no titles because the icon is supposed to make sens without it.

If you only present the name and the icon in the case list, a workaround is to include a third column before the icon and leave it empty with just the title Pregnancy.

-Michel

Hi Michel,

I have created a hidden value which is storing visit date of a user with formula "today()" .
now i want if the next visit date is after two days then it should show "Green icon" in case list and if user was not visited within that two days or crossed those two days then icon should be turned into red.

For example Now what i have done is that if next visit date is greater than today then it should show RED but it is not reflecting red icon and showing green icon.

image

kindly help me on that

Hi,

Does it improve the funcitoning if you wrap the "." in an explicit date cast, ie: "date(.) > today()"?

I think your math may also be backwards. the call of ". > today()" means that the date of the visit is after today, which would be true for a visit scheduled 2 days from now.

-Clayton

Hi Clayton

let me go through the whole scenario and i hope this would clarify me and you on this.

I have a hidden value hv_last_visit_date which is storing the date on which a beneficiary was visited.

Now the next visit to that beneficiary is scheduled after 3 days.

Now i want that if that if beneficiary is visited within 3 days from last visit date then in case list it should show green icon.

And if beneficiary is not visited within 3 days from last visit date then in case list it should show red icon.

i hope i am clear on that now.

Then you should use something like this :

  • Red : today() > date(. + 3)
  • Green : today() <= date(. + 3)

-Michel

That will be applicable on hv_last_visit_date or do i need to create another hidden value hv_next_visit (Storing next visit date) then apply above formula on hv_next_visit

I must say I'm lost here...

You have a property in wich you store the last visit date at the end of the form used during this last visit, true ? This property is called hv_last_visit_date.

Then you want to discriminate between beneficiary that

  1. were visited in the last 3 days (green)
  2. weren't visited during those last 3 days (red)

Then, using hv_last_visit_date in the case list, you do the mapping as said :

  1. Green : today() <= date(. + 3)
  2. Red : today() > date(. + 3)

Now, if the next visit date is known, no need for all this : just count the number of days between the last visit and the next visit and check if this number is greater than 3 or not...

An advice : always follow the easiest solution !

-Michel

Thanks a lot for your help Michel.... given solution is working smoothly...... A big help.... appreciate it