Implementing Field-Level-Security in LWC for lightning-input Components

Implementing Field-Level-Security (FLS) in Lightning Web Components (LWC) is an important aspect of building secure and customized applications. FLS is a security feature in Salesforce that allows administrators to control access to fields based on a user’s profile. This helps in preventing unauthorized access to sensitive information and maintaining data privacy.

In Lightning Web Components (LWC), Field-Level-Security can be implemented using the Lightning Data Service (LDS) component. However, there may be cases where using LDS may not be feasible, and in such scenarios, an alternate solution is required.

In this blog post, we’ll take a look at how to implement FLS in LWC for the <lightning-input> component. The code provided in the prompt demonstrates the process of fetching the object information using the getObjectInfo method of the lightning/uiObjectInfoApi module. This method provides the metadata of the object, including information about its fields, such as their visibility, updateability, and other properties.

Once the object information is fetched, the code checks the visibility of each field defined in the fields array. If a field is visible, the code sets its visibility to true and checks if the field is updateable. If it is not updateable, the code sets the disabled property of the corresponding <lightning-input> component to true, making it read-only.

The code uses the template and if:true directive to conditionally render the <lightning-input> components based on the visibility and updateability of the fields. The code uses the track decorator to declare a trackable variable contactFLS that stores the visibility and disabled properties of the fields.

	<template>
	<lightning-card title="Contact" icon-name="standard:contact">
	<div style="padding: 5px;">
	<template if:true={contactFLS.FirstNameVisible}>
	<lightning-input label="First Name" type="text" disabled={contactFLS.FirstNameDisabled}></lightning-input>
	</template>
	<template if:true={contactFLS.LastNameVisible}>
	<lightning-input label="Last Name" type="text" disabled={contactFLS.LastNameDisabled}></lightning-input>
	</template>
	<template if:true={contactFLS.EmailVisible}>
	<lightning-input label="Email" type="text" disabled={contactFLS.EmailDisabled}></lightning-input>
	</template>
	<template if:true={contactFLS.PhoneVisible}>
	<lightning-input label="Phone" type="text" disabled={contactFLS.PhoneDisabled}></lightning-input>
	</template>
	</div>
	</lightning-card>
	</template>

view raw createNewContact.html hosted with ❤ by GitHub

	import { LightningElement, wire, api, track } from 'lwc';
	import { getObjectInfo } from 'lightning/uiObjectInfoApi';

	// Importing required modules from the LWC library
	import { ShowToastEvent } from 'lightning/platformShowToastEvent';
	export default class CreateNewContact extends LightningElement {

	// Defining the object API name
	objectApiName = 'Contact';

	// Defining the fields to be displayed
	fields = ['FirstName', 'LastName', 'Email', 'Phone'];

	// Declaring a trackable variable to store the contact fields data
	@track contactFLS = {};

	// Function to check the visibility of the fields
	checkFieldVisibility(data, fieldName) {
	// Checking if the field exists in the data
	if (data.fields[fieldName] != undefined) {
	// If exists, return true
	return true;
	} else {
	// If not exists, return false
	return false;
	}
	}

	// Using the wire method to fetch the object information
	@wire(getObjectInfo, { objectApiName: '$objectApiName'})
	objectInfo({error, data}) {
	// Handling the error
	if (error) {
	// Showing the toast message
	const message = 'Error fetching object information: ' + error.message;
	this.dispatchEvent(new ShowToastEvent({
	title: 'Error',
	message: message,
	variant: 'error'
	}));
	}
	// Checking if data is present
	else if (data) {
	// Iterating through the fields defined
	this.fields.forEach(field => {
	// Checking the visibility of the field
	if (this.checkFieldVisibility(data, field)) {
	// If visible, setting the visibility to true and checking if the field is updateable or not
	this.contactFLS[`${field}Visible`] = true;
	this.contactFLS[`${field}Disabled`] = !data.fields[field].updateable;
	} else {
	// If not visible, setting the visibility to false
	this.contactFLS[`${field}Visible`] = false;
	}
	});
	}
	}

	}

view raw createNewContact.js hosted with ❤ by GitHub

In conclusion, the code provided in the prompt demonstrates an effective way of implementing FLS in LWC for the <lightning-input> component. This approach can be used to control access to fields based on a user’s profile and maintain data privacy in Salesforce applications.