Rating Prompt

Rating Prompt

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Apr 11, 2017 By: Kony Team
54 2 0 10
Customer feedback is always important, and many apps use a rating prompt to influence users to provide public and private app store feedback. This component provides a quick jump start for creating a standard feedback and rating prompt.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms

Features

  • Prompts customers to provide feedback
  • Facilitates customers to provide feedback by giving ratings and a message
  • Displays “Thank you” message after receiving the feedback
  • Opportunity to improve customer experience based on received feedback

Platforms Supported

  • Android Phone Native
  • iPhone Native

Prerequisites

  • Kony Account
  • Kony Visualizer Enterprise
  • A Kony Reference Architecture app created in Kony Visualizer

Rating Prompt component is a custom widget, enables you to display a prompt that allow users to provide their feedback in the form of ratings and messages. The Rating Prompt component contains following sections:

  • Rating: Contains five star icons and a message. Users can provide rating by tapping the star icons.
  • Feedback: Contains a text area where users can provide their reviews. The Feedback section is optional.
  • Thank You: Contains a Thank you message. The Thank You section is displayed when a user provides rating or review.

Here is a use case that describes use of the Rating Prompt component:

Use Case

Consider a case that you are developing a food delivery app, which is used to order food from nearby restaurants. In the app, you can use the Rating Prompt component that allows users to provide feedback about the food quality and delivery service.

The Rating Prompt component is a ready-to-use component. You can import the Rating Prompt component into your app (created in Kony Visualizer), and achieve the features of rating prompt. The Rating Prompt component also facilitates a set of properties and APIs that helps you customize the fields and the functionality.

The following sections help you to use the Rating Prompt component in your app.

Prerequisites

Before you start using the Rating Prompt component, ensure you have the following:

  1. Kony account
  2. Kony Visualizer Enterprise 7.3
  3. A Kony Reference Architecture app in Visualizer. You can create a Kony Reference Architecture app in Visualizer using the following procedure:
    1. Open Kony Visualizer.
    2. On the File Menu, click New Project. The New Project dialog appears.
    3. In the Project Name box, type a name for your project.
    4. Select Kony Reference Architecture, and click Create.

Importing the Rating Prompt Component

Before you start importing the component to Kony Visualizer, you must download the component from the Kony Marketplace website. You can import the Marketplace components only into the apps that are of the Kony Reference Architecture type.

To import the Rating Prompt component, do the following:

  1. Open your app project in Kony Visualizer.
  2. In the Project Explorer, click the context menu arrow of KonyLibrary, and then click Import Library. The Open dialog appears.
  3. Navigate to the location where you downloaded the component (zip file) on your computer, select the component, and click Open. In the Collections library, you can see a new component added.

When you import a component, the component is imported to Visualizer's workspace, but not directly into your app. Thus, after you import a component, you must add the component to your app.

Adding a Rating Prompt Component into your App

You can add a Rating Prompt Component to FlexForm, FlexContainer, and FlexScrollContainer widgets.

To add a Rating Prompt Component:

  1. Open your app, and then open the form to which you want to add the component.
  2. From the Collections tab, drag the component onto the form on the Visualizer canvas. The component is added to the form. You can also see a new element, com.konymp.ratingprompt in the Components section on the Templates tab.

After adding a component to a form, you can configure the component the way you want it using the Look, Skin, and Action tabs on the Properties pane. Configuring the properties on the Properties pane is similar to configuring the properties of any widget in Kony Visualizer. For more information, refer Button Widget.

You can also see that a new tab, Component, is added on the Properties pane. The Component tab contains assorted properties relevant to the component that allow you to customize the component as required. The properties on the Component tab are categorized as Pass Through and Custom properties. The Pass Through properties are the default properties of individual widgets in the component. The Custom properties are user-defined properties based on the use case of the component.

Note:

Changes made to the Custom properties are reflected only at the run time, but not at the design time (Visualizer Canvas).

You can also add a Rating Prompt Component dynamically. To do so,

  1. In the Project Explorer, on the Projects tab, click the context menu arrow of Modules, and then click New JS module. A new JavaScript file opens in the Code Editor.
  2. Copy and paste the following code snippet in the JavaScript file:
    /* creating a component's Object */
    var component = new com.konymp.ratingprompt({
    	"id":"ratingPrompt",
      	"top":"0%",
      	"width":"100%",
      	"height":"100%",
      	"left":"0%"
    	},{},{});
          component.selectImageSrc="activestar.png";
          component.unselectImageSrc="inactivestar.png";
          component.logoImageSrc ="logo.png";
          component.thankyouImageSrc="thankyou.png";
          component.isFeedbackPopupEnabled=true;
          component.rateMessage=" ";
          component.thankyouMessage=””;
          this.view.add(component);       
    /* Calling APIs from code */
          var textEntered= this.view.component.getFeedbackText();
          var rating = this.view.component.getRatingValue(); 

    In the code snippet, you can edit the properties of the component as per your requirement. For more information, see Properties.

  3. Save the file.

