Re-use CSS in LWC using CSS Module
cssLibrary.css: h1 { text-align: center; font-weight: bold; font-size: large; color: black; } .bgCSS { background: black; color: white; font-weight: bold; } cssLibrary.js-meta.xml: <?xml ....
Tag: Salesforce Lightning Web Component
How to pass data from one LWC to another in Salesforce?
Sample Code: sample.messageChannel-meta.xml: <?xml version="1.0" encoding="UTF-8"?> <LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata"> <masterLabel>Sample</masterLabel> <isExposed>true</isExposed> <description>This is a sample Lightning Message Channel.</description> <lightningMessageFields> <fieldName>variable1</fieldName> <description>Variable 1</description> </lightningMessageFields> </LightningMessageChannel> component1.html: <template> <lightning-card title="Component 1"> <lightning-button label="Publish" ....
Lightning Web Component(LWC) Components Communication in Salesforce
Communicate from Parent to Child The @api decorator in the child component exposes a property, making it public, so that the parent component can update it. Similarly, @api decorator function ....
How to check and uncheck check box lightning:input in LWC in Salesforce?
Sample Code: HTML: <template> <div class="slds-theme--default slds-p-around_large"> <lightning-input type="checkbox" label="Basic option" checked={showBool}></lightning-input><br/><br/> <lightning-button variant="brand" label="Uncheck" onclick={hide}></lightning-button> </div> </template> JavaScript: import { LightningElement } from 'lwc'; export default class Sample extends ....
How to pass data from parent to child component using LWC in Salesforce?
The @api decorator in the child component exposes a property, making it public, so that the parent component can update it. Similarly, @api decorator function in child component can expose ....
How to pass data from child to parent component using LWC in Salesforce?
Sample Code: parentLWC.html: <template> <div class="slds-box slds-theme_default"> Value entered in Child LWC is {strOutput}<br/><br/> <c-child-l-w-c onpass={fetchValue}></c-child-l-w-c> </div> </template> parentLWC.js: import { LightningElement } from 'lwc'; export default class ParentLWC extends ....
Validation in lightning-datatable in Salesforce LWC
Sample Code: HTML: <template> <lightning-card title = "Accounts" icon-name = "custom:custom63"> <div class = "slds-m-around_medium"> <template if:true = {accounts}> <div> <lightning-datatable key-field = "Id" data = {accounts} columns = {columns} ....
Pagination with lightning-tree-grid using LWC in Salesforce
Note: 1. Pagination is done in client side(JavaScript). So, this is not the ideal solution for mass records. 2. Consider checking the page performance before using it in Production. 3. ....
How to find events between datetimes and display using LWC in Salesforce?
Using Salesforce Lightning Web Component and Apex, we can fetch and display events between date time range. Following code implementation is used for the below use case. 1. Search the ....
Pass whole record using data-record-id using LWC in Salesforce
Inside the iterator, use it.index. Using the index, get the full record information from the list/array of records. Apex Class: public with sharing class AccountController { @AuraEnabled( cacheable = true ....