Wappler Star Rating

An interactive star rating widget for Wappler App Connect pages.

Table of Contents

• Overview
• Requirements
• Installation
• Usage
• Properties
• Actions
• Events
• Examples
• Changelog
• License

Overview

Wappler Star Rating adds a fully reactive, accessible star rating widget to your App Connect pages. It works as a native custom element (<star-rating>) wrapped in a Wappler App Connect component (is="dmx-star-rating"), meaning it integrates seamlessly with App Connect data bindings, actions, and events.

Key features:

• Reactive — bind the current rating to any App Connect data source using Wappler's Dynamic Attributes UI
• Programmatic control — set the value from any event handler or flow step
• Read-only mode — render star displays without user interaction
• Change event — hook into user clicks with dmx-on:change
• Zero dependencies — pure Web Component + App Connect, no third-party libraries
• Compatible with Bootstrap 5, PHP, Node.js, and ASP.NET Wappler projects

Requirements

| Requirement | Version | |-------------|------------| | Wappler | >= 4.0.0 | | App Connect | Any |

Installation

Install Wappler Star Rating using Wappler's built-in Extension Manager:

1. Open Wappler and go to Extensions → Extension Manager.
2. Search for wappler-star-rating or browse the Widgets category.
3. Click Install next to Wappler Star Rating by Ben Pleysier.
4. Restart Wappler (or reload your project) when prompted.

The extension will automatically register the dmx-star-rating component, copy star-rating.js to your project's js/ folder, and link it on any page you add the component to.

Manual install (advanced): If you need to install without the Extension Manager, place the package under your project's extension directory and ensure js/star-rating.js is linked in the page head.

Usage

After installation, insert the Star Rating component from the Wappler App Connect panel under the Widgets group.

The generated markup looks like this:

<star-rating is="dmx-star-rating" id="rating1" rating="0" max="5"></star-rating>

For static values, set the Rating property. For dynamic values, add Dynamic Attributes → Star Rating → Rating in Wappler and select the data source for dmx-bind:rating.

Dynamic binding example

<star-rating
  is="dmx-star-rating"
  id="product_rating"
  dmx-bind:rating="sc_product.data.rating"
  max="5"
></star-rating>

Read-only display example

<star-rating
  is="dmx-star-rating"
  id="display_rating"
  dmx-bind:rating="reviews.average_score"
  max="5"
  readonly
></star-rating>

Properties

| Property | Attribute | Type | Default | Description | |------------|------------|---------|---------|----------------------------------------------------------------| | Id | id | text | — | Unique App Connect component id used in expressions and scopes. | | Rating | rating | number | 0 | The current star rating value (0 to max). | | Max Stars | max | number | 5 | The maximum number of stars to display. | | Read Only | readonly | boolean | false | When enabled the user cannot change the rating. |

The Rating value supports Wappler's Dynamic Attributes UI and can be bound using dmx-bind:rating="...". The component initializes from the App Connect bound prop, so both static rating="" and dynamic dmx-bind:rating values are supported.

Actions

| Action | Parameter | Type | Description | |--------------|---------------------|--------|------------------------------------------| | setValue() | value (required)| number | Set the star rating value programmatically. |

Example — set value from a button click:

<button dmx-on:click="product_rating.setValue(5)">Give 5 Stars</button>

Example — reset rating:

<button dmx-on:click="product_rating.setValue(0)">Clear Rating</button>

Events

| Event | Fires when… | |----------|-----------------------------------------------| | change | The user clicks a star to change the rating. |

Access the current value in the event handler via the component's value property:

<star-rating
  is="dmx-star-rating"
  id="my_rating"
  rating="0"
  max="5"
  dmx-on:change="sc_save.load({ rating: my_rating.value })"
></star-rating>

Examples

Save a rating to the database on change

<star-rating
  is="dmx-star-rating"
  id="review_rating"
  dmx-bind:rating="sc_review.data.rating"
  max="5"
  dmx-on:change="sc_update_rating.load({ id: sc_review.data.id, rating: review_rating.value })"
></star-rating>

Show current value as text

<star-rating is="dmx-star-rating" id="my_rating" rating="3" max="5"></star-rating>
<p>You rated: <span dmx-text="my_rating.value"></span> / 5</p>

Read-only average rating from a data source

<star-rating
  is="dmx-star-rating"
  id="avg_rating"
  dmx-bind:rating="sc_stats.data.average_rating"
  max="5"
  readonly
></star-rating>

Changelog

v1.0.1 — 2026-05-28

• Added a Star Rating → Rating dynamic attribute entry for Wappler's Dynamic Attributes UI.
• The Rating dynamic attribute writes dmx-bind:rating="..." and exposes the App Connect data picker.
• Updated component initialization to read from the bound App Connect prop (this.props.rating), supporting both static rating="" and dynamic dmx-bind:rating values.

v1.0.0 — 2026-05-26

• Initial release.
• Interactive star rating widget built as a Web Component.
• Full App Connect integration: reactive rating and max bindings, readonly support.
• setValue(value) action for programmatic control.
• change event fired on user interaction.
• Shadow DOM–based rendering with gold/silver star styling and hover state.
• MutationObserver-driven sync between the custom element and App Connect state.
• Compatible with Wappler >= 4.0.0 (Bootstrap 5, PHP, Node.js, ASP.NET).

License

MIT © Ben Pleysier