Setting Properties

The properties provided on the Component tab allow you to customize the UI elements and set constraints for the fields in the Rating Prompt component. You can set the properties directly on the Component tab or by writing a JavaScript. This section provides information on how to set the properties by writing a JavaScript.

Enable Feedback
Category: Custom
Description: Controls whether or not to enable the feedback pop-up.
Syntax: isFeedbackEnabled
Type: Boolean
Read/Write: Read + Write
Remarks The default value of the property is true
Example:
this.view.Component_Name.isFeedbackEnabled = true;
Logo Image
Category: Pass Through
Description: Specifies the name of the image to be set as the logo for the Rating Prompt.
Syntax: logoImageSrc
Type: String
Read/Write: Read + Write
Remarks Before setting the property, do the following:
  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.Component_Name.logoImageSrc = "logo.png";
Rate Prompt Message
Category: Pass Through
Description: Specifies the message to be displayed in the rating section of the Rating Prompt.
Syntax: rateMessage
Type: String
Read/Write: Read + Write
Remarks The maximum characters limit is 110
Example:
this.view.Component_Name.rateMessage = "If you enjoy using the app, would you mind taking a moment to rate it? Thanks for your support!";
Rate Prompt Title
Category: Pass Through
Description: Specifies the title to be displayed in the rating section of the Rating Prompt.
Syntax: rateTitle
Type: String
Read/Write: Read + Write
Remarks The maximum characters limit is 110
Example:
this.view.Component_Name.rateTitle = "Please Rate our App";
Selected Rating Image
Category: Pass Through
Description: Specifies the file name of the image to be displayed as the selected star icon.
Syntax: selectedRatingImageSrc
Type: String
Read/Write: Read + Write
Remarks Before setting the property, do the following:
  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.Component_Name.selectedRatingImageSrc = "activestar.png";
Thankyou Image
Category: Pass Through
Description: Specifies the file name of the image to be set as Thank You image.
Syntax: thankyouImageSrc
Type: String
Read/Write: Read + Write
Remarks Before setting the property, do the following:
  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.Component_Name.logoImageSrc = "thankyou.png";
Thankyou Message
Category: Custom
Description: Specifies the message to be displayed in the Thank You section.
Syntax: thankyouMessage
Type: String
Read/Write: Read + Write
Remarks The maximum characters limit is 110
Example:
this.view.Component_Name.thankyouMessage = "Some text related to Thank You page with short description";
Unselected Rating Image
Category: Pass Through
Description: Specifies the file name of the image to be displayed as the unselected star icon.
Syntax: unselectedRatingImageSrc
Type: String
Read/Write: Read + Write
Remarks Before setting the property, do the following:
  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.Component_Name.unselectedRatingImageSrc = "inactivestar.png";

Defining Events

You can define events to be executed when an action is performed. You can configure the events directly on the Actions tab or by writing a JavaScript. To configure the events on the Action tab, click Edit against each event. For more information, refer Add Actions.

onCompletion Event
Description: The event is invoked when a user clicks OK in the Thank You section.
Syntax: onCompletion()
onDismiss Event
Description: The event is invoked when a user clicks Dismiss in the rating section.
Syntax: onDismiss()

APIs

The following APIs pertain to the Rating Prompt component:

getFeedbackText

The API returns the text entered by a user in the Feedback section of the Rating Prompt.

Syntax
getFeedbackText()
Parameters

None

Return Value
Text [String]:
Returns the text entered by a user in the Feedback section.
Example
var textEntered= this.view.component.getFeedbackText();
getRatingValue

The API returns the rating provided by a user in the rating section.

Syntax
getRatingValue()
Parameters

None

Return Value
Number:
Returns the number of star icons selected in the rating section.
Example
var rating = this.view.component.getRatingValue();
invokeRatingPrompt

The API invokes the Rating Prompt.

Syntax
invokeRatingPrompt()
Parameters
None
Return Value
None
Remarks

Use the API to enable the Rating Prompt in your app.

Example
var invoke = this.view.componentID.invokeRatingPrompt();