Change the Order of Ticket Replies

  • 22 October 2013
  • 36 replies
  • 225 views

The default view of the ticket replies is in chronological order. When you have more than two or three exchanges in a conversation, scrolling down to see the latest reply, every single time, gets aggravating. When this Freshplug is installed, the order of ticket replies can be reversed so that the latest reply is displayed first and the first response is displayed last.


Instructions


1. Download the zip file.

2. Unzip and open the .txt file

3. Copy the code from the file

4. Go to Admin->Integration->Freshplugs in you dashboard and click the new Freshplug button

5. Give a Name and Description to this plug for future reference

6. Select the text box “Show this widget in ticket view page”

7. Copy the code from the .txt file here and click the button "create and enable"

change_the_order_of_ticket_replies_main_screenshot_13102.pngthumbnail_13102.png

36 replies

@Niklas.forsmarker: The current version of the app doesn't work in Mint, but we are assessing the possibilities to make this happen. Freshworks have with Mint changed the framework for how apps can work with and effect the content in the Tickets detail view, so we are not yet sure it will be possible to make the app run in Mint. I'll post an update in this thread as soon as I have some more info.


Hi will this custom app work in Freshdesk "Mint" gui?


Regards

Niklas





Thank you Marcus, we've been waiting on this for so long, as soon as we try it we'll send you more feedback. Have a nice day.



I'm really happy to announce that our app is finally released on the Marketplace! There was a long backlog at the review team, but they have now approved the app.




The app is free of charge and I hope it solves your needs and that your agents will like it! We will be happy to get your feedback.




Look here for more info:


https://apps.freshdesk.com/reversed_sort_order/



Hello there. I'm very interested on trying this app. Good to know than i'm not the only one thinking that this option should be available at the system config. Any update about when this app will be released?. Thanks.


@Chis: Thanks. We got some small feedback from the guys as Freshdesk's Marketplace Team and need to update some descriptions and screenshots, but other than that everything is ready to go. Hopefully it's released within a few days. I'll post an update here as soon as we'll get a green light.


Marcus,




Happy to beta test if needed. Thank you very much for your hard work.



Hold on tight guys, your prayers have been heard - we've created an app for exactly this purpose. It's submitted to Freshdesk's marketplace and is currently in revision. Hopefully it will pass without problems and be available very soon. Stay tuned!  :)


Reason says that such code can be ported to the Freshdesk SDK but I have never done that so I don't know how easy that would be. Actually I'd like to hear from anyone with experience in porting Freshplugs to the SDK.

 



Thanos,




Thank you very much for your help. We are VERY new to FD. Just converted from ZD. Still learning the system. Don't think we have FreshPlugs as an option in our ADMIN section. I guess I will try to figure out another way.

Maybe the new MINT interface will have a way to do it? We will see!




Thanks again for your help.


The code still works and is easy to use if your account supports Freshplugs ( the older option for extending Freshdesk - the current is the Freshdesk SDK ). In fact this is the code I am using:

 


<style type="text/css">
.conversation_thread {
border: 0;
}

#show_more {
padding: 0 10px 40px;
}

.conversation_thread.redactor {
margin-bottom: -30px;
margin-top: -30px;
}
</style>
<div id="reverse_ticket_replies_order"></div>
<script type="text/javascript">
if (jQuery("body").hasClass("ticket_details")) {
var reorderNotes = function() {
var id_value;
if (jQuery("#all_notes").length) {
id_value = "all_notes";
changeOrder(id_value);
} else {
id_value = "all_activities";
changeOrder(id_value);
}
};
var changeOrder = function(id) {
var ID = [];
jQuery("#" + id).find(".conversation").each(function() {
ID.push(jQuery(this).attr("data-timestamp"));
});
ID = ID.sort().reverse();
jQuery(ID).each(function(i, item) {
jQuery("#" + id).append(jQuery("[data-timestamp=" + item + "]"));
});
};
if (TICKET_DETAILS_DATA != null && TICKET_DETAILS_DATA.scroll_to_last) {
TICKET_DETAILS_DATA.scroll_to_last = false;
}
jQuery("#reverse_ticket_replies_order").closest(".widget").removeClass("widget");
jQuery(document).on("ticket_view_loaded", function(event, data) {
jQuery(".redactor").insertAfter("#original_request");
});
jQuery(document).on("note_created note_updated activities_toggle ticket_view_loaded ticket_show_more sidebar_loaded", function(event, data) {
reorderNotes();
jQuery("#all_notes").after(jQuery("#show_more"));
});
setTimeout(function() {
reorderNotes();
jQuery("#all_notes").after(jQuery("#show_more"));
}, 2000);
}
;
</script>

 


 



