Changing field order in HC

70 コメント

  • Elizabeth Toy
    コメントアクション Permalink

    @Brad: I was frustrated by that too, so I modified the CSS to add some padding to the top of the field label. Worked beautifully!

     

    Here's what we have:

    .form-field label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    padding-top: 35px;
    }

     

    I also tightened up the help text underneath the label. Everything was looking a bit too spaced out. Here's that:

    .form-field p {
    color: #bebebe;
    font-size: 11px;
    margin-top: -4px;
    margin-bottom: 4px;
    }

     

    Hope that helps!

    4
  • Karl
    コメントアクション Permalink

    I'm amused at the fact Zendesk have not implemented functionality to rearrange these fields however they are themselves either using Javascript to rearrange their own ticket forms or have implemented misleading functionality that is not available to their customers by default. 

     

    3
  • Jessie Schutz
    コメントアクション Permalink

    Hey Antonio!

    It's not currently possible to move custom field above the system fields on your ticket forms, unless you implemented some JS code as described in this Community Tip.

    However, and this will be of interest to Arno as well, I spoke with the PM who's in charge of this part of the product, Kiran, and he said that his team is actually working on adding the ability to arrange fields however you want, regardless of whether they're custom or system fields. At this point, the reasoning behind that design choice is the lost to history, but we realize it's important functionality for many of our customers.

    So that's good news! We're still in the early stages of development on it, though, so I don't have any timeframes for completion to share or anything like that. But rest assured that we're on it, and we'll let you know when we get closer to the finish line!

    3
  • Elizabeth Toy
    コメントアクション Permalink

    @Brandon: are you swapping out the text "Type of Issue" and "Subject" to match the field labels on your own form?

    @Jill: Do you mean HC? It stands for Help Center. The JS (JavaScript) tab can be found here:

    2
  • Brill Wang
    コメントアクション Permalink

    @Brad

    I modified Andrea's code slightly so that there should now be a line break between Subject and the field above. Try this out! 

    // rearrange form fields
    $('#new_request.request-form label:contains("Type of issue")').parent().insertBefore('#new_request.request-form .form-field:has(label:contains("Subject"))');

    2
  • Au Finh Saechao
    コメントアクション Permalink

    Ran into the same problem too. Here's a simpler and lazy solution if all of your custom fields can go above the subject field. This method preserves the order of your custom fields as defined by your ticket forms. It works with conditional fields too.

    /* CSS to hide ticket form fields (except for ticket form dropdown) by default */
    #new_request .form-field:not(.request_ticket_form_id){
    display:none;
    }

    /* Javascript to rearrange fields */
    // rearrange custom ticket fields to go above system fields
    $('[class*="request_custom_fields_"]').insertBefore('.request_subject');
    // after rearranging, display all ticket fields
    $('#new_request .form-field:not(.request_ticket_form_id)').show();

    Works pretty well for us :D

    2
  • Nicola Carraro
    コメントアクション Permalink

    @Andrea: I can't get this to work. I have a custom dropdown list that I want to put right before the subject but it won't move.

    I'm using multiple forms and multiple organization.

    Here's my setup

    I'd rather delete the field from the form that leave it there, so any help would be greatly appreciated

    Here is the image at full res  https://www.dropbox.com/s/d68jfep7l37iljo/2015-07-28_11h10_48.jpg?dl=0

     

    1
  • Andrea Saez
    コメントアクション Permalink

    Ciao Nicola,

    You're using single quotes instead of double quotes.

    It should be: ("Per quale...") and ("Soggetto")

    :)

    1
  • Andrea Saez
    コメントアクション Permalink

    @Nicola

    Just caught the error. You're putting it at the end of the JS page, but you're not calling the document. Put it right under the first line :

    $(document).ready(function() {

     

    Then it will work.

    1
  • Elizabeth Toy
    コメントアクション Permalink

    @Matthieu you should be able to just use two copies of the code. Change "Type of Issue" to "Field 1" in one and "Field 2" in the other.

    1
  • Aren Marcoosi
    コメントアクション Permalink

    Hello,

    I am using Au Finh Saechao code and got all the fields to move above the subject line but for some reason all my conditional fields are showing. Here is my a screenshot of the code and a link to the ticket form. Any help is appreciated.

    Link to form: https://skylineinternal.zendesk.com/hc/en-us/requests/new?ticket_form_id=692627

    1
  • Au Finh Saechao
    コメントアクション Permalink

    Hi Aren,

    Thanks for sharing a link to your hc.  My example assumed that there are multiple forms. Since your page already filters in for a specific form, you'll want to hide all form fields except for your main dropdown, which I'm assuming is RateLock Desk Support.  

    In this case, replace .request_ticket_form_id in both your css and js with .request_custom_fields_80965048 , which is the css class specified for the RateLock Desk Support dropdown.

    I think that should do the trick!

    Au Finh

    1
  • Arno N
    コメントアクション Permalink

    Dear Zendesk, why is this not a standard feature, why do we have to mess with JS and CSS in order to rearrange our forms??

    1
  • Jessie Schutz
    コメントアクション Permalink

    Thanks for the tip, Andrea!

    0
  • Andrea Saez
    コメントアクション Permalink

    =D

     

    0
  • Andrea Saez
    コメントアクション Permalink

    Karl,

    Hm, I think that's a whole other level of making the fields dynamic and not entirely sure it is doable, especially if you are working with multiple forms. You've given me something to think about :P

    0
  • Randy Peach
    コメントアクション Permalink

    Thanks for the tip, Andrea! Made my day!

    0
  • Andrea Saez
    コメントアクション Permalink

    You're welcome @Randy! :)

    0
  • Nicola Carraro
    コメントアクション Permalink

    @Andrea: you're right. I tried both single and double quote.

    No matter which one I choose, it still didn't work.

    0
  • Andrea Saez
    コメントアクション Permalink

    @Nicola,

    Which template are you using?

    Make sure that the element is indeed called new_request.request-form

    It might be different depending on the template.

    0
  • Nicola Carraro
    コメントアクション Permalink

    @Andrea: I'm using a slightly modified Humble Squid (just a few css font tweaks and some code to hide forms based on organization (https://support.zendesk.com/hc/en-us/articles/204579603)

    I've checked the page code and form name looks identical to yours (see screenshot)

     

     

    0
  • Nicola Carraro
    コメントアクション Permalink

    Got it!

    Can this be used to move just any field around?

     

    0
  • Andrea Saez
    コメントアクション Permalink

    As long as you have the correct string, it should certainly work :)

    0
  • Nicola Carraro
    コメントアクション Permalink

    This should be definitely built into the product!

    Way much better now!

    Thanks so much for your help.

    0
  • Andrea Saez
    コメントアクション Permalink

    You're welcome!

    0
  • Jessie Schutz
    コメントアクション Permalink

    I love it when a plan comes together! :D Thanks, Andrea, for troubleshooting and helping out, and hooray, Nicola, for perservering! 

    0
  • Nicola Carraro
    コメントアクション Permalink

    not strictly connected to this article, but not possibile before:

    I Just removed the subject from the new request page (no need to deactivate the field, you just don't enable it for end users on the ticket field configuration).

    This way I can guide users with a dropdown field and leave the description for further details.

    From my experience, subject is 100% of the times poorly written, while description contains the relevant informations.

    When you remove the subject, ZD uses the description istead so that, on the agent interface, you get a meaningful subject instead of "problem", "help", etc..

    Only downside is that, without the subject, you loose the "auto-suggestion" feature of HC on the ticket page.

    0
  • Andrea Saez
    コメントアクション Permalink

    That's probably linked to the Subject itself, not to the JS being applied. The auto suggestion is linked to the subject, and subject is a default field that comes with the system

    0
  • Nicola Carraro
    コメントアクション Permalink

    @Andrea: didn't mean it was due to the JS being applied.

    Would be great if we could hide the subject with some JS (not via the ticket field visibility) and populate it with the description from the dropdown. 

    That way we'd have meaningful subject + autosuggestion (provided ZD is able to read from a hidden field)

    But this is out of the scope of this article so I'd rather not digress.

    0
  • Brad Johnson
    コメントアクション Permalink

    @Andrea: This is great and did exactly what we needed!  However the only issue I'm having now is the Subject field is not putting an extra line break in between it and one of the custom fields that is above it.  I've tried adding both a <br /> tag and \n but neither work.  Any thoughts?

    0

ログインしてコメントを残してください。

Powered by Zendesk