Join 34,000+ subscribers and receive articles from our blog about software quality, testing, QA and security.

Need help with UI script to add new tab next to Dashboard


I’m not sure if this is possible using the custom UI scripts, but I need to organize categories in the main TestRail dashboard screen where the “Dashboard” tab sits at the top of the screen. If I could add certain categories that could link to a new level.


Tabs: Server | Mobile | Android | iOS

and clicking each of these would show a new dashboard or a set of projects only visible for the category.

Thank you.


alright, I figured it out.

[code]name: Android Tab
description: Show Android Tab
author: Kevin
version: 1.0
includes: ^dashboard

function() {
var element=document.getElementById(‘mainMenu’).value;

        var elements = document.getElementById('mainMenu').getElementsByTagName('ul');
        var container = elements[0];
        var new_element = document.createElement('li');
        var new_tab = document.createElement("a");
        new_tab.innerHTML = "Android"
        container.insertBefore(new_element, container.getElementsByTagName('li')[0]);
        new_tab.setAttribute("tabindex", "0");
        new_tab.setAttribute("href", "index.php?/android");


div.some-class {

But another question which might be impossible: Can I structure the hierarchy so that my projects are in different folders? i.e. all my android related testing projects are under the index.php?/android

would this require creating these pages separately entirely?



Thanks for your posting. Good to hear that you already got it working. Please note that you can also use jQuery in the UI scripts, which would make it a bit simpler to add new tabs:

(this is for the project menu, but this would work similar for the dashboard)

Regarding the project folders: Do you mean folders on the dashboard? This is currently not supported (but already on our feature request list). For many projects, we usually recommend using the small view (can be toggled via the icons in the toolbar of the dashboard) and maybe prefixing your projects such as:

  • Android Project 1
  • Android Project 2
  • Android Project 3
  • iOS Project 1
  • iOS Project 2

You can also display the projects on different tabs (added to the UI via your UI scripts) which could also be implemented with a single page (or “controller”), e.g.:


You would need to write a generic controller (custom/dashboard) which expects the platform as argument and then displays the projects for this platform. Examples for custom controllers can also be found on the following page:

You could then add new tabs for your projects with the following link Urls:


Just let me know in case you have any questions.



Thanks for the info on the jquery scripts.

What i mean is, within the Android overview/project, I want to have sub classes. I’ve currently set up tabs within the Android project to have a sub-project such as Android Client Project 1. However, I’ve set that up to simply go to ANOTHER project page which seems redundant and it shows in the main dashboard.

  1. It would be nice to modify/remove some of the projects in the main dashboard listing (even in the small view).

  2. i’m interested in this custom report/controller, but am having trouble understanding it. Would I need to put the php files within my testrail server? I like the idea of the platform=android report



Thanks for the update.

  1. You can set finished projects to completed to remove no longer projects from the dashboard overview (only the first 10 completed projects on displayed by default). You can set a project to completed when you edit a project (“This project is completed” checkbox).

  2. Yes, you would need to install the PHP files on your server (in your TestRail installation directory as mentioned in the article). You can use the custom report as a starting point, but some experience with PHP and web development is required. We are happy to help in case you have any questions, of course.