Improved Rating Experience in AwareIM using JQuery

2374 New Build Released
December 22, 2017
2375 New Build Released
January 30, 2018

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.

2 Comments

  1. Admin Admin says:

    Nice job Himanshu

Leave a Reply

Your email address will not be published. Required fields are marked *