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

App Development
1

Hi
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

image
image1667Ă—838 43.5 KB

2

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"

Role-Component
Role-Component2640Ă—658 568 KB

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

Role-select component
Role-select component1390Ă—748 176 KB

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

layout
layout534Ă—1260 124 KB

Hope this helps,
Adam

3

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.

4

I achieved this using javascript.

1 Like
5

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?

6

Hi @tim.young, here it is:

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

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        
}
else
{
    // alert('hide');      
    $('#field_block_field_538').css('display','none'); //date of birthday
}
window.setTimeout(checkUserRole, 100);
}

TB.render('component_3',function(){
 checkUserRole();
});

Hope this helps!

1 Like