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

Return to top

60 Comments

  • Eversys SA

    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? 

    7
  • 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?

    3
  • 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
  • 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
  • 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
  • Jaïs Pingouroux

    Hi Adam,

    Yes it's possible to use organization tags instead of name.

    The following command displays the whole HelpCenter object in the console:

    // Display HelpCenter variable
    console.log(HelpCenter);

    In this object, "user.organizations" is an array. For each organization, you have access to the "name" and "tags" properties.

    As to your second question, this code only works in V1 because you need the JQuery dependency, which is not available in V2. Should you want this code to work in V2, you'd either have to adapt it or inject the JQuery dependence.

     

    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

    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

    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
  • Sam
    Community Moderator

    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?

    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
  • Noelle Cheng

    Hi I'm trying to hide forms from all people outside of an organization. Can someone help??

    :( 

    My current version is:

    Theme version 2.15.0
    Templating API v2
     

     

    For each section (in BOLD) I put the following:

    SCRIPT.JS section

      //Hide Form
      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 ==="Main Company"){
         $("#7286425102107").show();
         } 

    else {

    $("#7286425102107").hide();

    }
         
         //reserve space for additional organizations 
         }
         
         });
         });
         }
         if (i > 10){
         clearInterval(checkExist);
         }
         }, 100);

     

    DOCUMENT_HEAD.HBS Section

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

     

    STYLE.CSS section

    @keyframs animSlideTop {
      0% { -webkit-transform:translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
      100% { -webkit-transform:translate3d(0,0,0); transform: translate3d(0,0,0); }


    #7286425102107{
          display: none;

     

     

    Is @keyframes supposed to be in the Style.css? I tried it both ways, with and without. Either way the form still shows for people outside of the organization "Main Company".

    0
  • Andrea Rochira

    Great article, although it doesn't show how to hide the same forms from the web widget. Also, I don't get why it provides a jQuery snippet since it's not natively supported in HelpCenter V2.

    The feedback given by other users to this article, helped me figure out how to hide based on user tags, here is a working template in Vanilla JS, which is supported in HelpCenter V1 and V2 (you just need to replace the "TICKET_FORM_ID" and the user tags you need to target). And it takes care of the web widget as well.

    In my use case, I needed to grant access to specific forms only to users from specific departments ("people" and "franchising_operations"). I left the tags in there to make it more simple to understand.

    Feel free to suggest improvements to my code.

    document.addEventListener("DOMContentLoaded", function() {

    // uncomment if needed for debugging
    // console.log(HelpCenter.user.tags);
    // console.log(document.querySelector("a.nesty-input"));

    // retrieve the tags associated to the logged-on user
    var tags = HelpCenter.user.tags;
    // check if the array of tags includes "people", meaning that it's an HR user
    var isPeople = tags.includes("people");
    // check if the array of tags includes "franchising_operations", meaning that it's a Franchise user
    var isFranchisingOperations = tags.includes("franchising_operations");
    // console.log(isFranchisingOperations);

    // loop through the tags
    //tags.forEach(function(tag) {
    // console.log(tag);

    // run this block only if the form drop-down selector is found
    if(document.querySelector("a.nesty-input")){

    // if user has not the "people" tag, hide the forms limited to HR
    if (!isPeople){
    // Remove the forms from the drop-down selector
    document.querySelector('#request_issue_type_select option[value="TICKET_FORM_ID_ONE"]').remove();
    document.querySelector('#request_issue_type_select option[value="TICKET_FORM_ID_TWO"]').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_ONE"]').remove();})

    document.querySelector('.nesty-panel').addEventListener('DOMNodeInserted', function(event) {
    event.target.querySelector('li[id="TICKET_FORM_ID_TWO"]').remove();})

    }

    // if user has not the "franchise" tag, hide the forms limited to Franchise
    if(!isFranchisingOperations){
    // Remove the forms from the drop-down selector
    document.querySelector('#request_issue_type_select option[value="TICKET_FORM_ID_THREE"]').remove();
    document.querySelector('#request_issue_type_select option[value="TICKET_FORM_ID_FOUR"]').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="1900000037625"]').remove();})
    document.querySelector('.nesty-panel').addEventListener('DOMNodeInserted', function(event) {
    event.target.querySelector('li[id="1900000039445"]').remove(); })

    }

    }

    // WEB WIDGET settings
    // empty array for API response
    var data = {};

    // let's prep for the the API call
    // create a http request object
    var request = new XMLHttpRequest();

    // connect and retrieve all the form IDs
    request.open('GET','https://mycompany.zendesk.com/api/v2/ticket_forms.json?active=true&end_user_visible=true');

    // if the connection is succesfull, then go ahead
    request.onload = function () {

    // parse the JSON string returned
    data = JSON.parse(request.responseText);

    // print the parsed data into the console (for debugging purpose)
    // console.log(data);

    // call the function responsible to overwrite the default webwidget settings
    setIds(data);
    }

    request.send();

    // array to hold list of forms allowed
    var forms = [];

    function setIds(ids){

    // console.log(ids.ticket_forms.length);

    // loop though the forms
    for (var i = 0; i < ids.ticket_forms.length; i++) {

    // uncomment for debugging purpose if needed
    // console.log("Counter i is: "+i);
    // console.log("Number of forms from API: "+ids.ticket_forms.length);
    // console.log("Length of forms array: "+ forms.length);
    // console.log("Start loop with ticket n°: "+ids.ticket_forms[i].id);

    // call the allowForm function and hold the boolean value
    var allow = allowForm(tags,ids.ticket_forms[i].id);

    // if the form is allowed, add it to the array
    if(allow){

    forms.push({id : ids.ticket_forms[i].id });

    }else{

    continue;
    }
    }

    // console.log("Loop exited")
    // console.log(forms);

    // set new list of forms within the web widget
    zE('webWidget', 'updateSettings', {
    webWidget: {
    contactForm: {
    ticketForms: forms
    }
    }
    });

    }

    function allowForm(userTags,formID){

    // HR only allowed
    if(formID == "TICKET_FORM_ID_ONE"){
    if(tags.includes("people")){
    return true;
    }else{
    return false;
    }
    }

    if(formID == "TICKET_FORM_ID_TWO"){
    if(tags.includes("people")){
    return true;
    }else{
    return false;
    }
    }

    // Franchise only allowed
    if(formID == "TICKET_FORM_ID_THREE"){
    if(tags.includes("franchising_operations")){
    return true;
    }else{
    return false
    }
    }

    if(formID == "TICKET_FORM_ID_FOUR"){
    // console.log("Franchise second form")
    if(tags.includes("franchising_operations")){
    return true;
    }else{
    return false
    }
    }

    // catch all condition for all other forms
    if(typeof formID === 'number' ){
    // console.log("Form for all")
    return true;
    }

    }
    });
    0
  • Jaïs Pingouroux

    Hi John,

    May it be that you moved to templating API v2 on which jquery is no longer available?

    I'm still using API v1 and it all works fine.

     

    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
  • 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
  • Robin Wiggins

    Is it possible to hide it for users who are not signed in as well? 

    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
  • Ruddy DEROSIERS

    John DiGregorio if you want to use this script in V2 API you have to :

    - insert link to jquery in your document_head

    - remove first line $(window).on('load......

    -> Look at my answer on the other post https://support.zendesk.com/hc/fr/community/posts/4572609525786-Hiding-a-Form-From-All-Users-Except-Member-of-an-Organization?page=2#comments

    0
  • Adam

    Hi Andrea Rochira

    Thank you for your updated code snippet, this has worked perfectly for our needs in testing so far.

    I have a follow-up question you might be able to help me answer.

    Q: Have you been able to hide the form from anonymous end-users?

    We currently allow any end-user to submit a ticket request to us, and forcing a user to login using the helper {{#if signed_in}} is preventing our anonymous end-users from submitting a ticket. 

    Any thoughts you might have would be great.

    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
  • Poppy Allen

    Hi all. 

    I recently implemented this solution but it's populated a drop down list across the board despite both organisations only having one form.

    Does anyone know what edits to make to ensure there is no drop down and instead, users are automatically redirected to the only form that is visible?

    0
  • Dave Armlin

    Has anyone gotten a version of the above working against Templating API v2 ? 

    0
  • Ruddy DEROSIERS

    if you want to hide your form for Davetopia's users, try to modify this

    by this : 

    if (Helpcenter.user.organizations[c].name === "Davetopia")

    0
  • Tipene Hughes
    Zendesk Developer Advocacy

    Thanks for clarifying that for me, Noelle Cheng!

    I'm going to pull this in to a ticket so we can look at your code in a bit more detail. You should see an email coming through from me shortly.

    Thanks!

    Tipene

    0
  • John DiGregorio

    Thanks - I will give this a try

    0
  • DJ Buenavista Jr.
    Zendesk Customer Care
    Hi Jacob,
     
    Thank you for reaching out to Zendesk Support.
     
    In regards to your question, I don't see any other way to do the following method. Also worth noting is that the following method mentioned here is for instructinal purposes only and Zendesk doesn't support or guarantee the code. 
     
    Thank you!
     
     
    Kind regards,
    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
  • John

    HI.  Regarding the first post with the code for hiding forms.  Been using it for over a year.  Just noticed after the changes ZD made (to the admin center) that it doesn't work anymore.  Appears they may have broken something.

    Opened a ticket with them - has anybody else using this code had issues with it suddenly not working?  I have not upgraded our HC - still on 1.7.  Is there a new way to accomplish this?

    Thanks in advance.

     

     

    0
  • Josie Shum

    Does anyone know if there's a way to do the opposite? I'd like to hide specific ticket forms from End Users without an Organization.

    0

Please sign in to leave a comment.

Powered by Zendesk