Status in HC my activities needs to be customizable


4 Comentarios

  • Sam

    Hi Budke, John!

    You could do this through your script.js file by adding the following:

    document.addEventListener("DOMContentLoaded", function() {

    The above will only replace the label, not the hover-over title, or any of the other statuses. A more complex (but still easy-to-implement) solution would be to instead include the following in your script.js file:

    $("").each(function() {
    $( ".request-status.request-status--answered" ).replaceWith( '<span class="request-status request-status--answered" title="This ticket is pending.">Pending</span>' );
    $( ".request-status.request-status--open" ).replaceWith( '<span class="request-status request-status--open" title="We are working on your ticket.">Open</span>' );
    $( ".request-status.request-status--solved" ).replaceWith( '<span class="request-status request-status--solved" title="This ticket has been solved.">Solved</span>' );

    What the above does:

    • It loops through every line on the My Activities page, looking for the specific table elements
    • It will replace each matching child object (the statuses, like .request-status.request-status--answered) with entirely new span HTML, which allows you the flexibility to change both the hover-over title element and the label text.

    For each of the three lines, replace the text between title="text" to update the hover-over text. Replace the text between >Status</span> to update the actual label shown on the page.

  • Budke, John

    Thanks! This is great.  One question - is the "answered" value the same as when My Activities displays "Awaiting your Reply?"  For example, I changed the colors of the status displays (i.e.; Open from red to green) but when I changed the "pending" status to something other than green, it didn't update. I can't find the code for the "awaiting..." value.

  • Sam

    Budke, John Excellent catch! It would depend on your theme, and I apologize for not clarifying. We use the Lotus One theme in our implementation.

    If you are using Copenhagen v2, the requisite code would be 

    $(".requests-table-status").each(function() {
    $( ".status-label.status-label-answered" ).replaceWith( '<span class="status-label status-label-answered" title="This ticket is pending.">Pending</span>' );
    $( ".status-label.status-label-open" ).replaceWith( '<span class="status-label status-label-open" title="We are working on your ticket.">Open</span>' );
    $( ".status-label.status-label-solved" ).replaceWith( '<span class="status-label status-label-solved" title="This ticket has been solved.">Solved</span>' );

    This does require jQuery; more info on adding that in (if not already) can be found at Importing or Upgrading jQuery.

    Your theme may differ slightly, but it's easy to determine what those might be! To do so:

    1. Go to the My Activities page in Zendesk
    2. On most browsers: Right-click on one of the ticket status labels -> Inspect or Inspect Element
    3. In the new Inspect window, note the following values: The highlighted span class and the parent td class values. You only need one td class value - they're always the same per-row. Gather the appropriate values for the span class value, one each for Open, Pending, and Solved.
    4. Update the script.js file using the template below.
    $(".td_class_here").each(function() {
    $( ".span_class_here_without_spaces" ).replaceWith( '<span class="span_class_here_with_spaces" title="This ticket is pending.">Pending</span>' );
    $( ".span_class_here_without_spaces" ).replaceWith( '<span class="span_class_here_with_spaces" title="We are working on your ticket.">Open</span>' );
    $( ".span_class_here_without_spaces" ).replaceWith( '<span class="span_class_here_with_spaces" title="This ticket has been solved.">Solved</span>' );

    Also, do the following:

    •  Replace the "td_class_here", "span_class_here_without_spaces", and "span_class_here_with_spaces" with the variables specific to your theme
    • For "td_class_here" and "span_class_here_without_spaces", remember there is a preceding period (.td_class_here, .span_class_here_without_spaces)
    • Examples of each:
    td class shown in browser: my-activities-items__col my-activities-item__meta
    td class to use:

    td class shown in browser: requests-table-status
    td class to use: requests-table-status

    span class shown in browser: status-label status-label-answered
    span class to use without spaces: status-label.status-label-answered
    span class to use with spaces: status-label status-label-answered

    Important to remember: 

    • The code block needs to reside somewhere within the document.addEventListener('DOMContentLoaded', function() { function, not just tacked onto the bottom of the script.
    • Your CSS may call these labels something else, when looking for color. Match the values you see in the span class with your CSS to fix the colors. (e.g. span class="status-label status-label-solved" <-- look for status-label-solved in your CSS)

    Hope this helps!

  • Budke, John

    Thanks so much!


Iniciar sesión para dejar un comentario.

Tecnología de Zendesk