# Rating

(part of package '[Bootstrap Extra Components](https://docs.servoy.com/reference/servoyextensions/packages/ui-component-packages/bootstrap-extra-components)')\
Extends designtime/SolutionModel: [JSWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jswebcomponent)\
Extends runtime: [RuntimeWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent)

A component that provides a rating interface for displaying and collecting a numerical score.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### dataProviderID

Bound data provider identifier for the rating value. Type: [Dataprovider](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)

***

### enabled

Flag indicating whether the rating component is enabled for user interaction. Type: [Enabled](https://docs.servoy.com/servoy-developer/component_and_service_property_types#protected) Default Value: true

***

### location

The position of the rating component on the form. Type: [Point](https://github.com/Servoy/gitbook/blob/master/reference/servoycore/dev-api/js-lib/point.md)

***

### max

The maximum rating value allowed. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 5

***

### showPercentageOnHover

When true, displays the rating value as a percentage on hover. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)

***

### stateOff

The representation (for example, an icon or symbol) for an inactive (unselected) rating state. Type: [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

***

### stateOn

The representation (for example, an icon or symbol) for an active (selected) rating state. Type: [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

***

### visible

Flag indicating whether the rating component is visible. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: true

***

## Events

### onDataChangeMethodID(oldValue,newValue,event)

Handle changed data, return false if the value should not be accepted.\
JSEvent.data will contain extra information about dataproviderid, its scope and the scope id (record datasource or form/global variable scope)

**Parameters:**

> * {[${dataproviderType}](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)} oldValue The previous rating value.
> * {[${dataproviderType}](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)} newValue The new rating value to be set.
> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object associated with the data change.

**Returns:** {[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)}

***

### onHover(event,value)

Fired when the rating component is hovered.

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object containing details about the hover event.
> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} value The rating value corresponding to the hovered element.

***

### onLeave(event,value)

Fired when the mouse leaves the rating component.

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object containing details about the leave event.
> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} value The current rating value at the time of the leave event.

***

***