Custom Permission in LWC (Lightning Web Component)

In this post, we will access the Custom Permission in LWC (Lightning Web Component) to check if the User has access to perform a particular action. Initially, we had to do this by calling an Apex method to check if the User has access to Custom Permission. In this post, we will use the Latest Feature introduced in Summer ’20 to access the Custom Permission in LWC.

If you are reading this post before 18th July 2020, we can only test this feature in Salesforce Pre-release Summer 2020 org. Click this link to sign up for your Pre-release org to test the Summer ’20 features. Now, let’s hop into the implementation.

Implementation

In this implementation, we will have a button on-page that will open the External Website. One user who has the Custom Permission access should be able to navigate to External Website. For the other user who does not have the access to Customer Permission, the button to open the External Website will be disabled.

To create a button to open the External Website, we will use our previous implementation which is implemented using Navigation Service in Lightning Web Components. Please check the implementation of this cool feature to navigate to various pages like Objects Record and ListView, Lightning Component, Tabs, External Website, etc from Lightning Web Components.

First, create Custom Permission open external link. It will look like below:

Then, create a Permission Set External Website Access and edit it to add Custom Permission open external link in the permission set.

Then, click on Manage Assignments to assign this Permission Set to current user.

Create a Lightning Web Component navigationService and create a button to navigate to External Website. In this post, I am using the same component that we used to implement the Navigation Service in Lightning Web Component. Check this post it if you want to know how to implement it as this post won’t explain it.

navigationService.html

<template>
    <lightning-card title="Navigation Services">
        <div class="slds-p-left_medium">
            <br/>
            <lightning-button-group>
                <lightning-button label="Account Home" onclick={openAccountHome}></lightning-button>
                <lightning-button label="Account List" onclick={openAccountList}></lightning-button>
                <lightning-button label="Create New Account" onclick={createNewAccount}></lightning-button>
                <lightning-button label="Account Record" onclick={openAccountRecord}></lightning-button>
                <lightning-button label="Open Lightning Component" onclick={openLightningComponent}></lightning-button>
                <lightning-button label="Open External Salesforce Blog" onclick={openSalesforceBlog}
                    disabled={hasExternalAccess}></lightning-button>
            </lightning-button-group>
        </div>
        <br/>
    </lightning-card>
</template>

Notice the last button, it will be used to open the External Website. Park this component for now.

In the JS Controller, first, we will implement the Navigation Service to open the External Website, Then import Custom Permission using:

import hasExternalWebsiteAccess from '@salesforce/customPermission/open_external_link';

where, open_external_link is the Custom Permission that we created.

Then, we can use hasExternalWebsiteAccess to check if the current User has access to Custom Permission open_external_link.

Create a getter hasExternalAccess to return !hasExternalWebsiteAccess. Notice that we are using NOT operator (!) to return hasExternalWebsiteAccess. Check this post to know how getters work in Lightning Web Components.

navigationService.js

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import hasExternalWebsiteAccess from '@salesforce/customPermission/open_external_link';
 
export default class NavigationService extends NavigationMixin(LightningElement) {
    openAccountHome(){
        this[NavigationMixin.Navigate]({
            type : 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'home'
            }
        });
    }
 
    openAccountList(){
        this[NavigationMixin.Navigate]({
            type : 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'list'
            }
        });
    }
 
    createNewAccount(){
        this[NavigationMixin.Navigate]({
            type : 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'new'
            }
        });
    }
 
    openAccountRecord(){
        this[NavigationMixin.Navigate]({
            type : 'standard__recordPage',
            attributes: {
                recordId: "0019D00000A1gMmQAJ",
                actionName: 'view'
            }
        });
    }
 
    openLightningComponent(){
        this[NavigationMixin.Navigate]({
            type: 'standard__component',
            attributes: {
                componentName: 'c__AuraCmp'
            }
        });
    }
 
    openSalesforceBlog(){
        this[NavigationMixin.Navigate]({
            type : 'standard__webPage',
            attributes: {
                url : 'https://niksdeveloper.com/category/salesforce/'
            }
        });
    }

    // Getter
    get hasExternalAccess(){
        return !hasExternalWebsiteAccess;
    }
}

Finally, use this getter hasExternalAccess as a value for the disabled attribute of button. If the current user has access to Custom Permission, hasExternalAccess will be true and the disabled attribute will be false as we are returning !hasExternalAccess. And the button will be visible. If the current user does not have access to Custom Permission, hasExternalAccess will be false. The getter will return true which will disable the button.

Custom Permission in Lightning Web Components

For the user who has access to Custom Permission, this is how it will look:

For the user who does not have access to Custom Permission, the button to open External Website will be disabled.

This is how we can access Custom Permission in LWC (Lightning Web Component). If you want to check more implementations using Lightning Web Components, you can check it here.

If you don’t want to miss new posts, please Subscribe here. I hope I will see you in the next post with the new implementation. Thanks!