class sap.m.RatingIndicator

Control sample: sap.m.RatingIndicator
Visiblity: public
UX Guidelines: Rating Indicator
Implements: sap.ui.core.IFormContent
Available since: N/A
Module: sap/m/RatingIndicator
Application Component: CA-UI5-CTR

The rating indicator is used to display a specific number of icons that are used to rate an item. Additionally it is also used to display the average over all ratings.

Structure

Usage

The preferred number of icons is between 5 (default) and 7.

Responsive Behavior

You can display icons in 4 recommended sizes:

Note: If no icon size is set, the rating indicator will set it according to the content density.

Constructor

Constructor for a new RatingIndicator.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.

new sap.m.RatingIndicator(sId?, mSettings?)
Param Type Default Value Description
sId? string

ID for the new control, generated automatically if no ID is given

mSettings? object

Initial settings for the new control Enables users to rate an item on a numeric scale.


Properties

Name Type Default Value Description
displayOnly boolean false

The RatingIndicator in displayOnly mode is not interactive, not editable, not focusable, and not in the tab chain. This setting is used for forms in review mode.

Since: 1.50.0.

Visibility: public
editable boolean true

Defines whether the user is allowed to edit the RatingIndicator. If editable is false the control is focusable, and in the tab chain but not interactive.

Since: 1.52.0.

Visibility: public
enabled boolean true

Value "true" is required to let the user rate with this control. It is recommended to set this parameter to "false" for the "Small" size which is meant for indicating a value only

Visibility: public
iconHovered sap.ui.core.URI

The URI to the icon font icon or image that will be displayed for hovered rating symbols. A star icon will be used if the property is not set

Visibility: public
iconSelected sap.ui.core.URI

The URI to the icon font icon or image that will be displayed for selected rating symbols. A star icon will be used if the property is not set

Visibility: public
iconSize sap.ui.core.CSSSize

The Size of the image or icon to be displayed. The default value depends on the theme. Please be sure that the size is corresponding to a full pixel value as some browsers don't support subpixel calculations. Recommended size is 1.375rem (22px) for normal, 1rem (16px) for small, and 2rem (32px) for large icons correspondingly.

Visibility: public
iconUnselected sap.ui.core.URI

The URI to the icon font icon or image that will be displayed for all unselected rating symbols. A star icon will be used if the property is not set

Visibility: public
maxValue int 5

The number of displayed rating symbols

Visibility: public
value float 0

The indicated value of the rating

Visibility: public
visualMode sap.m.RatingIndicatorVisualMode Half

Defines how float values are visualized: Full, Half (see enumeration RatingIndicatorVisualMode)

Visibility: public

Associations

Name Cardinality Type Description
ariaDescribedBy 0..n sap.ui.core.Control

Association to controls / ids which describe this control (see WAI-ARIA attribute aria-describedby).

ariaLabelledBy 0..n sap.ui.core.Control

Association to controls / ids which label this control (see WAI-ARIA attribute aria-labelledby).


Events Overview

Event Description
change

The event is fired when the user has done a rating.

liveChange

This event is triggered during the dragging period, each time the rating value changes.

change

The event is fired when the user has done a rating.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object
value int

The rated value

liveChange

This event is triggered during the dragging period, each time the rating value changes.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object
value float

The current value of the rating after a live change event.


Methods Overview

Method Description
addAriaDescribedBy

Adds some ariaDescribedBy into the association ariaDescribedBy.

addAriaLabelledBy

Adds some ariaLabelledBy into the association ariaLabelledBy.

attachChange

Attaches event handler fnFunction to the change event of this sap.m.RatingIndicator.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.RatingIndicator itself.

The event is fired when the user has done a rating.

attachLiveChange

Attaches event handler fnFunction to the liveChange event of this sap.m.RatingIndicator.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.RatingIndicator itself.

This event is triggered during the dragging period, each time the rating value changes.

bindValue

Binds property value to model data.

See ManagedObject.bindProperty for a detailed description of the possible properties of oBindingInfo

detachChange

Detaches event handler fnFunction from the change event of this sap.m.RatingIndicator.

