WebApp: The Feedback plugin

September 19, 2012 by Ivo Timmermans   Comments (0)

, , , , ,

Since a few weeks, there is a plugin that adds a "Feedback?" button at the top of the WebApp user interface. This button helps us, Zarafa, to understand the needs of our users. In this blog post, we will show what happens when you click it.


About two months ago, we upgraded our installation of Jira to version 5.1. This release comes with the concept of "issue collectors". This is a piece of javascript that you can insert in e.g. a web page to allow users of this page to give feedback. Every time someone clicks this button, a new window is shown where he can fill in some fields. When he submits the information, a new issue is created in Jira.

All issues created this way end up in a separate project for collecting user feedback. The newly created issues in this project are monitored by a few people from the QA department of Zarafa. They will verify the issue, create bugs or feature requests in the WebApp project out of it, and give feedback to the creator if he filled in contact details. From this point on, any of these issues get the same treatment as issues created in any other way.

As of today, we have received feedback this way about 15 times. All of these issues contain very useful insight in how people work and how WebApp is working for them. Most of these describe already known bugs or feature requests, but some of them are actually new, so it's actually already helping to improve WebApp right now.

image

Technical
Behind the scenes, a Jira issue collector is just a small piece of Javascript and HTML to be included in WebApp. Most of the functionality is provided by Jira anyway.

The only complexity comes from the lazy population of Ext JS; the issue collector needs a pre-existing HTML element to work with. We create that using regular Ext JS calls as soon as the plugin is loaded:

var feedbackButton = {
id: 'feedback-button',
tag: 'div',
style: 'display: none;'
};
Ext.DomHelper.append(Ext.getBody(), feedbackButton);
Then, together with the rest of the code, the only thing that we need to do is paste in the code provided by Jira to load and initialize the feedback window and use the existing insertion point "main.maintabbar.right". The only missing link is then simulating a click on the hidden HTML element created earlier when the user clicks on the "Feedback?" button in the tab bar:
clickFeedback: function() {
Ext.get('feedback-button').dom.click();
}
The Javascript code from Jira then does the rest.

The full source code of the feedback plugin is available from the WebApp source distribution, in the folder plugins/feedback. It's documented to help you understand what happens.

Links: