Loading...

Rating Field

Properties API Related

Widget Type:
Form Widgets
TPC Version:
  • 4.0
ratingfieldlogos
The Rating Field is a widget that allows the user to choose from a number of icons that represent numbers, usually to rate a product or service.

You can customize the appearance of the icons. You can also divide the stars into fractions. Please note that this widget only works with numeric fields.

5FLNILyeefAAAAAElFTkSuQmCC

Configuration

Basic

Make sure you have a CRM Form Configuration and a TPC Form Layout already attached and configured or else you won't see any fields for the widget.

Drag and drop the Rating Field from the Portal Connector tools into the body of your form and click edit to display the properties prompt.

The Title will allow you to set the label for the control. By default it is set to the whichever attribute you choose but it can be freely modified.
The Attribute dropdown list allows you to select an attribute for the widget to submit data to. The rating field will be populated by the options associated with the attribute.

The Star Count will determine how many icons are available for a user to click on. It is set to five by default.

The Selection Mode determines how a user may select stars. By default, you can only select whole stars at a time. Available options include: Item, Exact, Half, and Custom. The Custom option will enable you to divide the stars however you'd like, down to one percent.

The Read Only will not allow a user to interact with the widget when checked.

You can customize the appearance of the icons by using the Model property located in the widgets' Advanced Properties. You can use any font-awesome icon in place of the default star icon. For more information on font-awesome logos, please go here.
rating-instructions-1

Widget Properties

Basic Properties

Title

The Title text box will allow you to set the label of your widget. The title will usually appear above the associated widget.

Attribute

The Attribute drop down list will allow you to change the data field that this widget will save the user’s input to (For example, a CRM Text Field with an Attribute of Account Name will save its input to the Account Name data field).

Star Count

The Star Count property represents the number of stars to be displayed on the widget. One full star represents a value of one.

Selection Mode

This setting allows for fractional rating, four options are available:

Item – Undivided stars, you will only be allowed to select whole stars. Each star represents a whole number. Example 4 our of 5.

Half – Each star is divided into two. For example, this would allow 1.5 or 3.5 star rating.

Exact – Each star is divided into a hundred segments. The precision is down to a pixel. 

Custom – Allows for a Custom Precision. A star can be divided into as many as a hundred segments.

Read Only

The Read Only checkbox will not allow the user to interact with the widget when checked.

Tool Tip

The Tool Tip allows you to add a description or Hint to your widget.

ToolTipPosition

This property determines the position of the tool tip. By default this property is set to "Auto". You can change this to Left , Right , Top , Bottom. 

StarStyleClass

The StarStyleClass advanced property determines the appearance of a rating widgets' icons by CSS class. These icons are font awesome icons and more information on them can be found here. By default, this is set to 'fa fa-star'.

StarHoverColour

The StarHoverColour advanced property determines the colour of a rating field icon when a user hovers their mouse over the icon. By default it is set to 'rgba(250,180,0,0.3)'.

StarFontSize

The StarFontSize advanced property determines the size of a rating widgets' icons. By default it is set to '10'.

StarBlankColour

The Star Blank Colour advanced property determines the colour of an icon that is not selected. By default this is set to '#ccc'.

StarHoverShadowStyle

The StarHoverShadowStyle advanced property determines the shadow style for the icons to adhere to. By default this is set to '2px 2px 20px rgba(250, 180, 0, 0.5)'.

StarSelectedColour

The StarSelectedColour advanced property determines the colour of a selected icon. By default this is set to '#fab400'.

ZeroIsNull

The ZeroIsNull advanced property determines if 'null' should be submitted in the event that no icons are chosen. Otherwise, it will submit zero. By default, this is set to false.

LabelPosition

The LabelPosition advanced property specifies where the label of a widget will appear. By default, the label will appear on top of the widget. Applicable options include: Top and left. The content of the label is controlled by the Title property. The default value for this is 'Top'.

Custom Precision

If Custom Precision mode is selected this property is used to divide each star to the defined value. For example, using a value of 4 would divide each star into quarters.

Advanced Properties

