Adding web fragment to Service desk queue?

ICANSEEYOU7867

I am thinking this might not easily be doable.  I am wanting to inject some HTML into the servicedesk queue page.

At a glance, this is easy enough to do.  I just use javascript to inject some html after the correct element.  However it seems that this area of the page is constantly refreshing ever 5 seconds or so.  The HTML I inject seems to work initially, and then poof, it disappears, which appears to be due to some sort of page/area reload.

Does anyone have any tricks to adding HTML to the servicedesk queues?  

As a simple/dumb test:

Create a fragment -> Show a web panel

Location: servicedesk.project.sidebar

writer.write("""
<script type="text/javascript">
  AJS.toInit(function() { 
    AJS.\$('.ui-sortable-handle').after("<hr>");
  });
</script>
""")

 This just tosses a horizontal line after every queue.  Works fine for about 5 seconds and disappears.  not sure if there is anything that can be done.

ICANSEEYOU7867

Actually I think I got this figured out! Please let me know if there is a better way or if this will cause issues.

Lets say you want to add a line after the "Unassigned" queue:

writer.write("""
<script type="text/javascript">
\$(document).ajaxComplete(function() {
 if(\$('#myhr').length === 0){
   \$("span.navigator-item-label").filter(function() { return (\$(this).text() === 'Unassigned') }).closest('.section-item').after("<hr id='myhr'>");
 }
});
</script>
""")

We are basically finding the span with the proper class, searching for the span that says "unassigned", finding the parent list object, and writing the HTML.  We also have to test and see if the item exists, or else we will just keep adding additional horizontal bars.  Pretty neat!

For whatever reason with how the page loads, I had to use $(document).ajaxComplete(function()... for this to persist. I don't know how expensive this is though.