cancel
Showing results for 
Search instead for 
Did you mean: 
kholleback
Nintex Newbie

Star rating (0-5) column type

Jump to solution

Has anyone worked with the Rating (0-5) column type in a Nintex Form?  It displays fine in the list view, but Nintex Forms doesn't even recognize the column exists. 

Since this appears to be a bug or feature that no longer works with this type of column, are there known workarounds or code snippets available to display star ratings in a form?

Labels: (2)
0 Kudos
Reply
5 Replies
cassymfreeman
Automation Master
Automation Master

Re: Star rating (0-5) column type

Jump to solution

did you find a workaround/solution?

0 Kudos
Reply
Not applicable

Re: Star rating (0-5) column type

Jump to solution

I have done this by adding star ratings html code in rich text box and css in custom css in form settings. You can refer html and css code from below link-

Selectable Rating Stars with Pure CSS3 - HTML5, CSS3 & JS Experiments by Martin Ivanov (@wemakesites... 

Star Color change on mouse hover action

And to get count of no of star ratings, on submit action. you can refer below code

NWF$("input[name='group-1']:checked").each( function () { alert(NWF$(this).val()); });

View solution in original post

Reply
Not applicable

Re: Star rating (0-5) column type

Jump to solution

Cassy - you can try using below apporach

0 Kudos
Reply
brightlight
Nintex Newbie

Re: Star rating (0-5) column type

Jump to solution

How to implement more than one rating?

0 Kudos
Reply
akap
Nintex Newbie

Re: Star rating (0-5) column type

Jump to solution

I was able to implement a hybrid workaround in SP2013 based on the provided solution but does not use the OOTB rating column.

 

1. I created a choice column "Star Rating" and entered following choices in this exact order: 5,4,3,2,1

2. In Nintex set CSS class on the choice column "Star Rating" to acidjs-rating-stars

3. Then added the folllowing to Form Settings Custom CSS:

.acidjs-rating-stars,.acidjs-rating-stars label::before{    display: inline-block;} .acidjs-rating-stars label:hover,.acidjs-rating-stars label:hover ~ label{    color: #f5b301;} .acidjs-rating-stars *{    margin: 0;    padding: 0;} .acidjs-rating-stars input{    display: none;} .acidjs-rating-stars{    unicode-bidi: bidi-override;    direction: rtl;} .acidjs-rating-stars label{    color: #ccc;} .acidjs-rating-stars label::before{    content: "\2605";    width: 28px;    line-height: 28px;    text-align: center;    font-size: 28px;    cursor: pointer;} .acidjs-rating-stars input:checked ~ label{    color: #f5b301;} .acidjs-rating-disabled{    opacity: .50;         -webkit-pointer-events: none;    -moz-pointer-events: none;    pointer-events: none;}

 

Shortcoming here is that only the selected star highlights rather than all less than star selected.  The other solution is, as someone else noted, instead of using a choice column use a rich text control and apply custom html as noted earlier in this same thread.  But shortcoming here is the value is not submitted in the form.

 

Anyone else have a better solution or workaround for this?

 
Tags (1)
0 Kudos
Reply