Forums/Community/Community tips & tricks

Highlight ticket in view if it has a defined tag. Widget. (Zendesk Classic)

Mikhail Zakharov
posted this on April 17, 2012 23:16

For example. You need to highlight a tickets if they marked by tag "enterprise"

1. Create Custom HTML Widget

2. Past next code

<p>Highlighting.</p>
<script type="text/javascript" charset="utf-8">
Event.observe(document, 'widgets:load', function()
{
    $j(document).ready(function()
    {    
        // For each row in view
        $j('.tickets td.nice_id').each(function()
        {
            t=$j(this).text();
            var cell=$j(this);
            
            // Get ticket
            new Ajax.Request('/tickets/'+t+'.json',
            {
                method:'GET',asynchronous: true,onSuccess: function(transport)
                {
                    var obj = transport.responseText.evalJSON();
                    // Get tags
                    tags = obj['current_tags'];
                    // ***** Check tag "enterprise" *****
                    if (tags.search("enterprise")>=0)
                    {
                        // highlight
                        $(cell).css('background-color','orange');
                    };
                }
            });
        });
    });
});
</script>

3. Place widget to your view page.

NB. View must contain an ID field

 

Comments

User photo
Josh Frazier
teleflex

If there is any way you could help me figure how how to apply the background color to a cell other than the ID, it would be a HUGE help.

Thanks,

Josh

July 24, 2012 13:14
User photo
Mikhail Zakharov
Портал технической поддержки

Hi Josh,

If you want to color a whole line you can change the string

$(cell).css('background-color','orange');

to

$(cell).parent().css('background-color','orange');

 

If you want to color other cell but not whole line you should make some tricks. Change line

$(cell).css('background-color','orange');

to

$(cell).parent().children('.classname').css('background-color','orange');

 

Where <classname> - name of cell class. For system fields it can be

  • priority
  • description
  • created

and etc.

For custom field <classname> is an ID of this field

July 24, 2012 22:48
User photo
Josh Frazier
teleflex

You are awesome!  I really didn't expect a response, at least not so quickly.

 

I really appreciate the help!

July 24, 2012 23:22
User photo
Andrey Sarapulov
Versata

I vote for! Great widget!

July 26, 2012 11:21
User photo
Josh Frazier
teleflex

Mikhail, in addition to coloring the cell, how would I also include the context "font-weight: bold" so that fields text is bold?

Thank you in advance!

July 26, 2012 11:32
User photo
Mikhail Zakharov
Портал технической поддержки

Josh you can do it by using .css property (http://api.jquery.com/css/).

Example:

$(cell).css('background-color','orange');

$(cell).css('font-weight','bold');

 

Of course if you want to make different colouring depending of tags you should duplicate <if> section.

Example:

                    // ***** Check tag "enterprise" *****
                    if (tags.search("enterprise")>=0)
                    {
                        // highlight
                        $(cell).css('background-color','orange');
                    };

                    // ***** Check tag "trial" *****
                    if (tags.search("trial")>=0)
                    {
                        // highlight
                        $(cell).css('font-weight','bold');
                    };

July 26, 2012 23:08
User photo
Mikhail Zakharov
Портал технической поддержки

@Andrey

I'm glad to see that my widget is useful for you :)

July 26, 2012 23:10
User photo
Josh Frazier
teleflex

Mikhail, once again, thank you for your input!  This has really helped me form a great dashboard to manage the tickets.

July 26, 2012 23:20
User photo
Pedro Rodrigues
housetrip

This is awesome, Mikhail. It can be pretty useful -- thanks!

Imagine that I want to highlight tickets from specific requesters. Is it possible? I'm a noob at this, and tried the following condition to bold the cell:

if (ticket_requester_name.search("First Last")>=0)

But it doesn't work... could you please help?

July 27, 2012 04:12
User photo
Mikhail Zakharov
Портал технической поддержки

Hi Pedro.

You also can do it by this script. It this case you should read "requester_id".

First example: using same script. In this script you need to fill ID in " if (req=="ID")" statement.
ID - It's a user id, you can get it from URL when you select Manage / People / User. Like https://yourdomain.zendesk.com/users/2411248

<p>Highlighting.</p>
<script type="text/javascript" charset="utf-8">
Event.observe(document, 'widgets:load', function()
{
    $j(document).ready(function()
    {    
        // For each row in view
        $j('.tickets td.nice_id').each(function()
        {
            t=$j(this).text();
            var cell=$j(this);
            
            // Get ticket
            new Ajax.Request('/tickets/'+t+'.json',
            {
                method:'GET',asynchronous: true,onSuccess: function(transport)
                {
                    var obj = transport.responseText.evalJSON();
                    // Get tags
                    req= obj['requester_id'];
                    // ***** Check requester *****
                    if (req=="ID")
                    {
                        // highlight
                        $(cell).css('background-color','orange');
                    };
                }
            });
        });
    });
});
</script>

Second way: using other simply script withous Ajax. In this case you should show requester name (requester field) in your View.

<p>Highlighting.</p>
<script type="text/javascript" charset="utf-8">
Event.observe(document, 'widgets:load', function()
{
    $j(document).ready(function()
    {    
        // For each row in view
        $j('.tickets td.requester').each(function()
        {
            t=$j(this).text();
            var cell=$j(this);
            

                    // ***** Check requester *****
                    if (t=="John Smith")
                    {
                        // highlight
                        $(cell).css('background-color','orange');
                    };


        });
    });
});
</script>


I didn't debug those scripts in widget only in my head =). Please post a comment if something will wrong with widget.

July 27, 2012 05:15
User photo
Pedro Rodrigues
housetrip

Mikhail, thank you for your fast response -- I've done as you told and set the user ID, but somehow it's not working... any hints?

July 27, 2012 05:50
User photo
Mikhail Zakharov
Портал технической поддержки

Try to remove quotes from IF statement

if (req=="123456787")

to

if (req==123456787)

 

Condition

July 27, 2012 05:58
User photo
Pedro Rodrigues
housetrip

I had tried that before, but still nothing. Wonder where the trick is...

July 27, 2012 06:08
User photo
Mikhail Zakharov
Портал технической поддержки

I debugged this script it works for me. Please check

- that you correct copy and paste user id from URL.

- your view shows an ID column (it's important)

 

July 27, 2012 06:13
User photo
Mikhail Zakharov
Портал технической поддержки

If all of it correct insert after row

req= obj['requester_id'];

next string string

alert (req);

 

Your widget will show requester_id of all tickets in view. Can you see your ID?

July 27, 2012 06:15
User photo
Jennifer Rowe
Zendesk

Hi Mikhail,

Thanks for your excellent tip and for answering questions and helping troubleshoot! We featured your tip on our Twitter and Facebook accounts yesterday, so that's why you got extra attention here! I'm hoping that will encourage you (and others) to continue participating in our forums! Keep up the good work--we appreciate it!

July 27, 2012 09:46
User photo
Aih
emakinafr

Thank you, this is perfect !

August 03, 2012 01:29
User photo
Nathan Salt
atmail

Is there a way that this works on the new Zendesk?

January 29, 2014 16:35
User photo
Laura D.
Zendesk

Hi Nathan, 

The only way to "modify" new Zendesk is to add/make apps. That said, I don't see a way apps would let you do this because they don't modify the content of the page, they are more about adding particular functions and making additional information available as you work on tickets. If you're trying to see a certain subset of tickets perhaps a view would help? I know that's not the same as visually highlighting tickets, just thinking about options. Hope you find a workable option!

January 31, 2014 15:18