• Paul H

  • April 25, 2023 13:24

  Hi Ifra Saqlain

  Would you know if this is possible, you were very knowledgeable about hiding forms in the past. 

• Ifra Saqlain

  • April 26, 2023 19:38
  • Edited

  Community Moderator

  

  

  Hi Paul H,

  Every dropdown field have options and those options have their own unique IDs. Use the dropdown option ID and check the user-tag and user role and then hide that field:

  if (HelpCenter.user.tags=="USER_TAG" && HelpCenter.user.role=="anonymous"){
   document.querySelector("#student_assistant").style.display="none";
  }
  
  
  OR
  
  
  if (HelpCenter.user.tags=="USER_TAG"){
   document.querySelector("#student_assistant").style.display="none";
  }
  
  if (HelpCenter.user.role=="anonymous"){
   document.querySelector("#student_assistant").style.display="none";
  }
  
  

   

  Here comes your user tag - USER_TAG

  #student_assistant - This is my option ID, replace it with your option ID

   

  If you wanna hide Option A then that option id is option_a, if you wanna hide Option B so option id is option_b

   

  Try this and let me know :)

  Thanks

   

• Paul H

  • April 27, 2023 17:59

  Hi Ifra Saqlain

  I tried that and it didn't work for me, I was just trying from anonymous user view and it wasn't hiding the field value in the dropdown. 

  In my field values I am trying to hide the Demo one, 

  

  if (HelpCenter.user.role=="anonymous"){
   document.querySelector("#demo").style.display="none";
  }

• Ifra Saqlain

  • April 28, 2023 07:38

  Community Moderator

  

  

  Hi Paul,

  The code:

  if (HelpCenter.user.role=="anonymous"){
   document.querySelector("#demo").style.display="none";
  }

   

  It should be field id: #demo, which you wanna hide from anonymous users.

   

• Paul H

  • April 28, 2023 08:22

  Hi Ifra Saqlain

  Im not trying to hide the field here, only one of the field values, in this case that value is demo and its tag is demo.

  So when you say it should be field id: demo should the field ID be incorporated in this code somewhere, I have tried many alternatives to this code snippet but cant get it working.  

• Ifra Saqlain

  • April 28, 2023 08:40
  • Edited

  Community Moderator

  

  

  I know you are hiding an option of a field, 

   #demo should be the id of that option because id is always unique.

   

  See, this is an option of a dropdown field, it's value is Student Assistant Fund Request and it's id is student_assistant_fund_request

  <li tabindex="-1" id="student_assistant_fund_request" role="option" aria-selected="false">
    Student Assistant Fund Request
  </li>

   

  So code would be:

  if (HelpCenter.user.role=="anonymous"){
   document.querySelector("#student_assistant_fund_request").style.display="none";
  }

   

  This worked for me so I'm sharing with you.

• Paul H

  • April 28, 2023 09:19

  Hi Ifra Saqlain

  Thanks for coming back so fast, I know what you are saying now thanks for clearing that up, I don't think this will work for me in that case as I don't have the same HTML code, it only shows me the field ID for the whole field and doesn't contain a separate ID for its values which is annoying. That's why I was using the tag originally. We don't have access in Zendesk to edit this HTML on specific fields as they are all created under the Zendesk admin portal. 

  <div class="form-field string  required  request_custom_fields_6090963939740" >       <label id="request_custom_fields_6090963939740_label" for="request_custom_fields_6090963939740">Request Type</label>       <input type="hidden" name="request[custom_fields][6090963939740]" id="request_custom_fields_6090963939740" value="standard_request_student_support" autocomplete="off" data-tagger="[{&quot;label&quot;:&quot;-&quot;,&quot;value&quot;:&quot;&quot;},{&quot;label&quot;:&quot;Standard Request&quot;,&quot;value&quot;: &quot;standard_request_student_support&quot;,&quot;selected&quot;:true},{&quot;label&quot;:&quot;Demo&quot;,&quot;value&quot;:&quot;demo&quot;}]" aria-required="true" aria-describedby="request_custom_fields_6090963939740_hint" aria-labelledby="request_custom_fields_6090963939740_label" />              <p id="request_custom_fields_6090963939740_hint">You are submitting a standard Student Support request. If you are looking to submit a specific Student Support Form please select it from the dropdown. </p>   </div>

• Ifra Saqlain

  • April 28, 2023 11:15
  • Edited

  Community Moderator

  

  

  see;

  // For First Option
  
  if (HelpCenter.user.role=="anonymous"){
   document.getElementById("standard_request_student_support").style.display="none";
  }
  
  
  // For Demo Option
  
  if (HelpCenter.user.role=="anonymous"){
   document.getElementById("demo").style.display="none";
  }
  
  

   

  It shold work.

  Check your console, is there any issue?

• Paul H

  • May 03, 2023 14:52
  • Edited

  Hi  Ifra Saqlain

  I still cant get it working, I went back to your original idea:

  Can I ask, im adding this in the script, do i need to add in any code before the if query? Function or For?

  if (HelpCenter.user.role=="anonymous"){
   document.querySelector("#demo_field").style.display="none";
  }

• Paul H

  • May 04, 2023 10:26
  • Edited

  Hi Ifra Saqlain

  Just to let you know I figured it out and am now hiding on of the options.

  I found a similar forum about this issue here and was able to use this to create my own working piece of code. 

  ---------------------------

  For anyone coming along now just to be clear here's what I done to get it working. 

  In the script.js file of my theme go to the bottom of the page and add. 

  // For this funtion to work i needed to call it in my script.js file first.
    $(document).ready(function() {
      hideDemoOptionForAnonymous();
    });
  
  // This will hide the option with the id demo_field if the user is anonymous.
  function hideDemoOptionForAnonymous() {
    if (HelpCenter.user.role === "anonymous") {
      Array.prototype.forEach.call(document.querySelectorAll(".nesty-panel"), function(tagsElement) {
        if (tagsElement !== null) {
          var fieldDisableTagsObserver = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
              if (mutation.type == 'childList') {
                if (mutation.addedNodes.length >= 1) {
                  for (var i = 0; i < mutation.addedNodes.length; i++) {
                    var demoFieldToRemove = document.querySelector("li#standard_request");
                    if (demoFieldToRemove !== null) {
                      demoFieldToRemove.remove();
                    }
                  }
                }
              }
            });
          });
          fieldDisableTagsObserver.observe(tagsElement, {childList: true});
        }
      });
    }
  }

  Another thing to note:

  In order to find the option id's you need to enable emulate a focused page in the console, you can google this or

  open console in chrome

  click the three dots top right

  more tools - rendering

  click on emulate a focused page

  

  once you turn on emulate you can open the dropdown and it will stay open so you can hoover over the options and read the id. 

• Ifra Saqlain

  • May 05, 2023 10:07
  • Edited

  Community Moderator

  

  

  Great!  Thanks Paul H, You shared it with us and happy to hear that you solved your query.

Please sign in to leave a comment.