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 ]; ....
LWC HTML: <template> <div class="slds-p-around_medium lgc-bg"> <div class="slds-m-bottom_small"> <lightning-button label="Collapse All" onclick={clickToCollapseAll}> </lightning-button> <lightning-button label="Expand All" onclick={clickToExpandAll}> </lightning-button> ....
Sample Code: LWC HTML: <template> <lightning-tree-grid columns = {gridColumns} data = {gridData} key-field = "Id" hide-checkbox-column = true onheaderaction = {handleHeaderAction}> </lightning-tree-grid> </template> LWC JavaScript: import { LightningElement, track, wire ....
Sample code: HTML: <template> <div class="slds-box slds-theme_default"> <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered"> <thead> <tr> <th class="" scope="col"> <div class="slds-truncate" title="Account Name">Name</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Account Industry">Industry</div> </th> ....
With custom component, we can enable and disable buttons in Flow. Sample Flow: Screen - First and Last Name:We get the First and Last name from the user. Assignment - ....
HTML: <template> <lightning-datatable key-field="Id" data={contacts} columns={columns} hide-checkbox-column="true" show-row-number-column="true" onrowaction={handleRowAction}> </lightning-datatable> </template> JavaScript: import { LightningElement, api, track } from 'lwc'; import { NavigationMixin ....
Sample code: HTML: <template> <div class="slds-box slds-theme_default"> <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered"> <thead> <tr> <th scope="col"> <div class="slds-truncate" title="Account Name">Name</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Account Industry">Industry</div> </th> <th ....