Star Rating

Last update: Edit

1 Introduction

The Star Rating widget enables rating an object with stars or custom icons.

1.1 Features

  • Rate an object with stars
  • Display average rating
  • Display rating in whole and half stars
  • Execute a microflow when the rate is changed
  • Configurable star colors
  • Flexible number of stars
  • Support for mobile touch events

2 Configuration

2.1 Customizing the Rating Icon

In order to overwrite the default star icon, add these classes to your project theme and replace the content with your preferred glyphicon:

 .rating-flag [class*="widget-star-rating-full"]:before {
  content: "\e034"; /* flag icon */ 
.rating-flag .widget-star-rating-empty:before {
  content: "\e034"; /* flag icon */

The rating-flag class should be added to the widget configuration on the Common tab.

2.2 Configuring the Security

Security is a mandatory feature for ratings. This is an example configuration:

For the Campaign entity access rules, a User should only be able to read the average attribute:

For the Rate entity access rules, the User should be able to only write their own rating:

When creating a new rating, its important to use the current user’s previous rating as the initial rate value. Use a microflow like on the example below for the custom rate-me button:

Rate Me

To calculate the average rate, add a microflow like the one in the example below to the after-commit and after-delete event handlers in the domain model:

Calculate Average Rate

3 Developing This Marketplace Component

To contribute to the development of this widget, follow these steps:

  1. Install the following:
  2. Fork and clone the mendixlabs/star-rating repository. The code is in Typescript.
  3. Set up the development environment by running npm install.
  4. Create a folder named dist in the project root.
  5. Create a Mendix test project in the dist folder and rename its root folder to dist/MxTestProject, or get the test project from mendixlabs/star-rating. Changes to the widget code will be automatically pushed to this test project.
  6. To automatically compile, bundle, and push code changes to the running test project, run grunt.
  7. To run the project unit tests with code coverage (results can be found at dist/testresults/coverage/index.html), run: npm test.
  8. Run the unit test continuously during development via karma start.

We are actively maintaining this widget. Please report any issues or suggestions for improvement at mendixlabs/star-rating.