Hiding a Form From All Users Except Member of an Organization

33 Comments

  • Stephen Belleau
    Community Moderator

    Hey Damon Maranya - it looks like the first article you pointed to is doing what you want:

     if (HelpCenter.user.organizations[c].name !== "ZENDESK"){
    $("#TICKET_FORM_ID").remove();

    This code says "if they are not in this one specific org, then hide the form".

    If that's not working then let us know where you're getting stuck!

    1
  • Kay
    Community Moderator

    Hi Damon,

    May 12th, 2022 — For future people to read.
    On this date dropdown values for the request pages are not stored in the DOM, because of that, it's only possible to delete the values when someone clicks the dropdown.

    Solution
    Here is the clean solution. Please remove all the code (you added) from your current sample.
    It is Vanilla JS, jQuery free and not guestimating when elements are added to the DOM (no setIntervals).

    I verified that this works and added comments in the code below, what each step does.

    Don't forget to replace the form ID on this line.

    // function that waits for the element to be added to the DOM.
    function waitForElm(selector) {
        return new Promise(resolve => {
            if (document.querySelector(selector)) {
                return resolve(document.querySelector(selector));
            }

            const observer = new MutationObserver(mutations => {
                if (document.querySelector(selector)) {
                    resolve(document.querySelector(selector));
                    observer.disconnect();
                }
            });

            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        });
    }

    // native JS way of waiting for the DOM to be ready
    document.addEventListener('DOMContentLoaded', function() {
      // Only run this code on the new requests pages
     if (window.location.href.indexOf("/requests/new") > -1) {
       
      // now let's actually wait for the element to be added to the DOM
    waitForElm('.request_ticket_form_id .nesty-input').then((elm) => {
        // the elements are now added so we can start binding the deletion whenever the click happens
      document.querySelectorAll('.request_ticket_form_id .nesty-input').forEach((el) => {
          // now we can bind whenever someone clicks on the form input, to delete one of the forms
        // but only do this when the user is not part of organization
    // in this example the next line checks for the organization with name: Managers
          var isPartOfOrg = HelpCenter.user.organizations.find(o => o.name === 'Managers');
          if (!isPartOfOrg) {
    // replace the ID here with your Form ID
              el.onclick = () => document.getElementById('6092785826321').remove();
          }
        })
        });
     }
    }
    1
  • Damon Maranya

    Oh, okay. Thank you very much! I'll give it a try.

     

    I'm afraid I'm not very good at scripting and I'm genuinely terrible with Java.

    0
  • Damon Maranya

    Stephen Belleau I've added the code block from the first link to the script.js file just below the DCOM code block as well as at the end of the file and saved the changes. But neither location seems to be doing anything.

    The form in question is still visible to both my admin and non-admin test accounts. Neither of the test accounts are currently a member of the required organization.

    What am I missing here?

    0
  • Dan Cooper
    Community Moderator

    Hi Damon Maranya,

    Check out the How can I hide ticket forms based on a user's organization? article.  It has the code snippet Stephen posted above with some more details to walk you through this. The comments on these articles can sometimes be really helpful if you are trying to troubleshoot a specific setup as well.

    The example assumes you have jQuery which isn't included on newer themes from Zendesk by default, so checkout the Importing or upgrading jQuery article as well. 

    0
  • Damon Maranya

    This is still not working. I'm calling jquery in the document_head.hbs using the line below:

    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

    I've modified the code block to use the correct organization and form ID. But the form I am trying to hide is still visible for both test accounts regardless of organization membership.

    I've even converted the jquery code to standard js using an online converter but it's not working that way either.

    Is there a "So you Want to Modify Your Template", or "Template Editing for Dummies" page I can look at? Because I don't really understand what I am doing at the moment and I think that is the root of my problem.

     

    0
  • Kay
    Community Moderator

    Damon, could you share the code you currently have?

    0
  • Damon Maranya

    Kay

    Sure. The images below show the code I currently have in place, along with the file they each chunk of it is in.

     

     

    I'm a complete novice with JScript/JQuery. So any help you can give would be greatly appreciated.

    0
  • Damon Maranya

    KayDan CooperStephen Belleau

    This is what I've got. Can any of the JQuery experts here please tell me what I am missing or doing wrong?

    0
  • Kay
    Community Moderator

    Please copy the code here. I will double-check it and convert it to working JS (there's absolutely no need for jQuery here).

    Are you sure the user you test with is in the Organization with the name 'Managers'?

    0
  • Damon Maranya

    Hi Kay! Thanks for the reply. What code are you referring to? Please let me know if I'm just being slow here.

    The account I am testing with a is a basic user. It is currently in the Managers org, but I have been adding and removing it as I have been testing the code that I've borrowed and repurposed.

    The extent of my coding experience is some Powershell recently and a fair amount of Basic when I was a kid. So I apologize if I'm a bit dim at times.

    0
  • Ruddy DEROSIERS

    Hi Damon Maranya,

    try to replace the line 489 with this : 

    $("360003482932").hide();

    instead of $("360003482932").remove();

    0
  • Kay
    Community Moderator

    Damon Maranya the code from the screenshot :)

    0
  • Damon Maranya

    Thanks for the suggestion Rudy! I'll give it a try.

    I don't see a screenshot in your message Kay. Can you please report it?

    0
  • Kay
    Community Moderator

    Hi Damon,

    The code from your screenshot I meant. The hide/remove shouldn't make a difference. Both are valid functions.

    0
  • Ruddy DEROSIERS

    Hi Damon Maranya,

    i checked your code and i think i found your error.

    Try to remove lines 489 and 502

    Your code has to start with your var i=xxxxxxx and finish with },100);

    0
  • Damon Maranya

    I tried pulling lines 479 and 502. But the form is still visible in the pulldown menu.

    This is the current state of the code segment at the end of script.js now:

     

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

     

     

    Kay The code in the image is what is in place now, but it is not working.

    0
  • Damon Maranya

    I should add that because this is an active service desk I am working with a copy of the site template and the preview feature to test with.

    In theory that shouldn't make a difference. But it can be surprising how often theory and practice don't line up.

    0
  • Ruddy DEROSIERS

    Damon Maranya

    can you try tu put your code at the top avec your script.js, like this ?

    0
  • Ruddy DEROSIERS

    or perhaps modify your code with something like :

    if organization.name === "Managers" 

    { form.show }

    else { form.hide }

    0
  • Damon Maranya

    Moving the code to the top has removed the form from the list. But it's hidden from all users including members of the Managers organization.

    I'm going to give your second suggestion a try.

    Thanks very much for the help!

    0
  • Ruddy DEROSIERS

     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.substring(0,8) === "Managers"){
         $("#360003482932").show;
         } 

    else {

    $("#360003482932").hide;

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

    0
  • Damon Maranya

    No good. When I change it to show, else hide. It just shows the form to everyone regardless of group membership. It seems like the part that isn't working is detecting the organization. Because it hides the form when the "if (helpcenter..." line says to hide it. It just hides from everyone rather than just members of the non-manager organizations.

    0
  • Ruddy DEROSIERS

    sorry for the wrong answer, (); are missing behind the hide

    else {

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

    }

     

    0
  • Kay
    Community Moderator

    Hi Damon,

    The code I shared is working on multiple production Help Centers, the code from the article (whilst it also works) is heavily outdated and messy.

    It also looks like something get's lost in translation. In your comment, you mention Groups instead of Organizations. 
    Both the code from Ruddy and myself are checking specifically against Organizations.

    0
  • Damon Maranya

    The missing () at the end of the else hide function was it. Everything is working as expected now. Thank you very much for your help!

    Kay, I am going to make another template copy and try your code as well. Then I'll leave it up to those with a higher pay grade to decide which one we go with.

    Thank you both very much!

    0
  • Brandon Jones

    Hi I am completely lost here. I have the following code, trying to hide it from all users not a part of the org but it doesn't seem to work when I use the preview function. Can someone help point out what I'm doing wrong here? read through a lot of different help topics but still can't get it to work. I even have the code at the top of my script.js file. 

     

    // Restrict Coach only forms
    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.substring(0,8) === "Sounding Board Labs, Inc."){
         $("#5580887005723").show();
         } 

    else {

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

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

    0
  • Damon Maranya

    That code block is JQuerry. Which means you will need to include the JQuerry import in the Default_Head.hbs file and the tag in the script.cc file (they're in this post). Or you can try Kay's code which is standard JScript and does not require the additional code blocks.

    0
  • Brandon Jones

    Damon Maranya thanks very much! wasn't sure what to do with that but I'll follow your lead. I tried what Kay posted but using the preview that didn't seem to work. 

    0
  • John DiGregorio

    I am also trying to do this in v2 of the API - below is the code I added - I tried both remove and hide and nothing worked - any help would be greatly appreciated

    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();
     } 
     
     //reserve space for additional organizations 
     }
     
     });
     });
     }
     if (i > 10){
     clearInterval(checkExist);
     }
     }, 100);
    });

    0

Please sign in to leave a comment.

Powered by Zendesk