Change the order comments inside of tickets in end-user view

Hey Ash, 

Add the given CSS to your style.css file at the bottom area.

.table.my-activities-table tbody {
  display: flex;
  flex-direction: column-reverse;
}

  .my-activities-table.table tr {
    display: flex;
  }

  .my-activities-table th:first-child, 
  .my-activities-table td:first-child {
    width: 50%;
    display: block;
  }

 .my-activities-table td:not(:first-child),
 .my-activities-table.table th:not(:first-child) {
    display: none;
    width: 15%;
  }

@media (min-width:768px){
   .my-activities-table td:not(:first-child),
   .my-activities-table.table th:not(:first-child) {
    display: table-cell;
  }
}



Screenshot for the same:




Output is:




Default order is:

2nd is:

Is it also possible to change where the exact date and time is displayed on the comments rather than "2 months ago"

Currently code is: without format='long' 

Default output is:-

After adding the format:- format='long', see this

Output after adding the format=long:-

Thanks

Team

Hi Ifra,

Thank you! But is there any way to change the order of the comments inside the tickets for the end users? Currently this still shows the oldest comment on top

Hi Holly,

Which version are you using? Can you share the public URL?, actually I don't have content to test order of table rows.

Hi Ifra!

I appreciate the reply but unfortunately can't share the public URL. Thank you for the offer though. I'll keep on messing around with the instance!

I agree with Holly,

When the ticket is opened, we should show the comments ordered by the last comment, not by the first. This will be easier for the customer to interact with the ticket because the button ">>" is not sending to the last comment, they need to click on "Next" many times to add their comments.

Hi @Ifra,

Curious to know if there's a solution out there to move the “Add to conversation” comment box to the top of the comment list just under the ticket title for end users in “Requests." (for reference https://support.zendesk.com/hc/en-us/community/posts/4880925102746/comments/5538554709274)

In our case, we also have the conversation sorted “from newest to oldest” to prevent end users from going to the last page to view the latest comment on the ticket. I'm looking for a way to move the comment box to the top so it aligns with the comment order and to improve the end-user experience

Is there a way we can accomplish this through HTML/CSS/JS?

P.S. It seems the new Zendesk Support theme doesn't allow to attach screenshots :/

Hi @erica26!

Not sure why the permalink to the comment doesn't work. It should have linked Holly's comment from Mar 29, 2023 above. However, looks like I can paste images now, here's what I was referring to.

We want to move the comment box to the top and the conversation order in descending order from newest to oldest (newest or most recent one on the top right below the comment box).

How could we accomplish that?

Thanks, @erica26 I have looked into those resources in the past with no lunch. However, I figured it out by playing with the HTML elements until I got it right.  I appreciate the help.

@ ivan  We have the same issue here, but I saw that you solved it with changing the html, you mind share what you did that made it work? 

/ Isabella

Hi @isabella13,

Sure thing. I just moved the form element inside the <div id='main-content" class="request-container> in right under {{satisfaction}} of the request_page.hbs. Here's a screenshot of where it's placed today in our help center. I also added a line break <hr> to divide the comment box from the most recent comment on the ticket. I'm using Templating API v3 (version 3.1.2 to be exact).

It took a bit of trial and error to make sure all other elements respond as expected but I think this did the trick. I hope this helps.

Hi @ivan11 ,

Are you able to share what your code setup looks like to have the newest comments appear at the top and oldest descending down the page?

@dakotah11 that is actually a setting in Guide admin > Guide settings (gear icon) > Requests > Sort by newest comment to oldest. I didn't have to change the code.