Rating Prompt

Rating Prompt

Asset Version: 1.0.1
  • Version 1.0.1
  • Version 1.0.0
Last Published: May 4, 2018 By: Kony Team
1246 0 0 109
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.

App Preview Code

  • EPICZ
 

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

Prerequisites

  • Kony Visualizer v8

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 V8

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. On the File menu, point to Import, and click Component. 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. The Import Marketplace Item dialog appears.
    ratingprompt_import.png
  4. In the Library Name box, type a name if you want to create a new library. Otherwise, you can select the existing library name.
  5. In the Collection Name box, type a name if you want to create a new collection. Otherwise, you can select the existing collection name.
  6. In the Component Name box, the com.konymp.ratingprompt name is displayed by default. If you want, you can rename it.

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. On the My Libraries tab, select the defined Marketplace library from the drop-down list in which the component exists.
    library.png
  3. From the Collections sub-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 Rating Screen and Thankyou properties.

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

  1. In the Project Explorer, on the Projects tab, click Controllers section to access the respective formController. Create a method and implement the code snippet similar to the sample code mentioned below.
/* creating a component's Object */
var ratingprompt = new com.konymp.ratingprompt(
{
	"clipBounds": true,
	"height": "100%",
	"id": "ratingprompt",
	"isVisible": true,
	"layoutType": kony.flex.FREE_FORM,
	"left": "0dp",
	"masterType": constants.MASTER_TYPE_USERWIDGET,
	"skin": "CopyslFbox0h8b3c06398d849",
	"top": "0dp",
	"width": "100%"
}, {}, {});

/* Setting the component's properties */
ratingprompt.thankyouMessage = "Some text related to Thank You page with short description";
ratingprompt.rateMessage = "If you enjoy using the app, would you mind taking a moment to rate it? Thanks for your support!";
ratingprompt.rateTitle = "Please Rate our App";
ratingprompt.isFeedbackEnabled = true;

/*Adding the Rating Prompt component to a Form*/
this.view.add(ratingprompt);       

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

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.

Rating Screen

Logo Image
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.componentID.logoImageSrc = "logo.png";
Selected Rating Image
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.componentID.selectedRatingImageSrc = "activestar.png";
Unselected Rating Image
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.componentID.unselectedRatingImageSrc = "inactivestar.png";
Rating Prompt Message
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 100. You must handle the exceptions if you provide an invalid value.
Example:
this.view.componentID.rateMessage = "If you enjoy using the app, would you mind taking a moment to rate it? Thanks for your support!";
Rating Prompt Title
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 35. You must handle the exceptions if you provide an invalid value.

Example:
this.view.componentID.rateTitle = "Please Rate our App";
Dismiss Text
Description: Specifies the text to be displayed on the Dismiss button.
Syntax: dismissText
Type: String
Read/Write: Read + Write
Example:
this.view.componentID.dismissText= "DISMISS";
Submit Text
Description: Specifies the text to be displayed on the Submit button.
Syntax: submitText
Type: String
Read/Write: Read + Write
Example:
this.view.componentID.submitText= "SUBMIT";
Enable Feedback
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.componentID.isFeedbackEnabled = true;

Thank you Screen

Thankyou Image
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.componentID.thankyouImageSrc= "thankyou.png";
Thankyou Message
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 100. You must handle the exceptions if you provide an invalid value.
Example:
this.view.componentID.thankyouMessage = "Some text related to Thank You page with short description";
OK Text
Description: Specifies the text to be displayed on the OK button.
Syntax: okText
Type: String
Read/Write: Read + Write
Remarks
  • The text changes do not reflect on the Visualizer canvas as the default visibility is set to False.
Example:
this.view.componentID.okText= "OK";

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.
 
Remarks
  • You need to invoke the Rating Prompt and enable the feedbackPopup before calling the API
  • You need to take care of the text validation.
Example
this.view.componentID.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
this.view.componentID.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
this.view.componentID.invokeRatingPrompt();