The passed function and listener object must match the ones used for event registration.

detachLiveChange

Detaches event handler fnFunction from the liveChange event of this sap.m.RatingIndicator.

The passed function and listener object must match the ones used for event registration.

sap.m.RatingIndicator.extend

Creates a new subclass of class sap.m.RatingIndicator with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

fireChange

Fires event change to attached listeners.

fireLiveChange

Fires event liveChange to attached listeners.

getAccessibilityInfo

References:

  • sap.ui.core.Control#getAccessibilityInfo

getAriaDescribedBy

Returns array of IDs of the elements which are the current targets of the association ariaDescribedBy.

getAriaLabelledBy

Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.

getDisplayOnly

Gets current value of property displayOnly.

The RatingIndicator in displayOnly mode is not interactive, not editable, not focusable, and not in the tab chain. This setting is used for forms in review mode.

Default value is false.

getEditable

Gets current value of property editable.

Defines whether the user is allowed to edit the RatingIndicator. If editable is false the control is focusable, and in the tab chain but not interactive.

Default value is true.

getEnabled

Gets current value of property enabled.

Value "true" is required to let the user rate with this control. It is recommended to set this parameter to "false" for the "Small" size which is meant for indicating a value only

Default value is true.

getIconHovered

Gets current value of property iconHovered.

The URI to the icon font icon or image that will be displayed for hovered rating symbols. A star icon will be used if the property is not set

getIconSelected

Gets current value of property iconSelected.

The URI to the icon font icon or image that will be displayed for selected rating symbols. A star icon will be used if the property is not set

getIconSize

Gets current value of property iconSize.

The Size of the image or icon to be displayed. The default value depends on the theme. Please be sure that the size is corresponding to a full pixel value as some browsers don't support subpixel calculations. Recommended size is 1.375rem (22px) for normal, 1rem (16px) for small, and 2rem (32px) for large icons correspondingly.

getIconUnselected

Gets current value of property iconUnselected.

The URI to the icon font icon or image that will be displayed for all unselected rating symbols. A star icon will be used if the property is not set

getMaxValue

Gets current value of property maxValue.

The number of displayed rating symbols

Default value is 5.

sap.m.RatingIndicator.getMetadata

Returns a metadata object for class sap.m.RatingIndicator.

getValue

Gets current value of property value.

The indicated value of the rating

Default value is 0.

getVisualMode

Gets current value of property visualMode.

Defines how float values are visualized: Full, Half (see enumeration RatingIndicatorVisualMode)

Default value is Half.

removeAllAriaDescribedBy

Removes all the controls in the association named ariaDescribedBy.

removeAllAriaLabelledBy

Removes all the controls in the association named ariaLabelledBy.

removeAriaDescribedBy

Removes an ariaDescribedBy from the association named ariaDescribedBy.

removeAriaLabelledBy

Removes an ariaLabelledBy from the association named ariaLabelledBy.

setDisplayOnly

Sets a new value for property displayOnly.

The RatingIndicator in displayOnly mode is not interactive, not editable, not focusable, and not in the tab chain. This setting is used for forms in review mode.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is false.

setEditable

Sets a new value for property editable.

Defines whether the user is allowed to edit the RatingIndicator. If editable is false the control is focusable, and in the tab chain but not interactive.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

setEnabled

Sets a new value for property enabled.

Value "true" is required to let the user rate with this control. It is recommended to set this parameter to "false" for the "Small" size which is meant for indicating a value only

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

setIconHovered

Sets a new value for property iconHovered.

The URI to the icon font icon or image that will be displayed for hovered rating symbols. A star icon will be used if the property is not set

When called with a value of null or undefined, the default value of the property will be restored.

setIconSelected

Sets a new value for property iconSelected.

The URI to the icon font icon or image that will be displayed for selected rating symbols. A star icon will be used if the property is not set

When called with a value of null or undefined, the default value of the property will be restored.

setIconSize

Sets a new value for property iconSize.

The Size of the image or icon to be displayed. The default value depends on the theme. Please be sure that the size is corresponding to a full pixel value as some browsers don't support subpixel calculations. Recommended size is 1.375rem (22px) for normal, 1rem (16px) for small, and 2rem (32px) for large icons correspondingly.

