Improved Rating Experience in AwareIM using JQuery

Here are the steps to implement the Rating feature into existing application. This will gives a nice representational view which enables user to give rating of any form.

Step-1 

Create a new business object in AwareIM. We are using the name “Rating”, but obviously you can use any name that suits your needs or existing Business Object.

Step-2 

Now create a new from “rating”, under your newly created business object.

Step-3 

In this new form, add two rows.  First row is plain text which help us in gathering user’s response. assign a unique ID to this input field (we will use this in later steps), we have assigned “ratingValue” id to this input field.

Step-4 

Create another row in the same form, which contains HTML. the HTML content of the form should look like this-

<div class=’rating-stars text-center’>   
<ul id=’stars’>
<li style=”list-style: none”>     </li>
<li class=’star’ title=’Poor’ data-value=’1′>             </li>
<li style=”list-style: none”>     </li>
<li class=’star’ title=’Fair’ data-value=’2′>             </li>
<li style=”list-style: none”>     </li>
<li class=’star’ title=’Good’ data-value=’3′>             </li>
<li style=”list-style: none”>     </li>
<li class=’star’ title=’Excellent’ data-value=’4′>             </li>
<li style=”list-style: none”>     </li>
<li class=’star’ title=’WOW!!!’ data-value=’5′>             </li>
<li style=”list-style: none”>   </li>
</ul> </div>

we are using font-awesome star icon to generate start view for rating, you can use any other icon too (like fa-heart or fa-like).

Step-5 

Add following css in your custom css folder to improve the appearance of the above code.

.rating-stars ul {
list-style-type: none;
padding: 0;
-moz-user-select: none;
-webkit-user-select: none;
}
.rating-stars ul > li.star {
display: inline-block;
}
/* Idle State of the stars */

.rating-stars ul > li.star > i.fa {
font-size: 2.5em;
/* Change the size of the stars */

color: #ccc;
/* Color on idle state */
}
/* Hover state of the stars */

.rating-stars ul > li.star.hover > i.fa {
color: #FFCC36;
}
/* Selected state of the stars */

.rating-stars ul > li.star.selected > i.fa {
color: #FF912C;
}

Step-6 

Now finally we will use script to make our starts functional and get the user response

  /* 1. Visualizing things on Hover – See next part for action on click *//* 1. Visualizing things on Hover – See next part for action on click */$(‘#stars li’).on(‘mouseover’, function() {
       var onStar = parseInt($(this).data(‘value’), 10); // The star currently mouse on
       // Now highlight all the stars that’s not after the current hovered star
          $(this).parent().children(‘li.star’).each(function(e) {
                   if (e < onStar) {         $(this).addClass(‘hover’);        }        else {   $(this).removeClass(‘hover’);        }      });
     }).on(‘mouseout’, function() {     $(this).parent().children(‘li.star’).each(function(e) {       $(this).removeClass(‘hover’);     });    });

  /* 2. Action to perform on click */
 $(‘#stars li’).on(‘click’, function() {
          var onStar = parseInt($(this).data(‘value’), 10); // The star currently selected    var stars = $(this).parent().children(‘li.star’);
          for (i = 0; i < stars.length; i++) {        $(stars[i]).removeClass(‘selected’);    }
          for (i = 0; i < onStar; i++) {        $(stars[i]).addClass(‘selected’);    }
       //replace with ID of your text-input     $(“#ratingValue”).val(onStar);      });

Step-7 

Simply click on save button, and your response will be saved.