Recent searches


No recent searches

Hiding a Form From All Users Except Member of an Organization

Answered


Posted May 02, 2022

We need to hide one form in the Help Center from all of our Zendesk users, except for the members of one organization.

I've found articles on hiding a form from everyone in an organization (https://support.zendesk.com/hc/en-us/articles/4408886229146-How-can-I-hide-ticket-forms-based-on-a-user-s-organization-)  and hiding a form from the drop-down menu in the Help Center (https://support.zendesk.com/hc/en-us/community/posts/4411892827674-How-to-hide-dropdown-field-value-in-the-request-form-for-End-User-).

But I can't seem to get the pieces to fit together. Anyone know how we would do this?


1

47

47 comments

image avatar

Stephen Belleau

Zendesk LuminaryCommunity 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


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


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


image avatar

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


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


image avatar

Kay

Community Moderator

Damon, could you share the code you currently have?

0


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


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


image avatar

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


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


Hi Damon Maranya,

try to replace the line 489 with this : 

$("360003482932").hide();

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

0


image avatar

Kay

Community Moderator

Damon Maranya the code from the screenshot :)

0


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


image avatar

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


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


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


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


Damon Maranya

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

0


or perhaps modify your code with something like :

if organization.name === "Managers" 

{ form.show }

else { form.hide }

0


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


 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


image avatar

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


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


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

else {

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

}

 

0


image avatar

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


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


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


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


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


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.

Didn't find what you're looking for?

New post