How can I hide ticket forms based on a user's organization?

Return to top
Have more questions? Submit a request

108 Comments

  • Jordan Dayton

    We would like to make the "Submit a request" link/button in the top navigation only be visible to users of several segments that we can easily define and update with new segments, over time.

    Any suggestions or snippets that y'all could share with us?

    0
  • Justin

    Has anyone been able to get this to work? I have tried a few solutions from the comments but not having any luck. 

    Our goal is to HIDE a single form from ALL users, except those with a specific tag. Speaking of tags, is the tag based on user tag? Org tag? User segment name?

    What's the best way to accomplish this?

    2
  • Julien Maneyrol

    I know of an easy way to hide specific ticket forms from anyone. I use this method because I want some forms to be only available from specific web widgets, while not using brands:

    $(document).ready(function() {
    $('#request_issue_type_selectoption[value="TICKET_FORM_ID1"]').remove();
    $('#request_issue_type_selectoption[value="TICKET_FORM_ID2"]').remove();
    $('.nesty-panel').on('DOMNodeInserted', function(e) {
    $('#TICKET_FORM_ID1').remove();
    $('#TICKET_FORM_ID2').remove();
    });
    });

    However, this uses JQuery. I would like to convert to VanillaJS but I have failed so far. Does anyone know how to translate this into VanillaJS?

    1
  • Julien Maneyrol

    I have managed to "translate" the first part, but I'm still stuck with the $(this).children('ul').children().remove('#TICKET_FORM_ID') JQuery which looks too "complex" to be easily translated. So the code looks like this now:

    // Hide PaaS and SaaS ticket forms. Written in JQuery, should be converted to VanillaJS later. Adapted from https://support.zendesk.com/hc/en-us/articles/206977397#Option_1
    document.addEventListener("DOMContentLoaded", function() {
    // Remove the forms from the dropdown selector
    document.querySelector('#request_issue_type_select option[value="360000198537"]').remove();
    document.querySelector('#request_issue_type_select option[value="360000208678"]').remove();
    document.querySelector('#request_issue_type_select option[value="360000295658"]').remove();
    // Remove the options from the nesty-input after it's been created.
    document.querySelector('.nesty-panel').addEventListener('DOMNodeInserted', function(event) {
    $(this).children('ul').children().remove('#360000198537');
    $(this).children('ul').children().remove('#360000208678');
    $(this).children('ul').children().remove('#360000295658');
    });
    });

    It works, but it is very ugly since it mixes Vanilla JS and JQuery.
    Help on making it 100% Vanilla JS would be very appreciated.

    1
  • Kay
    Community Moderator

    Hi Julien 👋

    Almost there.. this should be the final part to remove jQuery completely

    document.querySelector('.nesty-panel').addEventListener('DOMNodeInserted', function(event) {
    event.target.querySelector('li[id="360000198537"]').remove();
    event.target.querySelector('li[id="360000208678"]').remove();
    event.target.querySelector('li[id="360000295658"]').remove();
    });
    1
  • Julien Maneyrol

    Hi Kay,

    Wow, you just saved my day (and nights)! This works exactly the way I intend to! Thanks a lot :-)

    For the record, here is a "template" snippet if anyone wishes to do the same:

    // Hide specific ticket forms.
    document.addEventListener("DOMContentLoaded", function() {
    // Remove the forms from the drop-down selector
    document.querySelector('#request_issue_type_select option[value="TICKET_FORM_ID"]').remove();
    // Remove the options from the nesty-input after it's been created.
    document.querySelector('.nesty-panel').addEventListener('DOMNodeInserted', function(event) {
    event.target.querySelector('li[id="TICKET_FORM_ID"]').remove();
    });
    });

    Thanks again to Kay for the help!

    Regards

    1
  • Chris

    Hi all,

    It would be great to have this as native function. Being able to hide or show a form based on organisation would great to have without going to the code. Is there any plans for this? 

    1
  • Saeleum Kim

    Hi Robbert, 

    I think I don't have ticket form ID. I can have one ticket form as I am on Support Professional. I do really need to hide the ticket form based on user's organization. How can I achieve this without ticket form ID? or how can I find the ticket form ID? 

    0
  • Samuel Mosher

    Are there plans to introduce native access controls to ticket forms? Using jQuery is fine on the surface (we use it currently!) but it's really just security through obscurity. Anyone can access the developer console in their browser, find the form ID, and then plug it into the URL. The same would be true with hiding and replacing the form picker, as the form selector is built into the {{request_form}} helper.

    This is especially problematic for those who might have "unadvertised processes" in their org that necessitate ticket forms - how do you keep them from finding out, except build the form outside Zendesk?

    0
  • Emmanuelle Garel-Galais

    Hi there!

    After having been reading over almost all comments, I didn't get the feeling I found the answer I needed, so here is my issue : I have 4 organizations and I want 3 of them (X, Y & Z) to see only one ticket form and the last one (A) to see another ticket form. When I tested it with only one organization it worked perfectly (after having added a Jquery in document_head.hbs). Now, here is my script for the 4 organizations and unfortunately all organizations see now both ticket forms... :

    $(window).on('load', function() {
    var i = 0;
    var checkExist = setInterval(function() {
    i++;
    if ($("a.nesty-input").length){
    clearInterval(checkExist);
    $("a.nesty-input").each(function() {
    $(this).bind( "click", function() {
    for (var c in HelpCenter.user.organizations) {
    if (HelpCenter.user.organizations[c].name !== "X"){
    $("#360001704540").remove();
    }

    if (HelpCenter.user.organizations[c].name !== "Y"){
     $("#360001704540").remove();
     }
       
     if (HelpCenter.user.organizations[c].name !== "Z"){
     $("#360001704540").remove();
     }  
       
     if (HelpCenter.user.organizations[c].name !== "A"){
     $("#360001714479").remove();
    }

    });
    });
    }
    if (i > 10){
    clearInterval(checkExist);
    }
    }, 100);
    });

    What am I doing wrong please? :-(

    0
  • Jaïs Pingouroux

    Hello Emmanuelle Garel-Galais,

    Considering that the code iterates on the organizations of a user, you may want to review your conditional logic here.

    var remove_form1 = true;
    var remove_form2 = true;
    for (var c in HelpCenter.user.organizations) {
    if (["X", "Y", "Z"].includes(HelpCenter.user.organizations[c].name)){
    remove_form1 = false;
    }

    if (HelpCenter.user.organizations[c].name == "A"){
    remove_form2 = false;
    }
    }

    if (remove_form1) {
    $(YOUR_FORM_1_ID).remove();
    }

    if (remove_form2) {
    $(YOUR_FORM_2_ID).remove();
    }
    0
  • Emmanuelle Garel-Galais

    Hello Jaïs Pingouroux!

    Thank you so much for your quick answer!

    I have thus replaced my previous code by this one as you suggested but it still doesn't work (I have the log out back, this is already one good thing though!), I still have both forms for both users linked to those organizations... :

    var remove_form1 = true;
    var remove_form2 = true;
    for (var c in HelpCenter.user.organizations) {
    if (["X", "Y", "Z"].includes(HelpCenter.user.organizations[c].name)){
    remove_form1 = false;
    }

    if (HelpCenter.user.organizations[c].name == "A"){
    remove_form2 = false;
     }
       
     }

    if (remove_form1) {
    $(360001704540).remove();
     }  
       
     if (remove_form2) {
    $(360001714479).remove();
    }

     

    Still don't understand why :-(

    0
  • Jaïs Pingouroux

    Hello Emmanuelle Garel-Galais

    $(360001704540).remove();  is not a valid jquery selector.

    You want to do $("#360001704540").remove();  instead.

    Same for the other form.

    If it's still doesnt work, can you please add a console.log(HelpCenter.user.organizations[c].name) as the first instruction in your for loop?

    Also console.log the inside of your ifs to make sure they are triggered.

    0
  • Emmanuelle Garel-Galais

    Morning Jaïs Pingouroux!

    Thank you very much for your follow-up! Nevertheless, none of your suggestions is working here : 

     

    var remove_360001704540 = true;
    var remove_360001714479 = true;
    for (var c in HelpCenter.user.organizations) {
    if (["X", "Y", "Z"].includesconsole.log(HelpCenter.user.organizations[c].name)){
    remove_360001704540 = false;
    }

    if console.log(HelpCenter.user.organizations[c].name == "A"){
    remove_360001714479 = false;
     }
       
     }

    if console.log(remove_360001704540) {
    $("#360001704540").remove();
     }  
       
     if console.log(remove_360001714479) {
    $("#360001714479").remove();
    }

    When I add the console.log, I loose my possibility to log out again...

    I thought it was easy to do but in fact no haha!

     

     

    0
  • Jaïs Pingouroux

    Hi Emmanuelle Garel-Galais

    Are you sure of your form IDs ?

    If your helpcenter is online, can you share the URL?

    Here's the code with appropriate logs. Please provide the logs displayed in your browser's console tab inspector.

    var remove_form1 = true;
    var remove_form2 = true;
    for (var c in HelpCenter.user.organizations) {
    console.log(HelpCenter.user.organizations[c].name);
    if (["X", "Y", "Z"].includes(HelpCenter.user.organizations[c].name)){
    remove_form1 = false;
    console.log("remove_form1 false");
    }

    if (HelpCenter.user.organizations[c].name == "A"){
    remove_form2 = false;
    console.log("remove_form2 false");
     }
     }

    if (remove_form1) {
    console.log("Removing form 1");
    $("#360001704540").remove();
    }  
       
    if (remove_form2) {
    console.log("Removing form 2");
    $("#360001714479").remove();
    }
    0
  • Serge Bertaina Dubois

    Hi all!


    Thank you for this information and the leads it gave me!


    I have worked on this basis to hide some forms from the selection list.
    But not linked to the organization, but to a list defined in the Theme settings.

    For it :

    - Update of manifest.json:

    {
    "label": "hide_forms",
    "variables": [
    {
    "identifier": "hide_forms_list",
    "type": "text",
    "description": "hide_forms_description",
    "label": "hide_forms_label",
    "value": "ID1, ID2, ID3 ..."
    }
    ]
    }

    Change the IDn in "Value"
    Also remember to put your Languages ​​files in the Translate folder.

    Then in the template "new_request_page.hbs" '
    Add the following js code just after {{request_form wysiwyg = true}} :

    <script>
    $ (window) .on ('load', function () {
    var i = 0;
    var checkExist = setInterval (function () {
    i ++;
    if ($ ("a.nesty-input"). length) {
    clearInterval (checkExist);
    $ ("a.nesty-input"). each (function () {
    $ (this) .bind ("click", function () {
    var HIDE_FORMS_LISTE = '{{settings.hide_forms_list}}'. split (',');
    HIDE_FORMS_LISTE.forEach (function (cur_form_id) {
    //console.log('hide Form: '+ cur_form_id);
    $ ('#' + cur_form_id) .remove ();
    });
    });
    });
    }
    if (i> 10) {
    clearInterval (checkExist);
    }
    }, 100);
    });
    // End of Form deletion.
    </script>

    Note: Does not work in script.js, therefore necessarily in the new_request_page.hbs template.

    If that can help!

    Serge.

    0
  • Emmanuelle Garel-Galais

    Jaïs Pingouroux Serge Bertaina Dubois

    Thank you both, I've made it!

    Thanks!

    0
  • Amanda Gunn

    Hi,

    Is it possible to write something so that the Default form is the only form in the Help Center available to users?

    We have many forms that are specific to projects that are only seen to our users in the web widget, but when in the help center creating a follow up they can click to any of our project form types. We'd like all follow-ups to come in on the Default form and then the team can triage.

     

    Thanks!

    Amanda

    0

Please sign in to leave a comment.

Powered by Zendesk