Anyone able to get this to work? Would love to have it switched but not sure if this old code will mess up our support system. Thanks.



2nd Update Request - 




I too am receiving requests to change our ticket response from ascending to descending order. I'm not a programmer and would appreciate learning of, hopefully, a easier way to implement this change. We are using the Estate plan. 



Hi All




Does any one know if this is still relevant?




I've just been looking in the admin area and I think this looks like very old information. Can one of the customers services people update this and let me know what the answer is.



This is a stripped down version that will work with the agent view only.




 


<script type="text/javascript">
jQuery(document).ready(function(){
var con = document.getElementById('all_notes');
var els = Array.prototype.slice.call(con.childNodes);
for (var i = els.length -1; i>=0; i--) {
con.appendChild(els[i]);
}
})
</script>
</style>


 


Hi Adam,


Here is the "Portal Pages/Ticket details" code that we used to make it appear inverted (+ title on top):


<section class="main content rounded-6 min-height-on-desktop">

 <div class="breadcrumb">

  <a href="{{ portal.home_url }}">{% translate header.tabs.home %}</a>

  <a href="{{ portal.tickets_home_url }}">{% translate portal.tickets.ticket_list %}</a>

 </div>

 

 <section class="ticket-main">

  {{ ticket | status_alert }}

 

  <h2 class="heading">#{{ ticket.id }} {{ ticket.subject | h}}</h2>


  {% if portal.user %}

   <section class="toolbar-actions" id="ticket-toolbar">

    <span class="hide-tablet pull-right">

     <a href="#ticket-sidebar" class="btn btn-icon btn-small btn-primary"

      title="More ticket details" data-toggle="tooltip">

      <i class="icon-cog-drop-light"></i>

     </a>

    </span>

    <div class="btn-group" id="ticket-toolbar">

     {% unless ticket.closed? %}

      <a href="#reply-to-ticket" class="btn btn-small"

       data-proxy-for="#add-note-form" title="{% translate reply %}"

       data-toggle="tooltip">

        <i class="icon-reply"></i>

      </a>

      <a href="{{ ticket.close_ticket_url }}" data-method="post"

       class="btn btn-small" data-toggle="tooltip"

       title="{% translate portal.tickets.mark_closed %}">

        <i class="icon-close-ticket"></i>

      </a>

      <a href="#add-people" rel="freshdialog"

       title="{% translate portal.tickets.add_people_title %}" data-width="400" class="btn btn-small" data-submit-label="{% translate portal.tickets.add_people %}" data-toggle="tooltip" data-close-label="{% translate close %}" title="{% translate portal.tickets.add_people %}">

        <i class="icon-add-people"></i>

      </a>

     {% endunless %}

    </div>

   </section>

  {% endif %}




  <section id="ticket-comments">

   <section id="reply-to-ticket" name="reply-to-ticket" class="user-comment {% if ticket.closed? %}hide{% endif %}">

    <div class="user-info">

     {{ portal.user | profile_image:'user-pointer-bottom', '40px', '40px' }}

     <div class="user-details">

      <h4 class="user-name">{{ portal.user.name | h}}</h4>

     </div>

    </div>

    <div class="p-content" rel="image-enlarge">

     <input type="text" class="special span12"

       placeholder="{% translate portal.tickets.reply_placeholder %}" id="add-note-form-proxy"

       data-proxy-for="#add-note-form" />


     <div id="add-note-form" class="hide">

      {% snippet ticket_reply %}

     </div>

    </div>

   </section>

   {% for comment in ticket.public_comments reversed %}

    <section class="user-comment {% if comment.by_agent %} comment-by-agent {% endif %}"

       id="ticket-note-{{ comment.id }}">


     <div class="user-info">

      {{ comment.user | profile_image:'user-pointer-bottom', '40px', '40px' }}

      <div class="user-details">

       <h4 class="user-name">{{ comment.user.name | h }}</h4>

       <div class="p-info" title="{{ comment.created_on | short_day_with_time }}">{% translate portal.said %} {{ comment.created_on | time_ago }}</div>

      </div>

     </div>

     

     <div class="p-content" rel="image-enlarge">

      <div class="p-desc">

       {{ comment | custom_survey_data}}

       {{ comment.description }}

       {{ comment | freshfone_audio_dom }}

      </div>


      {{ comment | comment_attachments }}


     </div>

    </section>

   {% endfor %}

   {% if ticket.closed? %}

    {{ ticket | status_alert }}

   {% endif %}

   <!-- Old reply to ticket section goes here -->

  </section>

 

  <section class="user-comment" id="ticket-description">

   <div class="user-info">

   {% if ticket.outbound_email? %}

    {{ ticket.outbound_initiator | profile_image:'user-pointer-bottom', '40px', '40px' }}

    <div class="user-details">

     <h4 class="user-name">{{ ticket.outbound_initiator.name | h}}</h4>

     <div class="p-info">{% translate portal.reported %} {{ ticket.created_on | time_ago }}</div>

    </div>

   {% else %}

    {{ ticket.requester | profile_image:'user-pointer-bottom', '40px', '40px' }}

    <div class="user-details">

     <h4 class="user-name">{{ ticket.requester.name | h}}</h4>

     <div class="p-info">{% translate portal.reported %} {{ ticket.created_on | time_ago }}</div>

    </div>

   {% endif %}

   </div>

   <div class="p-content" rel="image-enlarge">

    <div class="p-desc">

     {{ ticket.description_html }}

     {{ ticket | freshfone_audio_dom }}

    </div>


    {{ ticket | ticket_attachemnts }}

   </div>

  </section>

 

 </section>

