Creating an alternative UI for YouTrack

Customers often ask us whether submitting issues in YouTrack is complicated, in the sense that if it requires many fields to be filled in. Need being of course, that many QA departments don’t want to spend too much time filling out field after field of information to submit a bug.

The answer is of course, no, it’s not complicated at all. In fact, YouTrack is flexible enough that not only can you limit to very few the number of fields required (namely three), but you can also easily create your own user interface to submit defects. And not only that, but you can actually replace the entire UI of YouTrack. All this is made possible because of the powerful HTTP API it has. Let’s see how it’s done.

Embedding a submit issue form on your web site

What we want is this:

image

In order to get there, we need to:

  1. Create the HTML page.
  2. Enable the REST API and Access from external sites.

Creating the HTML Page

The page itself is straightforward, being just a form with three elements. We’re using Twitter Bootstrap to give it somewhat of a nice design (which coincides now with 90% of the Internet). The only interesting thing on the page is two JavaScript functions. One obtains a list of projects from our YouTrack server, and the other creates a new issue.

image

The second function, createIssue which actually creates the issue would be:

image

Only remaining thing would be to load the projects on page load:

image

Although for this example we’re using JavaScript, if you prefer to use some other language such as C#, Ruby, Python, know that there are already libraries available. There’s even a Kotlin one in the works.

Enable REST API and Access from external sites.

To get this to work, we need to enable external access  to the API. For that, when logging in as Administrator in YouTrack, under the Adminsitration, REST API, we can specify whether we want external sites to have access to the API (CORS). For this example, we’re going to allow access from all sites, although we can limit it to specific domains

image

We can now easily embed a form to create issues in any web site. Obviously in this case, we have permissions enabled to let anyone submit issues but that can also be restricted by requiring a valid login beforehand.

You can try the page live from here. Download the source code for this here.

Re-inventing the UI

Submitting issues isn’t the only thing that can be done using the YouTrack API. In fact, we can create a completely new User Interface for listing or displaying issues.

Recognize the screen below? Of course you don’t. It’s an alternative interface written by  Alexey Pegov, as a proof of concept, to demonstrate the full potential of the API.

clip_image002

What’s awesome about this UI, is that it’s nothing more than a façade over our own instance of YouTrack. All it is doing is providing a new look and feel for static data generated from YouTrack.

You can try it live here and explore the source code, experiment and adapt it to your own needs. Just fork it.

Maximum flexibility

If we combine the ability to provide a custom user interface for submitting new issues, with the potential that the Workflow Editor provides us, the possibilities are endless. We can completely automate the process of handling new submissions, such as automatically assigning an defect to a person based on the type of issue, create notifications, send emails (because we all need more emails in our lives) and a whole slew of other actions that can be performed with custom workflows.

And of course, having the ability to perform pretty much any type of operation with YouTrack, via the API provides us with the power to create custom user interfaces for different departments or users of our organization, removing unnecessary noise where it makes sense, and providing more information for only those that need it.

Have a play with it. I can assure you that you’ll be impressed.

9 thoughts on “Creating an alternative UI for YouTrack

  1. Pingback: Dew Drop – September 25, 2012 (#1,408) | Alvin Ashcraft's Morning Dew

  2. Sean

    Thanks for this blog post. I tried following your process and even just using your code, but replacing the YouTrack instance URL with our own, but could not get the load method to return anything. I ensured that I “allowed all origins” just to test, but still nothing. I get a “User not logged in” message

    Is there something else I am missing here or meant to use to authenticate first? I just want to have a simple form that allows users to create an issue item…

    Reply
    1. Hadi Hariri Post author

      Sean, what’s your URL? Is it a hosted one? Normally that’s cause you have the wrong URL. Check you might need /youtrack at the end of it.

      Reply
  3. a2bruteKarl Hansen

    Hadi, I am using a locally hosted 5.0.3 server. Your loadProjects and createIssue methods are looking for a JSON return, but the baseurl/projects/all and baseurl/issue calls return XML. Is this a function of the version of YouTrack? Is it a setting within YouTrack administration?

    Reply
  4. Simon Dingley

    This is great except for the fact that we have projects that are not public but want users to submit tickets without having to provide YouTrack login credentials as it will create a reason for them not to report the issue. The url is valid but the server responds with “Failed to load resource: the server responded with a status of 401 (Unauthorized) “. This is for a hosted instance of YouTrack.

    Reply
    1. andrey tigay

      Hi Simon,

      Andrey from YouTrack is speaking.
      Did you try to enable OpenID integration for your instance? Will it be acceptable variant for you taking into account your use-case?
      To enable OpenID, navigate to Administration-> OpenID integration.

      Thank you.

      Reply
      1. Simon Dingley

        Hi Andrey, are you saying that the example is only possible for public projects? OpenID is already enabled in the install.

        Thanks, Simon

  5. sclarson

    A very late reply to this, but now that there is the ability to archive projects is there a simple way to filter those archived projects out of the list when you call /project/all?

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s