Advanced properties provide additional functionality. They can be accessed by clicking on the "Advanced" Button in the bottom right corner of the widget designer.

Title

The Title text box will allow you to set the label of your widget. The title will usually appear above the associated widget.

Attribute

The Attribute drop down list will allow you to change the data field that this widget will save the user’s input to (For example, a CRM Text Field with an Attribute of Account Name will save its input to the Account Name data field).

Star Count

The Star Count property represents the number of stars to be displayed on the widget. One full star represents a value of one.

Selection Mode

This setting allows for fractional rating, four options are available:

Item – Undivided stars, you will only be allowed to select whole stars. Each star represents a whole number. Example 4 our of 5.

Half – Each star is divided into two. For example, this would allow 1.5 or 3.5 star rating.

Exact – Each star is divided into a hundred segments. The precision is down to a pixel. 

Custom – Allows for a Custom Precision. A star can be divided into as many as a hundred segments.

Read Only

The Read Only checkbox will not allow the user to interact with the widget when checked.

Tool Tip

The Tool Tip allows you to add a description or Hint to your widget.

ToolTipPosition

This property determines the position of the tool tip. By default this property is set to "Auto". You can change this to Left , Right , Top , Bottom. 

StarStyleClass

The StarStyleClass advanced property determines the appearance of a rating widgets' icons by CSS class. These icons are font awesome icons and more information on them can be found here. By default, this is set to 'fa fa-star'.

StarHoverColour

The StarHoverColour advanced property determines the colour of a rating field icon when a user hovers their mouse over the icon. By default it is set to 'rgba(250,180,0,0.3)'.

StarFontSize

The StarFontSize advanced property determines the size of a rating widgets' icons. By default it is set to '10'.

StarBlankColour

The Star Blank Colour advanced property determines the colour of an icon that is not selected. By default this is set to '#ccc'.

StarHoverShadowStyle

The StarHoverShadowStyle advanced property determines the shadow style for the icons to adhere to. By default this is set to '2px 2px 20px rgba(250, 180, 0, 0.5)'.

StarSelectedColour

The StarSelectedColour advanced property determines the colour of a selected icon. By default this is set to '#fab400'.

ZeroIsNull

The ZeroIsNull advanced property determines if 'null' should be submitted in the event that no icons are chosen. Otherwise, it will submit zero. By default, this is set to false.

LabelPosition

The LabelPosition advanced property specifies where the label of a widget will appear. By default, the label will appear on top of the widget. Applicable options include: Top and left. The content of the label is controlled by the Title property. The default value for this is 'Top'.

Custom Precision

If Custom Precision mode is selected this property is used to divide each star to the defined value. For example, using a value of 4 would divide each star into quarters.

API

clear()

Clears the value of the widget.

Returns

None

get_type()

Returns the widget type.

Returns

string

disable()

Disables the widget on the page.

Returns

None

get_displayInput()

Returns the Boolean display associated with the widget.

Returns

JQuery Object

get_value()

Returns the file name of a selected file.

Returns

String

enable()

Enables the widget on the page.

Returns

None

get_input()

Returns the input element of the widget.

Returns

JQuery Object

get_container()

Returns the container element of the widget.

Returns

​JQuery Object

hide()

Hides the widget from the form.

Returns

None

show()

Shows the widget on the form.

Returns

None

set_value()

Sets the value of the widget.

Returns

None

get_rating()

Returns the element associated with the widget rating icons.

Returns

​JQuery Object

get_model()

Returns the model object associated with the widget, along with its properties.
In the case of the Rating Field widget, these properties and their types are returned:

  • InputMode: Integer
  • Precision: Integer
  • ReadOnly: Boolean
  • StarBlankColour: String
  • StarCount: Integer
  • StarFontSize: String
  • StarHoverColour: String
  • StarHoverShadowStyle: String
  • StarSelectedColour: String
  • StarStyleClass: String
  • ZeroIsNull: Boolean

Returns

Object

toggle()

Toggles the visibility of the widget.

Returns

None

readonly()

 Sets the widget state to read only.

Returns

None

Full API With Examples

Examples of Rating Field Configuration