HTML: <template> <lightning-card title = "Search Accounts" icon-name = "custom:custom63"> <div class = "slds-m-around_medium"> <lightning-input type = "search" onchange = {handleKeyChange} class = "slds-m-bottom_small" label = ....
sample.css: .textCSS { color: red; } .slds-card__header { color: green; font-weight: bold; text-align: center; } .slds-th__action { color: blue; justify-content: center !important; } .buttonCSS ....
We can import the CSS from Static Resource using @salesforce/resourceUrl/StaticResourceAPIName and use it in the Lightning Web Component. LightningCard.css: .textCSS { color: red; } .slds-card__header { color: green; font-weight: bold; ....
In Salesforce Lightning Web Component lightning-datatable, we can sort the records in JavaScript. We can avoid Server Calls(Apex) to sort the records using SOQL sorting. Sample Code: Apex Class: public ....
Sample Code: HTML: <template> <lightning-card title = "{Title}"> <lightning-button label="New" slot="actions" onclick = {createNew}></lightning-button> <lightning-input type = "search" onblur = {handleKeyChange} class = ....
Sample Code: HTML: <template> <div class="slds-p-around_medium lgc-bg"> <div class="slds-m-bottom_small"> <lightning-button label="Expand All" onclick={clickToExpandAll}> </lightning-button> <lightning-button label="Collapse All" onclick={clickToCollapseAll}> </lightning-button> </div> <lightning-tree-grid ....
setCustomValidity() and reportValidity() methods can be used for dynamic Field required and error message in Salesforce Lightning Web Component. Sample Code: HTML: <template> <div class="slds-theme--default slds-p-around_large"> <lightning-input type="toggle" label="Basic option" name="toggle" ....
Lightning web components dispatch standard DOM events. Components can also create and dispatch custom events. Use events to communicate up the component containment hierarchy. For example, a child component, c-todo-item, ....
Sample code: HTML: <template> <div class="slds-box slds-theme--default"> <lightning-button-menu alternative-text="Show menu" variant="border-filled" onselect={handleOnselect} label="Actions"> <lightning-menu-item value="Account" label="Create Account"></lightning-menu-item> <lightning-menu-item value="Contact" label="Create Contact"></lightning-menu-item> <lightning-menu-item value="Lead" label="Create Lead"></lightning-menu-item> <lightning-menu-item value="Opportunity" label="Create Opportunity"></lightning-menu-item> </lightning-button-menu> ....
Sample Code: Apex Class: public with sharing class ExampleController { @AuraEnabled(cacheable=true) public static List < Account > fetchAccounts() { return [ SELECT Id, Name, Industry FROM Account LIMIT 10 ]; ....