Hiding a Form From All Users Except Member of an Organization

Answered

45 Comments

  • Ruddy DEROSIERS

    John DiGregorio

    Have you inserted the script in your document.head ?

    also

    0
  • John DiGregorio

    Thanks I will give this a try later today

     

    0
  • Noelle Cheng

    Hi I'm confused. This isn't working for me either and Kay'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".

     

    0
  • Brittany Mandel

    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?

    0
  • Damon Maranya

    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?

    -1
  • Damon Maranya

    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.

    0
  • Léa-Jeanne

    Hey - I've tried the code shared by Kay 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

    0
  • Damon Maranya

    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()}
    0
  • Max

    Hello there,

    So i've tried Kay 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();
          }
        })
        });
     }
    }

    0
  • Damon Maranya

    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.

    0
  • Max

    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

    0
  • Damon Maranya

    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."

    0
  • Max

    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, formIDexternal

    In 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);
          });
        }
      });

     

    0
  • Noelle Cheng

    hi Ruddy DEROSIERS & Kay,

     

    I know this thread is old but wondering if you guys would be able to assist me with this code. I'm looking to hide my form from everyone in an org except for a group and a couple select people. I added these individuals to their own "Organization" but technically they are both in this newly formed group and the excluded group. I need to keep them in the excluded group as that contains our company as a whole and drives our company only portal. Is there a way to do this? Thanks!

     

    0
  • Brandon Tidd
    User Group Leader Community Moderator
    Zendesk Luminary
    The Humblident Award - 2021

    Hey Noelle Cheng -

    You could try reversing your conditional logic.  In other words

    if Org B - Hide
    Else
         if Org A - Show

    I haven't tested this, but Boolean logic says if they are in Org B, the form will be hidden and the else statement won't fire, thus suppressing for everyone who is cross-pollinated.  For members who are only in Org A, the If statement will fail and show the form.  Let me know if that works!

    Brandon

    0

Please sign in to leave a comment.

Powered by Zendesk