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

Ui scripts: link in a Dialog message


#1

Hi,

I want to show a link in “App.Dialogs.message”.

Is it possible?

Thanks
Giovanni


#2

Hi Giovanni,

Thanks for your posting. App.Dialogs.message expects text so using HTML is not really possible but we are happy to look into this. One option should be to override/set the text yourself after calling App.Dialogs.message and this could look as follows:

App.Dialogs.message('..', 'Title .. ');
$('#messageDialog .dialog-message').html('Your text/HTML ..');

Cheers,
Tobias


#3

It works :slight_smile:

thanks


#4

That’s great to hear, Giovanni :slight_smile:

Cheers,
Tobias


#5

Hi Tobias,

Can you direct me towards some reference or a tutorial where I could do more modifications to the dialog box that pops up after clicking the button? Like instead of App.Dialog.Message, I want to show a list with options in a dialog box where user can select some items and then I can pass/send those via AJAX request (for later processing). An example would be great to have. Thank you in advance.

Pratik


#6

Hi Pratik,

It’s possible to use HTML in the message dialog (via the workaround above) but we would usually advise against heavy customizations via Ajax requests etc. Those complex UI scripts may break with future versions and the more complex UI scripts get the more likely is that they impact TestRail or even break TestRail if your script contains JavaScript errors, for example.

Cheers,
Tobias


#7

Hi Tobias,

Thank you for your response. I will make sure not to make scripts more complex.

Pratik


#8

Thanks, Pratik, sounds good :slight_smile:

Cheers,
Tobias


#9

Hi Tobias, is it possible to use the dialog to gather params (input) to be passed to a jenkins job?


#10

Hi Marcio,

The built-in dialogs are not prepared for this and we would usually recommend triggering automated tests outside of TestRail. This is much more flexible than triggering your tests from TestRail and is the recommended way to trigger tests (e.g. by integrating with your CI or build systems).

Cheers,
Tobias


#11

Tobias,

Is it possible/feasible to gather parameters via a dialog, so we can pass them to the trigger script? I understand that you don’t recommend … TestRail seems to understand the need to trigger execution from TestRail, otherwise you would not have made the UI script customization available.

Thanks,
Márcio


#12

Hello Márcio,

Yes, there are many options to gather additional input via JavaScript. E.g. there are standard JavaScript methods for this such as the “prompt” method, and many other options. We cannot really provide generic JavaScript or programming support as part of the TestRail support, but there are many resources available online on JavaScript programming in general.

I hope this helps!


#13

Hi Dennis,

Usually javascript code comes paired with a css and html portion.
The UI script tutorial provided by TestRail only has sections for javascrip and css definitions. Can you please provide some light how we define the html portion via the UI script?

Thanks,
Márcio


#14

Hello Márcio,

JavaScript would always allow you to add and inject HTML. This is why embedding HTML this way is always the best option. TestRail wouldn’t otherwise know where to inject HTML, so offering other options wouldn’t be as flexible and JavaScript is the best option for this.

Regards,
Dennis


#15

Thanks Dennis. I was able to inject HTML and create a basic form in a modal dialog. At this point we are just playing with UI capabilities. We are more likely to choose a very simple form with a few args to be passed to Jenkins.

Regards,
Márcio


#16

Hi Marcio,

Our team happened to look through these threads with the same purpose of gathering inputs from dialog to be passed to a Jenkins job. If you have any insights or code snippets to share, we’d highly appreciate it.

Thanks!


#17

Hello Márcio,

Could you please send a code snippet with the form that you were able to integrate?

Thank’s in advance!


#18

Here is an example. We did this just as a prototype, so there’s no real action being performed by the button. The idea would be to trigger a Jenkins job.

Just copy and paste the code in a UI script and go to an existing test run and click “Test Modal Dialog” button.

Thanks,
Márcio

name: Test dialog box
description: Opens dialog box
author: Gurock Software
version: 1.0
includes: ^runs/view
excludes: 

js:
$(document).ready(
    function() {
        /* Create the button */
        var button = $('<div class="toolbar content-header-toolbar"><a class="toolbar-button toolbar-button-last toolbar-button-first content-header-button button-start" href="javascript:void(0)">Test Modal Dialog</a></div>');

        /* Add it to the toolbar */
        $("#content-header .content-header-inner").prepend(button);

        // Insert modal dialog html
        //$('body').prepend('<div id="myModal" class="modal"><div class="modal-content"><span class="close">&times;</span><p>Some text in the Modal..</p></div></div>');
        document.body.insertAdjacentHTML( 'afterEnd', 
'\
<div id="myModal" class="modal">\
<div class="modal-content">\
<span class="close">&times;</span>\
<form onsubmit=start_tests()>\
    <label for="build">Build ID</label>\
    <input type="text2" id="build_id" name="build_id" placeholder="0.0.0.1">\
    <label for="cmd_args">Command Line Args</label>\
    <input type="text2" id="cmd_args" name="command_args" placeholder="Command line arguments for test">\
    <label for="Test Options">Test Options</label>\
    <select id="options" name="options">\
      <option value="runall">Run All Tests</option>\
      <option value="runfailed">Re-run Failed Only</option>\
      <option value="runselected">Run Selected Tests</option>\
    </select>\
    <input type="submit" value="Start Execution">\
</form>\
</div>\
</div>');

        // Get the modal
        var modal = document.getElementById('myModal');

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        /* Bind the click event to trigger the automated tests */
        $("a", button).click(
            function()
            {
                modal.style.display = "block";
                return false;
            }
        );
       // When the user clicks on <span> (x), close the modal
       span.onclick = function() {
            modal.style.display = "none";
       }
    }
);

css:
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fcfcfc;
    margin: auto;
    padding: 20px;
    border: 3px solid #888;
    width: 400px;
    #height: 50%;

}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 20px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

input[type=text2], select {
    width: 100%;
    padding: 10px 10px;
    margin: 16px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #3399ff;
    color: white;
    padding: 10px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #0066ff;
}