How To: Implement a rating scale in InfoPath 2010

I recently worked on a project were the customer wanted to have a rating scale within an InfoPath form, similar to SharePoint’s rating feature. This does not come out of the box and requires a little bit of work but works like a treat once implemented.

The most important thing to mention is that this is based on picture buttons and therefore only works with InfoPath 2010. I’ve created the rating in a sample form that you can download and trial here. And here are the steps to re-create the rating section:

1. Firstly you will need the picture for the picture buttons. I normally use Iconfinder which I find really great to get free, high quality icons in all different sizes and shapes. We need 3 different pictures, one representing non-selected (), one representing selected () and one representing a hover over functionality ().
2. Once you have your pictures, open up the InfoPath form you want to add the rating to
3. Create a new field called “Rating” as shown below

   

    

4. We want a 5 star rating, so next we’ll insert 10 picture buttons. Why? Because for each rating score we need an “Active” button and an “Inactive” button
5. Next we configure all picture buttons as shown below:
   1. The first picture button will be an “Inactive” button

      

       

      1. Make sure you name your button appropriately (ID field)
      2. In the “Picture” section click on Browse and select your inactive picture. Note that the filename of your file will not match the filename in the picture drop down. InfoPath creates its own internal filename
      3. Make sure the “Hide picture button in read-only views” box is NOT checked if you want to show the buttons in read only views.
      4. In the “Dynamic Behaviour” section click on Browse and select your hover over picture. Again, the filename in the drop down will be different to the actual filename.

       

   2. The second picture button will be an “Active” button

      

       

      1. Make sure you name your button appropriately (ID field)
      2. In the “Picture” section click on Browse and select your active picture. Note that the filename of your file will not match the filename in the picture drop down. InfoPath creates its own internal filename
      3. Make sure the “Hide picture button in read-only views” box is NOT checked if you want to show the buttons in read only views.
      4. In the “Dynamic Behaviour” section click on Browse and select your hover over picture. Again, the filename in the drop down will be different to the actual filename.

    

6. Now that we have the buttons configure we’ll set up the rules to show and hide the different buttons and make the rating appear dynamic. Each button requires two rules. One to hide the button when a certain rating score is reached and one to set the rating score value in our “Rating” field.
   1. We configure the “Hide Control” rule on the first inactive button as shown below:

      

   2. We configure the “Set Rating Score” rule on the first inactive button as shown below:

      

   3. We configure the “Hide Control” rule on the first active button as shown below:

      

   4. We configure the “Set Rating Score” rule on the first active button as shown below:

      

   5. No we repeat the steps above for the remaining buttons but amend some of the conditions:
      1. Inactive button 2:
         
         1. “Hide Control” condition: Rating > 1
         2. “Set Rating Score” set field: Rating = 2
      2. Active button 2:
         
         1. “Hide Control” condition: Rating < 2
         2. “Set Rating Score” set field: Rating = 2
      3. Inactive button 3:
         
         1. “Hide Control” condition: Rating > 2
         2. “Set Rating Score” set field: Rating = 3
      4. Active button 3:
         
         1. “Hide Control” condition: Rating < 3
         2. “Set Rating Score” set field: Rating = 3
      5. Inactive button 4:
         
         1. “Hide Control” condition: Rating > 3
         2. “Set Rating Score” set field: Rating = 4
      6. Active button 4:
         
         1. “Hide Control” condition: Rating < 4
         2. “Set Rating Score” set field: Rating = 4
      7. Inactive button 5:
         
         1. “Hide Control” condition: Rating = 5
         2. “Set Rating Score” set field: Rating = 5
      8. Active button 5:
         
         1. “Hide Control” condition: Rating < 5
         2. “Set Rating Score” set field: Rating = 5
   6. We end up with something similar to the below:

       

      

       

   7. Congratulations, we are done. Now preview your form and rate your work