Using promoted articles as dropdown field options

Answered

5 Comments

  • Thomas Verschoren
    Comment actions Permalink

    Hey,

     

    This is certainly doable:

    First of all:

    1. Create a textfield in Zendesk Support and add it to your form. Make sure to make it User-Editable and copy the ID of the custom created field.
    2. Then add the code below to the new_request.hbs file below the default content.
    3. Replace the custom_fields_ID with your own copied ID (change it three lines)
    <script>
    document.addEventListener('DOMContentLoaded', function() {
    $('.request_custom_fields_360005064379').hide();
    $( '<label>Promoted articles</label><select id="promotedfield">{{#each promoted_articles}}<option value="{{title}}">{{title}}</option>{{/each}}</select>').insertAfter(".request_custom_fields_360005064379");

    $("#promotedfield").change(function () {
    $('#request_custom_fields_360005064379').val(this.value);
    });
    });
    </script>

    This code

    • Hides the text field
    • Adds a dropdown with all promoted articles
    • FIlls the text fields with whatever the end-user picks in the dropdown
    • That text field gets send to agents along with the rest of your form.

     

    Thie (hidden) text field and the dropdown.

    2
  • Liam
    Comment actions Permalink

    Thomas, Thanks for this it works really well, Do you happen to know how we could add an option at the end for 'Other' which when selected would show a new free text field for and queries that don't relate to just the promoted articles?

    We currently use the condidtional fields app to do this, but it seems this would not work until the form is submited/refreshed.

    Thanks again  :) 

    0
  • Thomas Verschoren
    Comment actions Permalink

    You’re welcome!

    As for the other field:

    One approach could be

    • Add a new textfield for the Promoted Articles >> Other and make it user editable but not required. Note the ID of the field
    • Hide it by default (add this below the other hide code)
        $('.request_custom_fields_360005064379').hide();	
    • Add this to the existing code just before the word </select>
      <option value=“other”>Other</option>
    • Upon dropdown change, check if the value of the dropdown equals “other”, show the field. Note, that here also you’ll need to add the new ID:
      if (this.value == “other”){$('.request_custom_fields_360005064379').show();}
    0
  • Liam
    Comment actions Permalink

    Hi Thomas, thanks for replying again but I can't get the other part to work.

    Whereabouts in the code do I actually place this bit?

    if (this.value == “other”){$('.request_custom_fields_360005064379').show();}

    Thanks

    0
  • Thomas Verschoren
    Comment actions Permalink

    Here you go:

    <script>
    document.addEventListener('DOMContentLoaded', function() {
    $('.request_custom_fields_360005064379').hide();  //ID for the promted article dropdown value
    $('.request_custom_fields_360005064379').hide();  //IUD for the other option field value
      $( '<label>Promoted articles</label><select id="promotedfield">{{#each promoted_articles}}<option value="{{title}}">{{title}}</option>{{/each}}<option value=“other”>Other</option>
    </select>').insertAfter(".request_custom_fields_360005064379");

    $("#promotedfield").change(function () {
    $('#request_custom_fields_360005064379').val(this.value);
    if (this.value == “other”){$('.request_custom_fields_360005064379').show();}
    });
    });
    </script>
    0

Please sign in to leave a comment.

Powered by Zendesk