Customizing custom ticket field descriptions with HTML Follow

Comments

25 comments

  • Avatar
    Marybeth Sklar

    This seems to be the only resource for the topic and like the users above, I can't get this to work. Is there an updated article that I'm not seeing?

  • Avatar
    Anna

    @Marybeth - Thanks for opening a ticket for this inquiry. I'll send you a response via the ticket shortly.

  • Avatar
    Stefan Schleußner

    Hello Anna, hello Marybeth,

    can you add me in Cc? That would be great!

    Best regards
    Stefan

  • Avatar
    Allison Rost

    Hi All,

    Were you able to get this working?

  • Avatar
    Jessie Schutz (Edited )

    Hi Allison! I'm going to share the solution our T2 Advocate Christopher shared in the ticket; hopefully you'll be able to get that to work!

    --

    Please check your two drop-down ticket fields. For End-users, the ticket field should be Visible and Editable. The ticket field needs to include a Description.

    In the CSS I added div in front of the selectors like so:

    /* Start custom ticket field descriptions formatting */
    div.request_custom_fields_27655008 p {
    font-weight: bold;
    color: black;
    font-size: 15px;
    }
    div.request_custom_fields_28178838 p {
    font-weight: bold;
    color: black;
    font-size: 15px;
    }
    /* End Custom Ticket Field Descriptions Formatting */
    

    This is a pretty custom solution, and a bit advanced from a coding standpoint so you may or may not be able to get it work. Let us know how it goes!

  • Avatar
    Jean-Philippe Lavertu

    I have not been able to make this work. Is this still supposed to work ?

  • Avatar
    Kari Petty

    I'm about to try this, but was wondering if there was a way to get the description before the field like it used to be in the Web Portal.  Having the Description after the field is confusing to some of our users.

  • Avatar
    Craig Willis

    Just tried this and it's not working for me in the new Help Center.

    Would be great to get confirmation that this can still work.


    Craig

  • Avatar
    Rebecca

    Hey Craig- 

    I just tested this in my Help Center and it did work so this should still be a useable method for editing custom field formatting in Help Center. 

    There are a few things to double check- 

    -Ensuring the custom ticket field ID for your custom fields are being used both in the JS and CSS. This can be found in the ticket fields menu in each individual ticket field 

    -The custom CSS provided in the article is added below the } of .form-field p { in CSS: 

  • Avatar
    Craig Willis

    Hi Rebecca, 

    Still not working for me, all I see are the two drop-down forms on the Ticket Form.

    I do notice that I can't validate what's in the screenshots provided Jessie previously as they don't show anymore.

     

  • Avatar
    Jessie Schutz

    Hey Craig!

    I should be able to get my comment fixed so those screenshots show up for you. I'll let you know when I get it straightened out!

  • Avatar
    Jessie Schutz

    Hey Craig, checking in again.

    The images should be visible to all users, regardless of whether they're logged into the Help Center. Are you still not able to see them?

  • Avatar
    Craig Willis

    Hi Jessie, 

    I still can't see the images in your post above to know whether I've set this up correctly.

    Really need this functionality and wish the only solution wasn't this custom solution.

    Craig

  • Avatar
    Jessie Schutz

    Hey Craig,

    I removed and re-added the images to the post. If they're still not showing up for you, please try viewing the thread in a different browser - I'm able to see them as an anonymous user, so they should be showing up for you, too.

     

  • Avatar
    Craig Willis

    Appreciate everyones help on this but it's still not working....and it would be so great to have which makes it so frustrating.

    What I notice though, if this helps, is that when it's enabled, the Submit button when updating a case is also disappearing...so maybe there's conflict with something else!?

    Craig

     

  • Avatar
    Marek

    Hello all,

    I just implemented this today and got it to work. For context, I did this with the latest Copenhagen theme.

    JS tab

    At the very top of the file, right you should do the following:

    ----

    /*
    * jQuery v1.9.1 included
    */

    var custom_field_12345 = 'your HTML goes here';

    ----

    The "12345" must match the Custom field ID for the custom field that you're trying to modify. You can find this at the top of the page if you edit the Custom field.

    Next, the above comments are slightly misleading since you need to modify the method:

    request_custom_fields_12345

    This will overwrite the pre-existing method that the theme has by default for the custom field 1234.

    You do NOT need to modify your CSS, as long as you've already defined the CSS for the description/link somewhere else.

    I hope that helps. 

     

     

     

  • Avatar
    Craig Willis

    Maybe the issue is the theme, I'm using The Humble Squid theme and it still doesn't work.

    Craig

  • Avatar
    Charles Wilson

    I removed the <p> tag from the Javascript custom ticket field description, as it was causing formatting issues with nested paragraph tags.

    Here is the portion of the code I changed, removing <p> tags:

    // START custom ticket field descriptions variable definitions

    var custom_field_24138953 = ' <a href="html link here" >Link text here</a> ';

    // END custom ticket field descriptions variable definitions
  • Avatar
    Cheryl Schmelzer

    Has anyone gotten this to work recently?  I've gone through the steps several times, and I am not able to see the table with the descriptions. I am working in a demo environment - doing some testing before we implement. Is it possible that the customization does not work in demo environments?  Thank you.

  • Avatar
    Cheryl Schmelzer

    I was able to get the html coded text to appear. I had to add some text in the Description box for the custom field - this is noted above in a previous post.

    In the JS code, I also ensured that my custom ticket field JQuery code was place below the $(document).ready(function() { code that already existed. 

    Thank you! 

  • Avatar
    Steve Morrell

    Is it possible to do this with system fields such as "Subject"?

    I have some instructions in the description of the subject field, nudging customers to check a few things before logging a ticket. This is becoming unwieldy however.

    The ability to include markdown or HTML in descriptions natively would be a handy feature.

  • Avatar
    Steve Morrell

    I've been able to get the search and deflect events working, but submit a request is not. The event it just not logged.

    I've instead moved to page views with "requests/new" in the path. This is useful, as it includes people that have bookmarked the requests page, and gone directly there.

    I'd be interested to know if anyone has any theory as to why that event isn't working. 

     

  • Avatar
    Rebecca

    Hi Steve!

    I did some testing on my end and was able to successfully implement this for the subject field. Instead of targeting the custom_field_### you would need to target the subject using request_subject.To implement this you would want to add a description to the subject field in the agent interface to then be able to use jQuery to change the HTML that displays. 

  • Avatar
    Steve Morrell

    Thanks Rebecca,

    Could you provide a bit more detail, especially with using JQuery? This is not an area I have much experience of, so I'd like to understand it better.

    Steve

  • Avatar
    Jessie Schutz

    Hey Steve!

    Here in Support we're not able to write specific custom code, but we have a few members here in the Community who are good at this type of thing. I'll see if I can track somebody down for you. :)

Please sign in to leave a comment.

Powered by Zendesk