Check custom permission and user permission in Lightning web component

In this post, we will set visibility of an element in the Lightning web component. Before the Summer 2020 release, we had to query the custom permission using wired apex. But now we can access it directly in the lightning component with @salesforce/userPermission and @salesforce/customPermission APIs.

 

 

Firstly we need to import the static reference to the permissions like below.

Import User Permissions

import hasPermission from '@salesforce/userPermission/PermissionName';

Where PermissionName is the API name of the user permission.

Import Custom Permissions

import hasPermission from '@salesforce/customPermission/PermissionName';

The custom permission can contain the namespaces, this is needed if you are referring to the custom permission from the managed package. Use the below format to include the namespace.

import hasPermission from '@salesforce/customPermission/namespace__PermissionName';

Sample Code: check user permission in the lightning web component

In the below example we are checking if the user has View All Data permission.

JS Code

// myLwc.js
import { LightningElement } from 'lwc';
import hasViewAllData from '@salesforce/userPermission/ViewAllData';

export default class MyLwc extends LightingElement {
    get hasViewAllData() {
        return hasViewAllData;
    }
}

Now you can just refer to the hasViewAllData method in HTML as below. The contents inside that template will be visible only if the user has that permission.

HTML Code

<template>
    <template if:true={hasViewAllData}>
        This section is visible only if user has view all data permission
    </template>
</template>

Sample Code: check custom permission in the lightning web component

In this example, I have created custom permission named hasViewPackageSetupPage we will use this to check if the user can access the setup page of the managed package.

JS Code

// myLwc.js
import { LightningElement } from 'lwc';
import hasViewPackageSetupPage from '@salesforce/customPermission/ViewPackageSetupPage';

export default class MyLwc extends LightingElement {
    get hasViewPackageSetupPage() {
        return hasViewPackageSetupPage;
    }
}

HTML Code

<template>
    <template if:true={hasViewPackageSetupPage}>
        This section is visible only if user has hasViewPackageSetupPage custom permission
    </template>
</template>

Similarly, you can check other permissions directly into a lightning web component. This has definitely made our life easier. 

References

Mapping between Salesforce Permission Name and the Label