Reusable Dynamic Lightning Input with Field Level Security : sanketthoughts
by: sanketthoughts
blow post content copied from Salesforce Diaries
click here to view original post
A lightning-input component creates an HTML <input> element. When working with forms that interact with Salesforce records, lightning-input does not works as lightning-input-field with works with lightning-record-form, lightning-record-view-form, and lightning-record-edit-form components. lightning input field supports the field level security along with many other features like population the fields based on field type dynamically whereas lightning input does not. We are going to add the Field Level Security in Lightning Input component using getObjectInfo wire adaptor that gives us field level metadata on a particular object.
Limitation
- lightning-input does not support several field type like picklist, text area etc.
- It does not support pre-populating the field values when you load the component in record context.
Dynamic Lightning Input extended Component
We are going to build a custom Lightning Web Component with input which can be called from any other Lightning Web component. by passing the field API name and object API name.
input.html
We are making use of standard lightning-input component and rendering it based on user has edit permission for passed field api name into js file. You can modify it based on your requirement. Additionally, it shows you the help text, label, field type and required attribute from field metadata.
<template>
<lightning-input if:true={fieldInfo.updateable} type={fieldInfo.dataType}
label={fieldInfo.label} required={fieldInfo.required}
field-level-help={fieldInfo.inlineHelpText} onchange={handleChange}>
</lightning-input>
</template>input.js
getObjectInfo wire adapter gives you metadata about a specific object. The response includes metadata describing the object’s fields, child relationships, record type, and theme. We are fetching passed field API name related metadata from response received by calling getObjectInfo wire adaptor.
We are also firing change event to pass the field entered value. You can extend the same for other events like blur and focus.
fieldInfo getter stores the field metadata and referred in html file to pass the value to standard lightning input component.
import { LightningElement, wire, api } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
export default class Input extends LightningElement {
@api objectApiName;
@api fieldName;
@wire(getObjectInfo, { objectApiName: '$objectApiName' })
objectInfo;
dataTypeMapping = {
String: 'text',
Currency: 'number',
Double: 'number',
DateTime: 'datetime',
Phone: 'phone',
Boolean: 'checkbox',
Url: 'url',
Date: 'date',
Int: 'number'
}
get fieldInfo() {
if (this.objectInfo && this.objectInfo.data && this.objectInfo.data.fields) {
let field = this.objectInfo.data.fields[this.fieldName];
field = JSON.parse(JSON.stringify(field));
field.dataType = this.dataTypeMapping[field.dataType];
return field;
}
return {};
}
handleChange(event) {
let value;
if (event.target.type === 'checkbox' || event.target.type === 'checkbox-button' || event.target.type === 'toggle') {
value = event.target.checked;
} else {
value = event.target.value;
}
this.dispatchEvent(new CustomEvent('change', { detail: value }));
}
}input.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>false</isExposed>
</LightningComponentBundle>Now, We will call this component in another component to understand how to use this reusable dynamic input field which respect the field level security of a user.
Let’s create another component with name inputCaller .
inputCaller.html
The reusable dynamic lightning input extended component can be called from any other component by just passing field and object api name.
<template>
<lightning-card title="Dynamic HTML Input With Field Level Security" icon-name="custom:custom63">
<div class="slds-var-m-around_medium">
<p class="slds-var-m-bottom_small">
<c-input object-api-name="Account" field-name="NumberOfEmployees" onchange={handleChange}></c-input>
Entered Value is: {fieldValueFromInput}
</p>
</div>
</lightning-card>
</template>inputCaller.js
handleChange will be fired whenever user type something in input field. fieldValueFromInput stores the field value.
import { LightningElement } from 'lwc';
export default class InputCaller extends LightningElement {
fieldValueFromInput; //property to hold the entered field value
//Assigning the payload to private property
handleChange(event) {
this.fieldValueFromInput = event.detail.value;
}
}inputCaller.js-meta.xml
We can test the component by adding it on any lightning page. XML file defines the metadata of the component like where it can be used in Salesforce.
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>DEMO – LIGHTNING INPUT WITH FIELD LEVEL SECURITY
The post Reusable Dynamic Lightning Input with Field Level Security appeared first on Salesforce Diaries.
September 10, 2022 at 05:45PM
Click here for more details...
=============================
The original post is available in Salesforce Diaries by sanketthoughts
this post has been published as it is through automation. Automation script brings all the top bloggers post under a single umbrella.
The purpose of this blog, Follow the top Salesforce bloggers and collect all blogs in a single place through automation.
============================
Post a Comment