I have develop LWC component which is normally used by normal users. In that lightning web component button is there as below.
<lightning-button slot="actions" label="Deactivate" onclick={DeactivateProcess}>
</lightning-button>
The above button should be only be show to System Admin Profile and Business Admin Profile. How to show the button only to those two Profiles without using record types or different page layouts?
Please review @Sergio Alcocer's comment - if you are planning on hiding the entire component you are better off using Lightning Page Builder and using filter's based on current user's profile.
If not, here are the pieces you need to get started (I just wrote this off the top off my head and haven't tested the code, but this is close to what you need):
You can use the disabled button attribute to disable a button.
Conditionally show button based on isButtonDisabled flag:
<!-- Somewhere in your LWC Template file -->
<lightning-button
slot="actions"
label="Deactivate"
onclick={DeactivateProcess}
disabled={isButtonDisabled}
</lightning-button>
Retrieve user info from backend and set disabled flag based on current profile:
// LWC JS File - shortened for brevity
import { LightningElement, track } from 'lwc';
import getUserInfo from '@salesforce/apex/Classname.getUserInfo';
export default class ButtonComponent extends LightningElement {
@track isButtonDisabled = false; // show button by default
@wire(getUserInfo, {})
userData({ error, data }) {
if(data) {
if(data.Profile.Name !== "System Administrator") {
this.isButtonDisabled = true;
}
} else if(error) {
// error handling
console.error(error.body.message);
}
}
}
Get current user info:
// Apex Controller
public class ClassName {
@AuraEnabled(cacheable=true)
public static user getUserInfo() {
String userId = UserInfo.getUserId(); // current user
return [SELECT ID, FirstName, LastName, Name, Title, Profile.Name, Email From User WHERE ID =: userId LIMIT 1];
}
}
On the assumption that this button is just a small part of a larger component where all profiles see the other parts you have not shown, you need to make the button rendering conditional:
<template if:true={canDeactivate}>
<lightning-button slot="actions" label="Deactivate" onclick={DeactivateProcess}>
</lightning-button>
</template>
This is using a property from your LWC called canDeactivate which is only set true when the user should have this facility.
Now, just how you set this property is what you need to decide. Many people would simply check the profile name and set the property true for those specific profiles. This, for me, is a hack. It is fragile and the code must be updated to add or remove profile options.
The approach I recommend is to add a custom permission, e.g. CanDeactivateXyz (where Xyz is the name of whatever it is the button allows to be deactivated) and simply check if the user has this permission. You add this permission to the profiles (or permission sets or groups) you want.
LWC even has a really simple way to check for the user having a custom permission, as covered in the documentation:
import hasPermission from '@salesforce/customPermission/CanDeactivateXyz';
...
export default class MyLWC extends LightningElement {
...
canDeactivate = hasPermission;
UPDATE:
If this is a complete component just for the button, this approach is still valid though you need to make sure the component remains visible to avoid strange spacing issues in the lightning page when the user cannot deactivate. This can be addressed using a leaf out of @ThomasWinter's suggestion by simply updating the entire template to be:
<template>
<lightning-button slot="actions" label="Deactivate"
onclick={DeactivateProcess} disabled={cannotDeactivate}>
</lightning-button>
</template>
And flipping the permission:
export default class MyLWC extends LightningElement {
...
cannotDeactivate = !hasPermission;
This approach ensures the button remains visible but is disabled for users without the required permission. Rather strangely, the disabled attribute is not covered in the standard documentation for this component, but it does work.
