Hiding attachment/system fields on ticket form

30 Comments

  • Wes Drury
    Comment actions Permalink

    @Rosie - Sorry for the delayed response but yes it is possible with some coding to hide those fields.

    I've added the code here.

    Copy the code to your JS tab right under the $(.document.ready) function.

    6
  • Rosie
    Comment actions Permalink

    Thank you Wes! Does this not error because they are 'required' fields? Is there a way to make them auto-fill with some sort of content?

    0
  • Wes Drury
    Comment actions Permalink

    @Rosie - I'm not sure about making them auto-fill with content.  You would have to do more coding to make that happen.

    0
  • Eric Alderman
    Comment actions Permalink

    I tried adding the following lines, but it didn't work:

    $('.request_subject').value = 'Custom Field Value';
    $('.request_description').value = 'Custom Field Value';

    When I submit, still get an error that the fields can't be blank.  Any idea why?

     

    0
  • Kristin Woodard
    Comment actions Permalink

    Wes, that is perfect! For those who might be trying to hide a required system field, remember that you will need to give it a value before hiding it! 

    $('#request_subject').val("some subject here");
    $('.request_subject').hide();
    $('#request_description').val("some description here");
    $('.request_description').hide();
    $('.form-field label:contains("Attachments")').hide();
    $('#upload-dropzone').hide();

    0
  • Wes Drury
    Comment actions Permalink

    @Kristin - Glad to hear you found the code useful.  Enjoy and best of luck with your Help Center modifications.

    0
  • Jessie Schutz
    Comment actions Permalink

    Awesome!, Kristin, thanks for coming back to share what worked for you. :)

    0
  • Kristin Woodard
    Comment actions Permalink

    @Wes - I am trying to go a step further, and set the subject line using one of the field values in the form on submit.

    So far, I have gotten it to change the subject on submit, but I cannot get it to use the field value.

    Please keep in mind, I am new to JS and may just have a formatting issue.


    $(document).submit(function() {
    if (window.location.href == "https://southlandind.zendesk.com/hc/en-us/requests/new?preview_as_role=end_user&ticket_form_id=302947")
    {
    var subjectstring1 = ('#request_custom_fields_41430027').val;
    $('#request_subject').val("Equipment Request Recieved" + " - " + subjectstring1);
    }
    });

    The bold areas in the above isn't correct. I am sure it is within this portion as everything works well when I set

    subjectstring1 = "test";

    Do you have any idea what I did wrong?

    0
  • Kristin Woodard
    Comment actions Permalink

    I ended up getting this to work using the following:

    //Form Submit
    $(document).submit(function() {
    //only run on specific form
    if (window.location.href == "https://southlandind.zendesk.com/hc/en-us/requests/new?preview_as_role=end_user&ticket_form_id=302947")
    {
    //set a string to equal the custom field value
    var subjectstring1 = $("#request_custom_fields_41430027").val();
    //set subject to equal a string including field value string
    $('#request_subject').val("Equipment Request Recieved" + " - " + subjectstring1);
    }
    });
    //End Form Submit

     

    With Wes's info, plus this new find, I can "set", "hide" and "get the value" of custom fields in request forms. It almost feels like a super power.

    1
  • Wes Drury
    Comment actions Permalink

    @Kristin - Thanks for coming back and sharing the code as I'm sure others will find it useful.

    0
  • Christopher J. Crocker
    Comment actions Permalink

    @Kristin, thank you for the info you provided on 9/19/16

    I do have a follow up question.  

    Do I just add  your //Form Submit section in it's entirety to the bottom of my JS code or is there some place else this needs to be?

    In my JS tab I do not see another //Form Submit section so I am wondering how forms are submitted without this? 

     

    0
  • Kristin Woodard
    Comment actions Permalink

    @ Christopher - the document submit is already part of the process coded by the Zendesk Platform, you are basically just "hijacking it" and performing an action when the process kicks off, just as you are when you add anything to the document ready process.

    0
  • Jennifer Rowe
    Comment actions Permalink

    Kristin, thanks for supplying the code and for helping out!

    0
  • Christopher J. Crocker
    Comment actions Permalink

    A follow up question....

    I have a custom ticket field which is a multiline text field.

    I would like to set a default value for this field so that when a form is submitted the field will be set with the text value which would be an address such as:

    "Company XYZ
    123 First St
    Austin, TX 78703"

    How can I set the value of a custom field which needs new line chars?

     

    I tried using the following in the JS in Help Center...

     $('#request_customField("custom_field_45353987")').val("Multi-Line Text Here");

    How can I set the text to appear on multiple lines in the field?

    0
  • Kristin Woodard
    Comment actions Permalink

    Chris, 

    You can use /n (New Line) in your string. Please see the "try it" at W3 Schools (my favorite resource) http://www.w3schools.com/js/js_strings.asp the section on "escape characters" should help.

    a more detailed example of multi line is in stack overflow: http://stackoverflow.com/questions/878573/java-multiline-string

    Here, the string is composed of several lines using /n.

     I have used newline in one of my strings here:  

    var descriptionstring1;
    descriptionstring1 = '"Request Details: \n';

    Then later in the sumbit function, added additional values to the string with more new line escapes:

    descriptionstring1 = descriptionstring1 + FieldLable + " :: "+ FieldValue + "\n"+ "\n";

    0
  • Caio Braga
    Comment actions Permalink

    Hey! Does anyone know if that works for the web widget as well?

    1
  • Jessie Schutz
    Comment actions Permalink

    Hi Caio! Welcome to the Community!

    I don't think this exact code will work for the web widget, but we actually have and article that outlines exactly how to do it! You can find it here: Advanced customization of your Web Widget

    Let us know if you need anything else!

    0
  • Caio Braga
    Comment actions Permalink

    thanks for the response, Jessie. What about the subject and description fields? these are the ones I'm struggling with. 

     

    0
  • Connor Anderson
    Comment actions Permalink

    Is this still the best solution for hiding system fields on user facing forms?

    0
  • Jessie Schutz
    Comment actions Permalink

    Hey Caio! Sorry if I misunderstood your question.

    Hiding subject and description fields requires some advanced coding. One of our moderators provided a link with some code to help get folks started with it. Now, this code is just for the Help Center in general, so you'd probably need to make some adjustments to the code in order for it to render correctly. If you run into any issues, let us know and we'll try to find someone here in the Community to help you out!

    0
  • Bertrand Bazin
    Comment actions Permalink

    Hello guys,

    Thanks for all these answers. I replicated what you wrote but I still see my ticket field "Subject"

    Here is the beginning of the tab JS:

    $(document).ready(function() {

    //hide system fields based on ticket forms(change subdomain and form id)
    if (window.location.href == "https://support.blooms.fr/hc/en-us/requests/new?ticket_form_id=251769") {
    $('#request_subject').val("some subject here");
    $('.request_subject').hide()
    }

    Did I do something wrong ? Many thanks in advance

     

     

    0
  • Huong-Ly Dang
    Comment actions Permalink

    Hi everyone,

     

    Thank you for the useful article. How about hiding the CCs field ?

    I have tried the following but it is not working:

     

    if (window.location.href == "https://e-education.zendesk.com/hc/en-us/requests/new?ticket_form_id=250925") {
    $('.request_collaborators_').hide();
    }

    0
  • Trapta
    Comment actions Permalink

    @Huong-Ly Dang,

    Try using this code -

    if (window.location.href == "https://e-education.zendesk.com/hc/en-us/requests/new?ticket_form_id=250925") {
    $('.request_cc_emails').hide();
    }

    Let me know how it goes for you.

    Thanks

    0
  • Trapta
    Comment actions Permalink

    @Bertrand Bazin,

    Try using this code -

    $(document).ready(function() {
    if (window.location.href == "https://support.blooms.fr/hc/fr/requests/new?ticket_form_id=251769") { 
      $('.request_subject').hide()
    }
    });

    Let me know how it goes for you.

    Thanks

    0
  • Huong-Ly Dang
    Comment actions Permalink

    hi Trapta, thank you very much !

    I have figured this out and it works well :)

    $('.request_cc_emails').hide();

    Mix up with the field id before.

     

    0
  • Jennifer Zou
    Comment actions Permalink

    Anyone knows how to make a optional field required based on the selection of dropdown field?  Something like: 

    if ($('.request_some_custom_fieldA').val() == "SW"){

    $('.request_some_custom_fieldB').required() = true;

    }
    0
  • Ed Hass
    Comment actions Permalink

    How do you get to the JS tab, I cant see it on the admin page

    0
  • Jessie Schutz
    Comment actions Permalink

    Hi Edward! Welcome to the Community!

    You can access the code for your Help Center by going to your Guide Admin tools (upper right corner of the screen when you're in your Help Center). Click the eye icon in the sidebar that appears on the left side of your screen; this will take you to the Theming Center. Click on the theme you wish to edit, then click the button with the three dots at the top of the sidebar and click edit code. This will show you a list of any assets you've uploaded to your Help Center, as well as your HTML templates and you JS and CSS scrips. Scroll to the bottom and click on script.js.

    Bear in mind that the ability to customize your Help Center code is only available if you're on Guide Professional. If you're on Guide Lite you won't be able to customize your theme.

    0
  • Mostafa khalil
    Comment actions Permalink

    An alternate nice approach is documented at this KB article.

    0
  • Nicole - Community Manager
    Comment actions Permalink

    Thanks for pointing that out, Mostafa. 

    0

Please sign in to leave a comment.

Powered by Zendesk