Forums/Community/Community tips & tricks

End User Ticket Count widget (Web portal)

Skip Moore
posted this on July 10, 2010 11:45

This is a custom widget that can placed in the sidebar to let the user know how many requests they have open and solved. For the first five open or pending  requests you will see the subject line and the first 200 character of the description with a direct link to the request. 

enduserticketcount.png

 

For the code make sure you have edited your CSS to display the results the way you want. 

 

//Zendesk end user ticket count widget

<div id="tikcetfeedContent">
	
</div>
<script>
	 
$j(document).ready(function() {


truncate = function(text, length, ellipsis) {    

    // Set length and ellipsis to defaults if not defined
    if (typeof length == 'undefined') var length = 100;
    if (typeof ellipsis == 'undefined') var ellipsis = '...';

    // Return if the text is already lower than the cutoff
    if (text.length < length) return text;

    // Otherwise, check if the last character is a space.
    // If not, keep counting down from the last character
    // until we find a character that is a space
    for (var i = length-1; text.charAt(i) != ' '; i--) {
        length--;
    }

    // The for() loop ends when it finds a space, and the length var
    // has been updated so it doesn't cut in the middle of a word.
    return text.substr(0, length) + ellipsis;
}
	 

//used to start the queue to ensure the open request appear before the solved requests	
var para = $j("div#top-menu");	

//get the open requests 
para.queue("testQueue", function(next){$j.get('/requests.xml', function(d) {
           var countopen = $j(d).find('ticket').parent().attr('count');
           if(!countopen){countopen = 0;}
           //makes a linkt to all open tickets 
           $j('#tikcetfeedContent').append("<h2><em class=\"rssdate\"><a href=\"/requests\">Open Tickets: " + countopen + "<\/a><\/em><\/h2><br>");
		
		$j(d).find('ticket').each(function(index) {

			//name the current found item this for this particular loop run
			var $item = $j(this);
			// grab the ticket subject
			var title = $item.find('subject').text();

			// grab the tickets ID
			var link = $item.find('nice-id').text();
			// next, the description the second value sets the number of characters to display the 3rd value is what you want the ellipse to be 
                        var description = truncate($item.find('description').text(), 200, '...');
			
			// now create a var 'html' to store the markup we're using to output the feed to the browser window
			var html = "<div class=\"rssentry\"><h2 class=\"rsspostTitle\">" + title + "<\/h2>";
			html += "<p class=\"rssdescription\">" + description + "</p>";
			html += "<a href=\"/requests/" + link + "\" target=\"_blank\">Read More >><\/a><\/div>";

			//put that feed content on the screen!
			$j('#tikcetfeedContent').append(html);

                        // Set the number of items you want displayed remember the count starts at zero this is set to 5
                        if(index > 3) {return false;}  

		});
	});
      next();
  });

//setting a delay to ensure that the ticket call completes before the current user call
    para.delay( 500, "testQueue" );

//get the solved ticket count only 
 para.queue("testQueue", function(next) {$j.get('/requests.xml?filter=solved', function(solved) {
         var countSolved = $j(solved).find('ticket').parent().attr('count');
          if(!countSolved){countSolved = 0;}
    //makes a link to the solved request view 
	$j('#tikcetfeedContent').append("<p><h2><em class=\"rssdate\"><a href=\"/requests?filter=solved\">Solved Tickets: " + countSolved + "<\/a><\/em><\/h2><br></p>");
	
		
	});
     next();
    });
    para.dequeue( "testQueue" );
 });

</script>
 

Comments

User photo
Matthew Ives
marketcircle

This is EXACTLY what I was looking for. Providing the ability for users to see on the fly (or in our case the Home page) a quick overview of their ticket status. 

Skip, I can't thank you enough!

Cheers, 

Mat

April 28, 2011 20:14
User photo
Juanzo
Duplika
Thanks for sharing!
August 25, 2011 11:28
User photo
Support

Hi Skip!

I'd love this widget but can't seem to get it to work.. I'm kind of a CSS noob..

Could you maybe tell me which parts need adjusting before it works?

Thanks in advance!

Anne

April 08, 2013 07:29
User photo
Skip Moore
Zendesk

@Anne, I have updated the code so it will now work. Sorry about that. You can just copy and paste into a custom widget

April 08, 2013 10:27
User photo
Support

Thanks Skip!! Really helped me out a lot!

- Anne

April 09, 2013 00:51
User photo
Support

Hi Skip, I also have another question:)

Is it possible to show the open and solved/closed tickets for a whole organization in this widget?

Thanks!

- Anne

April 15, 2013 00:34
User photo
Skip Moore
Zendesk

@Anne, you can make a call to organization_requests.json and get a JSON object of all the org requests. 

Cheers
Skip 

April 15, 2013 10:40
User photo
Support

Hi Skip,

I really tried my best but I guess I need the dummy explanation for this one..

I tried inserting this in the widget: para.queue("testQueue", function(next){$j.getJSON('/organization_requests.json', function(d)

Help?!

April 16, 2013 06:00
User photo
Skip Moore
Zendesk

@Anne, you need to create a new action in the queue so after the $j.get('/requests.xml?filter=solved', ....)  just before para.dequeue("testQueue"); add 

para.queue("testQueue", function(next) {$j.get('/organization_requests', function(solved) {
         var countSolved = $j(solved).find('ticket').parent().attr('count');
          if(!countSolved){countSolved = 0;}
    //makes a link to the solved request view 
	$j('#tikcetfeedContent').append("<p><h2><em class=\"rssdate\"><a href=\"/requests?filter=solved\">Organization tickets: " + countSolved + "<\/a><\/em><\/h2><br></p>");
	
		
	});
     next();
    });
April 16, 2013 08:54
User photo
Nirit G

Very nice widget!

Can anyone please share a sample CSS for this feature?

Thanks! :)

Nirit.

August 20, 2013 02:11