How to hide element by user role and radio button selected?

I need to show the fields in yellow under Details section only if user logged in is CEO or Project Manager AND MRIWA College Member selected is College or Board Member

I am struggling to get this working using JavaScript

Any assistance will be very much appreciated.

Thank you advanced

Hi @sahiraz

This can be accomplished by duplicating each component on the same page but assigning it a specific role.

Click on the row “carrot” then select "Edit"

Then click on “Specific Logged In User Roles” and select which ever role you desire to view the component

When building the component you add the fields you want visible depending on the role select.

Alternatively, you can create a totally separate “Layout” whereby specific roles would be automatically logged into only view the specific pages assigned to their respective Layout. I am not sure how you have your application setup but these are two options for consideration.

Example of different Layouts

Hope this helps,

Thank you, I will give it a try. My only concern is that it is an Edit Form and I don’t want my user having to click the Save button twice to update the contact details of one record.

I achieved this using javascript.

1 Like

Hi @sahiraz

Happy to hear you were able to solve this. Would you be so kind as to post the code you used so that others may benefit as well?

Hi @tim.young, here it is:

Scenario: To hide fields on the page based on user role and user input

The current logged in user role is displayed in the Layout part of the app.

On the page where the fields need to be hidden/shown add Javascript below, replace the element id’s with yours.

function checkUserRole() 
    var x = document.getElementById('x_element_layout_3_10'); //User role   

if (x.innerHTML.indexOf('CEO') > -1 || x.innerHTML.indexOf('Finance') > -1)
    // alert('show');  
    $('#field_block_field_538').css('display','display'); //date of birthday        
    // alert('hide');      
    $('#field_block_field_538').css('display','none'); //date of birthday
window.setTimeout(checkUserRole, 100);


Hope this helps!

1 Like