Blogs

Given the nature of our business, we believe strongly in dogfooding our own software at Telerik. Not only does it allows us to build better products, it allows us to experience how customers interact with our technology on a day-to-day basis. In this blog post, I wanted to show you how the TeamPulse development team was able to successfully leverage Kendo UI Web and Kendo UI DataViz to build new capabilities for its latest releases. If you wish to "follow along at home", please feel free to check out the online demo of TeamPulse xView™:

A Quick Introduction to TeamPulse

TeamPulse is project management software based on Agile best practices. It features many capabilities to support team members on a project, including iteration tracking, requirements gathering, feedback capturing, and much more. Earlier this year, the team released TeamPulse xView, a cross-project dashboard extension for TeamPulse:

When considering extensions for TeamPulse, the development team wanted to address the concerns of customers who wanted to use TeamPulse on mobile devices. At the time when planning was occuring for xView, the TeamPulse team had targeted Silverlight as its runtime environment for its front-end interface. Going forward, they wanted to take a bet on HTML5 because of its strengths for a broad delivery model. Also, the team knew about the work being done by our team and wanted to take a dependency on Kendo UI. The end result was a product that exceeded everyone's expectations:

Fortunately for the TeamPulse team, the controls were more then up to the task. After only a few days, our developers were commenting on just how easy the controls were to use. As with any product that's early in it's development cycle, we discovered a few minor issues with the controls. But as is expected with Telerik, their support was first class. We were provided with internal builds that address our issues, usually within a day or two.

The xView features were rolled out in February 2012. The entire development was completed in less than 10 weeks and consumed less than ½ of our development effort over that time, making this one of our most cost effective new feature sets. The feature has been very well received by our user community and we're planning on adding new features in the upcoming months, all built with the Kendo controls and making use of some of the new features in their latest March 2012 release.

Let's explore how the TeamPulse team was able to target Kendo UI for its front-end user experience...

TeamPulse xView - My Perspective View

My Perspective view is ideal for tracking your own work across all the projects you are on:

My Perspective View

This view uses a couple of DropDownList widgets to filter the PanelBar by project and its assigned work. The PanelBar contains a TreeView that is used to display each work item and allows users to enter data through a Window that's triggerred through mouse or touch input:

My Perspective - Edit Window

The My Perspective view provides a good example of how to integrate Kendo UI widgets and framework abstractions into your designs. As you can see, they are complementary to the overall user experience.

TeamPulse xView - Project Status View

The Project Status screen is a real-time heat map that gives users a complete view into the progress and health of all their projects:

Project Status View

This view is one of my favorites because it uses many aspects of the Kendo UI Framework as well as a number of widgets from Kendo UI Web and Kendo UI DataViz. These include:

• kendo APIs: used for toString and parseDate utility functions
• kendo.culture: used to display localized strings
• kendo.format: used to formatted dates and strings
• kendo.ui.progress: used to display an animated GIF to inform the user that the view is fetching remote data
• DataSource: used to retrieve remote JSON-formatted data from TeamPulse backend
• Grid: used to display the list of projects or iterations
• Templates: used in the Grid for each item

Here, the TeamPulse development team did something really clever: they uses the Chart widget to generate sparkline-like burn down charts:

Burn Down Sparklines (featuring the Chart widget of Kendo UI DataViz)

A burn down chart is used to show the amount of outstanding work over time.

The reason why I like this use of the Chart widget here is because of its effective use of the space; it provides users with a quick, at-a-glance estimate of when all of the work will be complete. In fact, creating them turns out to be fairly simple. The trick is to constrict the dimensions of the Chart through CSS rules on the containing element:

.burndown-wrap {
    height: 50px;
    width: 100px;
    ...
}

In this example, the class, burndown-wrap is applied to a containing td element that contains the Chart. When the Chart is created, the surrounding dimensions are applied to the SVG that ultimately generated.

Each row of the Grid may be expanded to reveal a detail template:

Project Status View (Expanded)

This expanded view provides the user with more information retailing to the project or iteration, including blocking bugs, late items, and unplanned stories. This information is displayed within seperate Grid widgets and are contained inside TabStrip. It's worth noting that each Grid employs a row template:

Project Details (featuring the TabStrip widget of Kendo UI Web)

Also, a larger version of the burn down chart is provided, along with a DropDownList that can be used to pivot on this data:

Burndown Chart (featuring the DropDownList widget of Kendo UI Web and the Chart widget of Kendo UI DataViz)

Because this is a Chart widget, mouse and touch interactions are supported. When the user hovers over a particular data point, notice how the Chart displays its value. This level of interactivity provides better useability for users when they wish to obtain more information about the data visualization being shown.

TeamPulse xView - People Status View

The People Status view shows the progress, activity and workload of individual team members across all the projects they are working on. As is with the Project Status view (above), the People Status view includes a sparkline-like chart that shows a quick, at-a-glance view of the work completed by an individual over the past seven (7) days:

People Status View

This sparkline-like chart is a custom control that was built by the TeamPulse development team:

Sparkline-like Chart

Who says you need Kendo UI for everything? ;)

For reference, the bars with a light blue background indicate weekend days and the bars with a light red background indicates days with no work completed. What's more, when you interact with this chart, you can get a quick snapshot of the completed work for the day.

TeamPulse Time Tracking

The R3 2012 release of TeamPulse includes new functionality in the form of TeamPulse Time Tracking, which provides a time management capability to project members. Specifically, TeamPulse Time Tracking provides two views for team members to track time:

• Time Entries View
• Timesheet View

The Time Entries view displays all individual time entries made by team members across all your projects:

TeamPulse Time Tracking - Time Entries View

The Time Entries view features two Calendar widgets associated with a Grid to display a list of time entries made by a team member.

The Timesheet view uses a number of controls from Kendo UI Web. Its purpose is to display all of the work items for a given period of time plus the time spent on each one task per day:

TeamPulse Time Tracking - Timesheet View

The Timesheet view features a TreeView that contains a number of entries for particular projects or iterations. For each entry, a combination of templates and widgets are used to render out a entry form that's intuitive for end users.

Well, there you have it. As we've seen, the TeamPulse development team has been incredibly successful integrating Kendo UI into products like xView and the new Time Tracking capability that was introduced in the R3 2012 release. I hope this blog post helps inspire you to build amazing sites and applications with Kendo UI. If you've built something already, we'd love to see it. Drop us a line and let us know where we can see your Next Big Thing.

Edit (Friday, June 15, 2012): Updated the text for the People Status view to reflect its use of a custom control.

About the Author
John Bristowe (@JohnBristowe) is a Developer Evangelist with Telerik and is based out of Melbourne, Australia. John enjoys all the meats of our technology stew, hacking on everything from angle brackets to .NET. John's passion lies in modern web standards like HTML5 and CSS3. His website is bristowe.com.