RadFeedback: Getting Started

RadFeedback is exclusively used programmatically. The simplest approach for exposing the functionality to your users is putting a Send feedback button on your page and invoking the RadFeedback procedure in its tap handler. To do so, you first need to require the component:

Example 1: Importing RadFeedback's types into your .ts file

import {RadFeedback} from "nativescript-telerik-ui-pro/feedback";
var feedback_1 = require("nativescript-telerik-ui-pro/feedback");

Next, you need to provide the backend data needed to communicate with the Progress services where the feedback items are stored. This is done by using the init() method as shown below:

Example 2: Initializing RadFeedback with your backend data

RadFeedback.init("1234", "1234", "1234");
feedback_1.RadFeedback.init("1234", "1234", "1234");

The init() method requires the following arguments:

  • apiKey - application key, used to identify the Telerik Platform account which will be used to store the Feedback data
  • serviceUri - service URI the address of the backend service providing the database infrastructure for the RadFeedback component
  • uid - a unique identifier used to mark the feedback items sent from a given device. This identifier may be unique information about the currently logged user or the ID of the device. This identifier is extremely important as it is used to make feedback data sent by a particular user accessible only by them.

The init() method is a static method. You don't need to instantiate RadFeedback to call it.

RadFeedback: The Submit Feedback Routine

After initialization, RadFeedback is started by using the static show() method:

Example 3: Invoking RadFeedback using the show() method

RadFeedback.show();
feedback_1.RadFeedback.show();

Calling show() presents the following dialog to the end-user:

Figure 1: RadFeedback's initial dialog shown on Android (on the left) and iOS (on the right)

RadFeedback: Main dialog on Android RadFeedback: Main dialog on iOS

The following three menu choices are available:

  • Send Feedback - used to submit a new feedback item to the backend
  • Your Feedback - used to present the currently submitted feedback items from the device
  • Settings - used to adjust the behavior of RadFeedback

Sending Feedback

The Send feedback option triggers the wizard which helps the user send feedback about a screen from the mobile app. It makes a screenshot of the active screen of the application and prepares it for annotating:

Figure 2: Putting feedback annotations on the screen as done on Android (on the left) and iOS (on the right)

RadFeedback: Annotating a screenshot on Android RadFeedback: Annotating a screenshot on iOS

For each annotation put on the screenshot a comment can be added. The comment can be edited by tapping on the corresponding annotation.

For each annotation a separate screenshot is saved in the backend. For example, if the user puts 5 annotations on the screenshot five instances of it will be sent to the backend with each of them having the corresponding comment and annotation assigned.

Once annotating and commenting is finished, tapping on the button right next to the comment editor sends the data to the backend.

Browsing the Feedback Items

The Your feedback option on the main dialog allows the users to browse the already submitted feedback items. The Your feedback option opens the following screen on Android and iOS:

Figure 3: Browsing the existing feedback items on Android (on the left) and iOS (on the right)

RadFeedback: Annotating a screenshot on Android RadFeedback: Annotating a screenshot on iOS

References

Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.