</section>


<section class="sidebar content rounded-6" id="ticket-sidebar">

 {% assign agent = ticket.agent %}

 {% if agent_visible == true and agent %}

  <div class="widget agent-details">

   <h3 class="lead">{% translate agent_working_on_this_ticket %}</h3>

   {{ agent | profile_image:'', '40px', '40px' }}

   <div><b>{{ agent.name }}</b></div>

   <div>{{ agent.job_title }}</div>

  </div>

 {% endif %}


 {% snippet ticket_survey %}

 

 {% snippet ticket_details %}

</section>


{% snippet ticket_add_people %}



*** For your information, this is the ONLY change we've made to the layout of that page.


Cheers!



I was unsuccessful in trying this plug. Any idea on how to get this to work?


Thanks,

Adam 

For customer site, you have only to extend the liquid code with "reversed" as seen below:



Resurfacing this thread...Has anyone implemented this Freshplug successfully?  I followed the steps and nothing has changed either. 


How is this enable don the front-end for the customers?  Seems very strange that this is not a standard Freshdesk option in admin settings.  I already had a customer complain about having to scroll all the way down.  


We are paying monthly for this service.  Please add the functionality already.  This thread was opened two years ago!


Thanks for sharing the Code Dan.
Did id work by you on the Customer Portal also?
@FreshdeskDevs it would be great if you could implement a function that make that also possible on Customer Portal Side.


I was given this code snippet to replace the above code.  It seems to work well and reorder the comments correctly


 

<div id="reverse_ticket_replies_order"></div>

<script type="text/javascript">
if(jQuery('body').hasClass('ticket_details')){
jQuery('#reverse_ticket_replies_order').closest('.widget').removeClass('widget');
jQuery(document).on("ticket_view_loaded",function(event,data){
jQuery('.redactor').insertAfter('#original_request');
});

jQuery(document).off('note_created note_updated activities_toggle ticket_view_loaded ticket_show_more sidebar_loaded');

function changeOrder(id){
var ID = [];
jQuery('#' + id).find(".conversation").each(function(){
ID.push(jQuery(this).attr('data-timestamp'));
});
ID = ID.sort().reverse();
jQuery(ID).each(function(i,item){
jQuery('#' + id).append(jQuery('[data-timestamp=' + item + ']'));
});
}

function reorderNotes(){
var id_value;
if(jQuery('#all_notes').length)
{
id_value = "all_notes";
}
else
{
id_value = "all_activities";
}
changeOrder(id_value);
}

jQuery(document).on('note_created note_updated activities_toggle ticket_view_loaded ticket_show_more sidebar_loaded', function(ev, data) {
reorderNotes();
console.log('test');
});
}
</script>

 

I would agree that this functionality needs to be a standard feature of the application.


I too have implemented this Freshplug and it does not do anything.  Has anyone gotten this to work?


Dan


Hello,

I have to say I am disappointed that the advised solution to this request is a complicated plug-in. Surely this is a widey-requested feature that should be implemented as a simple Admin setting?


See my comments on this subject here => https://support.freshdesk.com/support/discussions/topics/13447

Thanks

Michael


Reply