How to Hide/Show HTML Button based on Users Profile

Question

I want to display HTML button to System admin and Super User. I have written the below code:

<apex:outputPanel rendered="{!isEditAllowed}" layout="none">
 <button type="button" onclick="uncheckCheckboxButton();" class="btn btn-primary btn-xs addCheckButton"  hidden="{!IF($Profile.Name =='System Administrator'||$Profile.Name =='Super User', false, true)}">Uncheck</button>
</apex:outputPanel>

but it does not hide/show the button based on profile. can someone tell what I am missing here.

Answer 1

You can simply use all the conditions in the single rendered attribute.

I thinkisEditAllowed value is not properly returned at your page. Thats why it is not getting rendered properly.

This code is working correctly at my DE.

<apex:outputPanel rendered="{!isEditAllowed && ($Profile.Name ='System Administrator' 
                   || $Profile.Name ='Super User')}" layout="none">
 <button type="button" onclick="uncheckCheckboxButton();" 
              class="btn btn-primary btn-xs addCheckButton"> Uncheck
 </button>
</apex:outputPanel>

Answer 2

You are having two rendered conditions one for output panel and again you are adding rendered condition for button, render out-panel only when user profile is system admin or other that will help you display button based on rendering condition you have added, also check what isEditAllowed is returning because this the primary condition for rendering the output-panel.

<apex:outputPanel rendered="{!userProfileName == $Label.Profile_SystemAdmin}"    layout="none">
    Your Button Code
</apex:outputPanel>

At Controller Side get set userProfileName Like follow which will return you current loggedin user profile.

//Variable to return current logged in User Profile
public String userProfileName {                                     
        get {
            return [
                    select Profile.Name
                    from User
                    where Id = :Userinfo.getUserId()
                   ].Profile.Name;
        }
    }