When called with a value of null or undefined, the default value of the property will be restored.

setIconUnselected

Sets a new value for property iconUnselected.

The URI to the icon font icon or image that will be displayed for all unselected rating symbols. A star icon will be used if the property is not set

When called with a value of null or undefined, the default value of the property will be restored.

setMaxValue

Sets a new value for property maxValue.

The number of displayed rating symbols

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 5.

setValue

Sets the rating value. The method is automatically checking whether the value is in the valid range of 0-maxValue and if it is a valid number. Calling the setter with null or undefined will reset the value to it's default.

setVisualMode

Sets a new value for property visualMode.

Defines how float values are visualized: Full, Half (see enumeration RatingIndicatorVisualMode)

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Half.

unbindValue

Unbinds property value from model data.

addAriaDescribedBy

Adds some ariaDescribedBy into the association ariaDescribedBy.

Param Type DefaultValue Description
vAriaDescribedBy sap.ui.core.ID sap.ui.core.Control

The ariaDescribedBy to add; if empty, nothing is inserted

addAriaLabelledBy

Adds some ariaLabelledBy into the association ariaLabelledBy.

Param Type DefaultValue Description
vAriaLabelledBy sap.ui.core.ID sap.ui.core.Control

The ariaLabelledBy to add; if empty, nothing is inserted

attachChange

Attaches event handler fnFunction to the change event of this sap.m.RatingIndicator.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.RatingIndicator itself.

The event is fired when the user has done a rating.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.m.RatingIndicator itself

attachLiveChange

Attaches event handler fnFunction to the liveChange event of this sap.m.RatingIndicator.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.RatingIndicator itself.

This event is triggered during the dragging period, each time the rating value changes.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.m.RatingIndicator itself

bindValue

Binds property value to model data.

See ManagedObject.bindProperty for a detailed description of the possible properties of oBindingInfo

Param Type DefaultValue Description
oBindingInfo sap.ui.base.ManagedObject.PropertyBindingInfo

The binding information

detachChange

Detaches event handler fnFunction from the change event of this sap.m.RatingIndicator.

The passed function and listener object must match the ones used for event registration.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

detachLiveChange

Detaches event handler fnFunction from the liveChange event of this sap.m.RatingIndicator.

The passed function and listener object must match the ones used for event registration.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

sap.m.RatingIndicator.extend

Creates a new subclass of class sap.m.RatingIndicator with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

Param Type DefaultValue Description
sClassName string

Name of the class being created

oClassInfo object

Object literal with information about the class

FNMetaImpl function

Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class

fireChange

Fires event change to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

value int

The rated value

fireLiveChange

Fires event liveChange to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

value float

The current value of the rating after a live change event.

getAccessibilityInfo

References:

getAriaDescribedBy

Returns array of IDs of the elements which are the current targets of the association ariaDescribedBy.

getAriaLabelledBy

Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.

getDisplayOnly

Gets current value of property displayOnly.

The RatingIndicator in displayOnly mode is not interactive, not editable, not focusable, and not in the tab chain. This setting is used for forms in review mode.

Default value is false.

getEditable

Gets current value of property editable.

Defines whether the user is allowed to edit the RatingIndicator. If editable is false the control is focusable, and in the tab chain but not interactive.

Default value is true.

getEnabled

Gets current value of property enabled.

Value "true" is required to let the user rate with this control. It is recommended to set this parameter to "false" for the "Small" size which is meant for indicating a value only

Default value is true.

getIconHovered

Gets current value of property iconHovered.

The URI to the icon font icon or image that will be displayed for hovered rating symbols. A star icon will be used if the property is not set

getIconSelected

Gets current value of property iconSelected.

The URI to the icon font icon or image that will be displayed for selected rating symbols. A star icon will be used if the property is not set

getIconSize

Gets current value of property iconSize.

The Size of the image or icon to be displayed. The default value depends on the theme. Please be sure that the size is corresponding to a full pixel value as some browsers don't support subpixel calculations. Recommended size is 1.375rem (22px) for normal, 1rem (16px) for small, and 2rem (32px) for large icons correspondingly.

