Star Rating

This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0

This element allows the user to give his/her feedback in the form of stars (For example: -one star, two stars, etc.). When the rating is given, the selected stars should be highlighted in different colors.

Usage

When to use
Use when a frequent user’s feedback is required.Show evaluation.A quick rating operation on something.

Star Rating Configuration

The “Star Rating” element consists of the following properties:

  • UI Configuration
  • Event Configuration

UI Configuration

For the “Star Rating” element, you can configure the following UI properties:

TabProperty NameDescriptionMandatoryNew Default ValueVisibility Rules
BasicReference NameSpecifies a unique name of the element. At the application level, an element is identified and managed by the reference name.YesStarRating 1
BasicCaptionSpecifies the title of the element.NoStar Rating
BasicRating ValueThis property allows you to configure the value of the rating.

Sample Rating Value
static(‘3.0′,’double’)
Nostatic(“3.0″,”double”)
BasicTotal Star CountThis property allows you to configure the total number of the stars that the application displays to capture the user’s rating.No5
BasicDefault ValueThis property allows you to define the default value of an element.

To define the default value:
–> Click in this box, and it displays the list of the pre-define functions, attributes, and element IDs.
–> In the list, select an attribute from which the application will fetch the default value and then display it in the element.
BasicStar SizeIn this box, enter the size (For example: – 24) of the star that the application will display to the user.No20
BasicRead OnlyThis property is configured to make the values of rating only readable. It provides the following options:
Yes: – Selecting this value means that the user cannot select the stars to give the rating

No: – Selecting this value means that the user can select the stars to give the rating.
Nomarked
BasicVisibleAllows you to define the default visibility of the UI element. Nomarked
BasicBusiness RuleClick this list and then select a pre-defined business rule that will determine the element’s visibility. If the user’s action satisfies the condition in the business rule, the application will display or hide the element.

To define the business rule, access the Business Rule Manager module.
No
BasicEnableAllows the user to enable/disable an element. You can decide whether the element needs to be clickable and usable.Nomarked
BasicBusiness RuleClick this list and then select a business rule to make the element active or inactive. If the user’s action satisfies the condition in the business rule, the application will make the element active or inactive in the application.

To define the business rule, access the Business Rule Manager module.
No
BasicMandatoryAllows you to configure the element as a mandatory element.Nounmarked
BasicHalf RatingThis property allows the user to select half of the stars when the user gives the rating. It provides the following options:

Yes: – Selecting this value means that the user can select half of the stars to give the rating.

No: – Selecting this value means that the app will not allow the user to select half of the total stars to give the rating.
Nomarked
BasicMessage on FailureThis property becomes visible when you select Yes under Mandatory. In the Message on Failure box, enter the error message that the application will display if the user does not perform the function on the element. NoRequiredwhen mandatory = checked
UI PropertiesStylesAllows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element. These pre-defined styles are:
–> Primary
–> Warning
–> Success
–> Danger
–> Info
–> Secondary
NoPrimary
UI Properties- Alignment & SpacingMarginAllows you to desirably define margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom border of the element.NoTheme Variable (Margin)
UI Properties- Alignment & SpacingElement’s AlignmentThis property contains three tabs. You can use these tabs as follows:
1. Left:- By default, this tab is selected. It aligns the element to the left of the page.
2. Center:- If you select this tab, it aligns the element at the center of the page.
3. Right:- If you select this tab, it aligns the element to the right of the page.
NoLeft
UI Properties-CaptionFontSelect the font type (For example: – Arial) of the element’s caption.NoTheme Variable (Font Family)
UI Properties-CaptionSizeEnter the font size of the caption.No12
UI Properties-CaptionColorSelect the color of the font of the caption.NoTheme Variable (Caption)
UI Properties-CaptionBoldEnter the thickness of the character of the element’s caption in the range of values from 1 to 9.No4
UI Properties-CaptionStyleSelect the style of font (For example:- Italic) of the captionNoNormal
UI Properties- Shape & DecorationTypeUnder the Shape and Decoration section, this property has the two following options:

Autofill:- If you select this option, the element will occupy the available space of the parent layout.

Manual:- If you select this option, you can define a specific size of the element.
UI Properties- Shape & DecorationXAllows you to move the element along the X-axis; when the value increases, the element moves from left to right.NoShow & Disable
UI Properties- Shape & DecorationYAllows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.NoShow & Disable
UI Properties- Shape & DecorationBorder ColorClick the Color box and then define the color of the border of the star shape.NoTheme Variable (Primary)
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.Yes100%
UI Properties- Shape & DecorationSelect ColorClick the Color box and then define the color of the star shape.NoTheme Variable (Primary)
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.Yes100%
DataEntity PathThis property allows you to map an attribute to the element. You define the JSON based attributes in the entity in the Data Modeler module.

To define the entity path:
–> Click in the Entity Path box, and a list expands.
–> The list displays several attributes from the entity.
–> In the list, select an attribute to map it to the element.

After the user performs the function on the element, the application can perform the following functions:
a. Fetches data from the attribute and then displays it in the element.
b. Stores data in the attribute.
NoEntity Name = “entity”

Event Configuration

On the “Star Rating” element, you can configure the following event:

  • onClick
Was this article helpful?
YesNo