Hiding a Form From All Users Except Member of an Organization
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?
-
Have you inserted the script in your document.head ?
also
-
Thanks I will give this a try later today
-
Hi I'm confused. This isn't working for me either and Sparkly's explanation is not clear for me. Where do we put Kay's code?
I used Ruddy DEROSIERS code. This is what I have now. Can someone help?? :(
This is the current version I'm on.
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.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" 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".
-
So I've implemented this and it works great for signed-in users. With that said, if the user is not signed in - the form isn't hidden. Any answers on how I can prevent anonymous users from seeing the particular form too?
-
We just don't allow user that are not signed in to submit tickets. Do you need users that are not logged in to be able to submit tickets?
-
I never told you to do anything. I told you what we are doing, and I asked if there was a reason that you needed anonymous users to submit a ticket.
So, I'm not really sure what you mean by "You're incorrect...". There isn't anything to be correct or incorrect about in my reply.
-
Hey - I've tried the code shared by Sparkly but the form still appears for anonymous and end-users. I have copied it at the bottom of script.js like this filling our organization name and Form ID - Any help would be appreciated
-
Hi Lea. The image of your code is pretty small, so I can't really read it (old eyes). But I can tell you that the solution we got to work was using the code below at the top of the scripts.js file. Just after the section establishing the "var" set.
Try moving your code to the top of the script and see what happens. Also, if you post your code as a code block. The community can take a look at it, and give you feedback if there's an issue there.
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"){
$("#{FORMID}").show();
}
else{$("#{FORMID}").hide()} -
Hello there,
So i've tried Sparkly code but when I paste it on the script.js, both my forms are still shown, and the dropdown menu when clicking the name on the top right of the page doesn't work anymore.
Any help is very appreciated.. :D
What I have pasted here below.
FNC is one organization that I want members not to be able to see form ID 12017343045010
// 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 === 'FNC');
if (!isPartOfOrg) {
// replace the ID here with your Form ID
el.onclick = () => document.getElementById('12017343045010').remove();
}
})
});
}
} -
Hi Max,
I know that Sparkly insists that their code is working on multiple platforms. But no one on this thread seems to be able to make it work.
What I did finally get to work is the code you see below, inserted at the top of the script.js file. You can find the code block of it in this thread just above your post.
-
Hello Damon Maranya thank you for your reply
I got the code, although it's still not working for me. The dropdown menu when you click the name on the top-right not working anymore, and still showing both forms to end user.
I'm on APi v3, does that change something ?
Here is what I have :
Thank you for your help anyway
-
Unfortunately, I am not really that good with JScript. I mostly cobbled this together from bits and pieces I found around the web with a few tips from users on this form.
But I do see one difference between the two code sets that might be the culprit. I can't say for sure because I'm still very much a cargo-cult coder.
I noticed that the form ID in the code we are running does not include the curly brackets that your code does.
So, in our code a line containing the ID looks like this;
else{$("#360003482932").hide()}
Whereas in your code the same line looks like this;
else{$("#{360003482932}").hide()}
I don't know enough to say that it's wrong. It's just the only difference I've been able to spot between the two sets so far.
Edit - I just asked ChatGPT (it's my coding buddy) and it said the following.
"This code includes a syntax error. The expression"#{360003482932}"
inside the selector doesn't make sense in this context, as the#
symbol is used to reference an id in a jQuery selector, and the braces ({}
) and the numeric value inside them do not form a valid id or expression in this context." -
Hello there,
So I have been able to make it work with the help of our best coding buddy, chatGPT. I am sharing here the way I've done it for rookies like me.
The code is based on that Zendesk article.
1- Importing jQuery library
Copy/paste the following script in document_heads.hbs template
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
2- Edit the JavaScript
Copy/paste the code in script.js
The behaviour expected on my side is described as follows, but it can work for more forms and/or more organizations.
I have 2 forms, named here formIDexternal and formIDinternal.
Some organisations defined as orgsInternal have to see one form, the formIDinternal
The rest of organizations, defined as orgsExternal has to see the other form, formIDexternalIn the variables section (var) define and list your forms and your organizations.
In my case I want Org1, Org2 and Org3 to only be able to see form id 987654321 .
Then add your if statements. It should work without any problem !
$(document).ready(function() {
var formIDexternal = 123456789; // Change this to the form ID you wish to remove (external)
var formIDinternal = 987654321 // Change this to the form ID you wish to remove (internal)
var orgsInternal = ["Org1", "Org2", "Org3"]; //Type here your organizations name
var orgsExternal = ["Org4", "Org5", "Org6"]; //Type here your organizations name
var userOrgs = window.HelpCenter.user.organizations;
var userOrgNames = userOrgs.map(org => org.name);if (userOrgNames.some(orgName => orgsInternal.includes(orgName))) {
// If the user belongs to one of the organization Internal specified, remove the form option from the dropdown
$('#request_issue_type_select option[value="' + formIDexternal + '"]').remove();
$('.nesty-panel').on('DOMNodeInserted', function(e) {
$(this).children('ul').children().remove('#' + formIDexternal);
});
}
if (userOrgNames.some(orgName => orgsExternal.includes(orgName))) {
// If the user belongs to one of the organization External specified, remove the form option from the dropdown
$('#request_issue_type_select option[value="' + formIDinternal + '"]').remove();
$('.nesty-panel').on('DOMNodeInserted', function(e) {
$(this).children('ul').children().remove('#' + formIDinternal);
});
}
});
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.
43 Kommentare