getIconUnselected

Gets current value of property iconUnselected.

The URI to the icon font icon or image that will be displayed for all unselected rating symbols. A star icon will be used if the property is not set

getMaxValue

Gets current value of property maxValue.

The number of displayed rating symbols

Default value is 5.

sap.m.RatingIndicator.getMetadata

Returns a metadata object for class sap.m.RatingIndicator.

getValue

Gets current value of property value.

The indicated value of the rating

Default value is 0.

getVisualMode

Gets current value of property visualMode.

Defines how float values are visualized: Full, Half (see enumeration RatingIndicatorVisualMode)

Default value is Half.

removeAllAriaDescribedBy

Removes all the controls in the association named ariaDescribedBy.

removeAllAriaLabelledBy

Removes all the controls in the association named ariaLabelledBy.

removeAriaDescribedBy

Removes an ariaDescribedBy from the association named ariaDescribedBy.

Param Type DefaultValue Description
vAriaDescribedBy int sap.ui.core.ID sap.ui.core.Control

The ariaDescribedBy to be removed or its index or ID

removeAriaLabelledBy

Removes an ariaLabelledBy from the association named ariaLabelledBy.

Param Type DefaultValue Description
vAriaLabelledBy int sap.ui.core.ID sap.ui.core.Control

The ariaLabelledBy to be removed or its index or ID

setDisplayOnly

Sets a new value for property displayOnly.

The RatingIndicator in displayOnly mode is not interactive, not editable, not focusable, and not in the tab chain. This setting is used for forms in review mode.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is false.

Param Type DefaultValue Description
bDisplayOnly boolean false

New value for property displayOnly

setEditable

Sets a new value for property editable.

Defines whether the user is allowed to edit the RatingIndicator. If editable is false the control is focusable, and in the tab chain but not interactive.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

Param Type DefaultValue Description
bEditable boolean true

New value for property editable

setEnabled

Sets a new value for property enabled.

Value "true" is required to let the user rate with this control. It is recommended to set this parameter to "false" for the "Small" size which is meant for indicating a value only

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

Param Type DefaultValue Description
bEnabled boolean true

New value for property enabled

setIconHovered

Sets a new value for property iconHovered.

The URI to the icon font icon or image that will be displayed for hovered rating symbols. A star icon will be used if the property is not set

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sIconHovered sap.ui.core.URI

New value for property iconHovered

setIconSelected

Sets a new value for property iconSelected.

The URI to the icon font icon or image that will be displayed for selected rating symbols. A star icon will be used if the property is not set

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sIconSelected sap.ui.core.URI

New value for property iconSelected

setIconSize

Sets a new value for property iconSize.

The Size of the image or icon to be displayed. The default value depends on the theme. Please be sure that the size is corresponding to a full pixel value as some browsers don't support subpixel calculations. Recommended size is 1.375rem (22px) for normal, 1rem (16px) for small, and 2rem (32px) for large icons correspondingly.

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sIconSize sap.ui.core.CSSSize

New value for property iconSize

setIconUnselected

Sets a new value for property iconUnselected.

The URI to the icon font icon or image that will be displayed for all unselected rating symbols. A star icon will be used if the property is not set

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sIconUnselected sap.ui.core.URI

New value for property iconUnselected

setMaxValue

Sets a new value for property maxValue.

The number of displayed rating symbols

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 5.

Param Type DefaultValue Description
iMaxValue int 5

New value for property maxValue

setValue

Sets the rating value. The method is automatically checking whether the value is in the valid range of 0-maxValue and if it is a valid number. Calling the setter with null or undefined will reset the value to it's default.

Param Type DefaultValue Description
fValue float

The rating value to be set.

setVisualMode

Sets a new value for property visualMode.

Defines how float values are visualized: Full, Half (see enumeration RatingIndicatorVisualMode)

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Half.

Param Type DefaultValue Description
sVisualMode sap.m.RatingIndicatorVisualMode Half

New value for property visualMode

unbindValue

Unbinds property value from model data.