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

Return to top

27 Comments

  • Ruddy DEROSIERS

    Hi,

    Does anyone have updated this in VanillaJs instead of Jquery ?

    My code worked fine in V1 with Jquery but not in V2 (with JQUERY in document_head).

    thanks a lot

    1
  • Ron de Vries

    Hi, 

    Maybe just a shot in the dark but... does anyone know how to show the comments only to a particular User Segment or Organisation? Or perhaps on a specific tag of that organisation or end-user. Background of this request is that we only want our own employees to comment on articles (for now). 

    Can I alternate one of the codes in the comments of this article or would you suggest to use one of the built in Helpers? It would concer the <div class="article-comments" id="article-comments"> section. 

    Any help is much appreciated! 

    Regards, 

    Ron

    0
  • Jaïs Pingouroux

    Hi @...

    Based on what has been posted before, you want to add the following code to your template:

    In style.css:

    #article-comments{
    display: none;
    }

    In script.js:

    // Check organization
    var i = 0;
    for (var c in HelpCenter.user.organizations) {
    if (HelpCenter.user.organizations[c].tags.includes("YOUR_ORG_TAG")){
    $("#article-comments").show();
    }
    }

    It's untested but it should work.

    1
  • Ron de Vries

    HI @...

    Thanks! I will give it a try. Since we are using the Single Sign On as well I will also consult with our Dev Team.

    I will get back on it once we have it up and running so other members of the community can benefit as well.

    Regards,

    Ron

    0
  • Jaïs Pingouroux

    @... SSO is not really a problem, as your organization's tags are still defined in Zendesk (admin>people>organizations). Alternatively you could use your organization's name instead of a tag if it's better for you and if you only have to deal with one single entity.

    0
  • Ron de Vries

    Hi @...

    Thanks for jumping in. The .css works just fine however the JS code doesn't render as expected. I did assign the tag (comments_visible) to the organisation within ZenDesk. Maybe you're able to assist with the code for checking on the organisation name as well? 

    Am I right that the code should be under the $(document).ready(function() { function? 

    Just to be complete, this is the code I tried and didn't work out:

    $(document).ready(function() {
    // Check organization
    var i = 0;
    for (var c in HelpCenter.user.organizations) {
    if (HelpCenter.user.organizations[c].tags.includes("comments_visible")){
    $("#article-comments").show();
    }
    }

    And this is the organisation with the tag: 

    0
  • Jaïs Pingouroux

    Hi @...

    Your code should be in the script.js file of your template, you probably already have some code in here.

    If you want to make sure that you're running in your loop, you can add this line of code before in the For loop right before the if statement.

    console.log(HelpCenter.user.organizations[c].tags);

    You'll see the result in the console tab of your web browser.

    Are you testing the code with a logged in user of this organization?

    0
  • Ron de Vries

    Hi @...

    My mistake; I placed to code after the $(document).ready(function(){. Guess I was too hasty. Nevertheless, it works perfect now with the code you provided. 

    Many thanks!! 

    Regards,

    Ron

    0
  • Conor Makowski

    I've been testing Ryan Mayes's solution for this issue (see code block below), but hit a snag that I haven't seen addressed here. Here's what Ryan shared:

    $(window).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() {
                        //Create dictionary of available forms
                        var forms = {}
                        var options = document.getElementById("request_issue_type_select").getElementsByTagName("option");
                        for (i = 1; i < options.length; i++) {
                            forms[options[i].text] = options[i].value;
                        };
                        //Iterate through each form 
                        Object.keys(forms).forEach(function(item){
                            formTag = item.split(" - ")[0].toLowerCase();
                            //Remove forms that do not meet user criteria
                            if (!(~HelpCenter.user.tags.indexOf(formTag))){
                                $(("#"+forms[item])).remove();
    //Add this to hide form "tags" from user view
    }else{
    $(("#"+forms[item])).text(item.split(" - ")[1]);
    } }); }); }); } if (i > 10){ clearInterval(checkExist); } }, 100); });

    Now here's my problem: when looking at the dropdown when this code is present, everything looks fine. For example, a form titled "test_tag - Ticket Form 1" will appear as "Ticket Form 1". This is exactly what I want to see in the dropdown.

    Unfortunately, once I click on "Ticket Form 1" and the actual form loads, the selection in the dropdown field shows the form's name as "test_tag - Ticket Form 1". Clicking on the dropdown again shows the available forms as desired (no tags visible), but whenever one is selected it appears with the tag. 

    Here are the ticket forms as they appear in the dropdown:

    And here's what it looks like when I select one:

    Any ideas on how to resolve this issue? We're using some really long and ugly tags on our side and I can't have them showing up in the form name. 

    0
  • 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 Heunen

    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.boerger

    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

    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 @...,

    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 @...!

    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 @...

    $(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 @...!

    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 @...

    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

    @... @...

    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