Can you hide a field or part of a unique field from specific users based on Tags?

Hi @ifra

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

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

Hi @ifra

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";
}

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.

Hi @ifra

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.  

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.

Hi @ifra

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>

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?

Hi  @ifra

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";
}

Hi @ifra

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. 

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