5

End User Ticket Count widget (Web portal)

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>

10 comments

Please sign in to leave a comment.