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

Return to top

60 Comments

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

    Dave Armlin – Checkout the latest comment here for a code sample.

    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
  • 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
  • Dave Smith

    Hi Ruddy,

    Thanks for getting back to me. I can confirm that my theme is indeed API v2.

    I have the various JQuery libraries referenced in the document_head.hbs file:

    ...and the rest laid out exactly as you have specified in my script.js file:

    ...but it still doesn't appear to be working. The Form listed to hide, still shows in the dropdown of a user in the "Davetopia" organisation. Am I missing something?

    Thanks for all the help.

    0
  • Jacob Hill

    Is there any way that the organization condition can be checked from the server, opposed to using client-side JavaScript?

    0
  • Julien Maneyrol

    Hi !

    I'm no specialist either, but I think I can answer to some extent.

    >I see people talking about JQUERY and VanillaJS and I'll be honest, I have no idea what that means or the differences. So, my (hopefully) very simple question is; why doesn't my code work?

    Actually, this is the root cause of your problem: basically, JQUERY is a JavaScript library which allows simplified code (see https://www.w3schools.com/jquery/jquery_intro.asp), and your code seems to be using exactly this.

    However, since API v2, the JQUERY library is no longer available by default with Zendesk Theme - so you either need to translate your code into plain Javascript (a.k.a VanillaJS) or enable the JQUERY library - you should find instructions in this article: https://support.zendesk.com/hc/en-us/articles/4408829274906-Importing-or-upgrading-jQuery

    0
  • Adam

    Hey Brandon,

    I needed to do a similar thing with one of our forms in the Help Center as we only wanted to show it to logged in users with a specific tag.

    Zendesk helped by mentioning to use {#if signed_in}} {{/if}} around the form on the new request page.

    You could put these around each form list you wish to hide from anon users.

        {{#if signed_in}}
            <li class="hufItem blocks-item new-request topics-item">
             <a href="https://<your org>.zendesk.com/hc/en-us/requests/new?ticket_form_id=<form ID>" class="blocks-item-link">
                 <img class="sectionIcon" src="{{asset 'noun-calendar-1988585.png'}}" />
                 <h4 class="blocks-item-title">
                 <form Name>
                 </h4>
               <p class="blocks-item-description"><Form description></p>
               </a>
          </li>
    {{/if}}


    I then used this code snippet in the script along with the recommendation in this post to restrict the form to users with this specific tag. By adding the class "hufItem" to the form list.

    if (HelpCenter.user.tags != "huf"){
    $("li.hufItem").remove();
    }

    All up this hid the form from anon users and to specific users with the tag "huf"

    0
  • Dave Smith

    Ruddy, you star!

    That worked a treat! Thank you so much.

    0
  • Dave Dyson
    Zendesk Community Manager
    Hi Dave,
     
    Have you tried importing jQuery using these instructions? Importing or upgrading jQuery
    0
  • Noelle Cheng

    Hi Tipene Hughes!

    I did have keyframes spelled right and I also do have the curly closing bracket in there. But the code is still not working. As for console errors, this is what I see.

    0
  • Dave Smith

    Hello everyone,

    Please bear with me here, as coding is not my forte in any way, so I'm looking for as simple answer as possible.

    So, running on Zendesk's original post, I have taken the code and added to script.js:

    $(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 !== "Davetopia"){
     $("#4414080754962").remove();
     } 
     
     //reserve space for additional organizations 
     }
     
     });
     });
     }
     if (i > 10){
     clearInterval(checkExist);
     }
     }, 100);
    });

    However, this just does not work. I've checked the obvious things, like the Form ID being correct and that the user I'm signed in as, is indeed a member of the "Davetopia" organisation.
    However, the Form in question fails to hide and still shows in the dropdown.

    I see people talking about JQUERY and VanillaJS and I'll be honest, I have no idea what that means or the differences. So, my (hopefully) very simple question is; why doesn't my code work?

    Thanks everyone, sorry for being a bit of a ditz here!

     

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

    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
  • 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
  • Dave Smith

    Thank you for this Julien,

    I have navigated to the site provided in the link you passed across and installed:

    v3.6.0
    v2.2.4
    v1.12.4

    ...but my question is, what code is my formula above written in? After installing those 3 versions, it still is not working? I can't help but feel I'm missing something obvious, I just don't know what it is.

    Thanks.

    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, 

    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
  • Andrea Rochira

    Hi Adam,

    Thank you for your feedback!

    Actually, our Zendesk instance is closed to our internal users and they are all authenticated through our IdP.

    In your case, any new unregistered (anonymous) user doesn't have any tag applied, therefore, there's surely no tag that can be evaluated at the time of their first ticket submission. That's why, I guess, my snippet cannot filter the ticket forms for them. I wonder, though, if that's exactly what we need to evaluate. 

    You may edit the snippet to use a "no tag" condition, something like, "IF the array of the current user's tags is empty (or null), then show only specific forms" (never tested this with anonymous users, just brainstorming). OR, you might want to take a look at the Show Self API, which applies only to anonymous users, maybe you can leverage it to determine if the user visiting your HelpCenter is an anonymous one and hide your forms accordingly.

    Another approach, although I don't have a way to really test this as well, could be to use the Show Self API above and then lookup for the user ID using the Show User API to really determine if the user is anonymous or not. 

    I'm sorry I cannot be more helpful than that. Feel free to share your findings. 

    0
  • Adam

    Hi Jaïs Pingouroux

    Thank you for your support in here I've just been reading through.

    Do you know if this is possible to hide an element and form in the Help Center based on organization tags instead of the organization name?

    We'd like to hide a form and its tile for customers who are paid only and would invision that they would have the org tag "paid_account".

    Secondly, your last comment here. I want to confirm that this would only be available on API V1 of the help center not version 2.

    We are currently on V1

    0
  • Brandon Jones

    Hoping this is a quick question.  How do you restrict anonymous users and users not in an org from viewing specific forms without restricting them from still being able to submit a request? I have four forms I want to restrict and have this as my code but not sure how to stop anon users from viewing.

     

    document.addEventListener('DOMContentLoaded', 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 !== "Test Org"){
                  $("#Form_ID").hide();
                  $("#Form_ID").hide();
                  $("#Form_ID").hide();
                  $("#Form_ID").hide();
                  }
                }
            });
          });
          
        }
      if (i > 10){
        clearInterval(checkExist);
      }
      }, 100);
    0
  • John DiGregorio

    I have 2 forms on my community - I would like customers with the tag of yes to get one form and customers without yes to get another..  I found old code from this post and tried modifying it but it didn't work.   We are on version 2 of the API - any help would be greatly appreciated

     

    // hide form for certain users
      $(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].tags.includes("yes"){
     $("1900000890833").remove();
     } 

    0
  • Tipene Hughes
    Zendesk Developer Advocacy

    Hey Noelle Cheng,

    Are you seeing any console errors relating to your code? You can check this by using the keyboard shortcuts cmd + option + J on mac or ctrl + shift + J on windows. 

    Yes, the @keyframes should be in the style.css file. I noticed a couple of small typos in that piece of code. Can you confirm that the first @keyframes block has an "e" in the word "keyframes" in your help center code and that the display: none code block has a closing curly bracket?

    Thanks!

    Tipene

    0
  • Shahid Iqbal

    $(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 !== "i9 Parent group"){
     $("#5249881213199").remove();
     } 
    if (HelpCenter.user.organizations[c].name = "i9 Parent group"){
     $("#900001336043").remove();
     } 
       
     //reserve space for additional organizations 
     }
     
     });
     });
     }
     if (i > 10){
     clearInterval(checkExist);
     }
     }, 100);
    });

     

    I tried to insert this code bottom of script.js but it doesnot work. I want the user with organization 'i9 Parent group' can see and fill only form id 5249881213199 and the others which are not with this organization can see and fill only 900001336043.

    But its not working is there anything wrong?

     

     

    0
  • Ruddy DEROSIERS

    Dave Smith

    Is your theme in API v2 ?

    In your document_head.hbs :

    And in your script.js put your code after "document.addEventListener('DOMContentLoaded', function() {"

    without "$(window).on('load', function() {"

    Juste like this 

    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
  • Emmanuelle Garel-Galais

    Thank you both, I've made it!

    Thanks!

    0
  • 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
  • Julien Maneyrol

    Your code uses JQUERY, as far as I know.

    If you have JQUERY libs enabled, I can't really say why it doesn't work - this is beyond my knowledge and skills :(

    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

Please sign in to leave a comment.

Powered by Zendesk